BLOG

JavaScriptで取得するGETの値

| JavaScript

JavaScriptでURLから?の値を取得する場合は以前は取得した数値を扱うのに
下記のように文字列を分割してそれをforeachなどで回して扱うイメージでしたが

const search = window.location.search
const words = search.split('&')
words.forEach((item, i)=>{
  console.log(item)
})

最近はなんか簡単になっていたのでメモメモ!

const searchParams = new URLSearchParams(window.location.search)

これで、値を取得するのも、有無も簡単にできる。

有無を確認する場合はhas
値を取得する場合はget
扱うことができる。

// URLが https://example.com/search?aaa=100&bbb=200 の場合
console.log(searchParams.has('aaa')) //=> ture
console.log(searchParams.get('aaa')) //=> 100

ね!すごく簡単です!

.toString() もあって、 window.location.search と同じ値が取得できるらしい
.append() .set() .delete() とかもあって値をいじれるようです。

console.log(searchParams.toString()) //=> aaa=100&bbb=200
console.log(searchParams.append('ccc', 300)) // 追加
console.log(searchParams.set('bbb', 250))    // 書き換え
console.log(searchParams.delete('ccc'))      // 削除

new URLSearchParamsを使うといろいろできることがわかりました。
使いやすくなったので今後もうまく使っていきます。

PAGE TOP