JavaScriptで取得するGETの値
| JavaScriptJavaScriptで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を使うといろいろできることがわかりました。
使いやすくなったので今後もうまく使っていきます。