searchParamsでパラメーターを取得する方法
2022年6月現在、Googleで「JavaScript パラメーター 取得」などで検索すると関数を作ってURLのパラメーターの値を取得するコードが掲載されているWebサイトが検索結果上位に表示される。
しかし、すでにご承知の通り2022年6月16日からIE11のサポートが終了しました。
そのため今後はいままでIE11で使えなかったJavaScriptのsearchParamsを使って短いコードでURLのパラメーターの値の取得が可能です。
const url = new URL('https://iwb.jp/?id=123&user=sato')
const param = url.searchParams
const result1 = param.get('id')
const result2 = param.get('user')
console.log(result1) // 123
console.log(result2) // sato
searchParamsの12個のメソッド
searchParamsには12個のメソッドがあるので全部覚えておくとURLのパラメーターの処理がしやすくなります。
get
URLのパラメーターの値を取得できる。
const url = new URL('https://iwb.jp/?foo=1&bar=2')
const params = url.searchParams
const result = params.get('foo')
console.log(result) // 1
getAll
指定したパラメーターのすべての値を配列として返す。
const url = new URL('https://iwb.jp/?foo=1&foo=2')
const params = url.searchParams
const result = params.getAll('foo')
console.log(result) // ['1', '2']
has
指定されたパラメーターの有無をBoolean値で返す。
const url = new URL('https://iwb.jp/?foo=1')
const params = url.searchParams
const result1 = params.has('foo')
const result2 = params.has('bar')
console.log(result1) // true
console.log(result2) // false
set
パラメーターを追加する。
すでに同名のキーがある場合は上書きされる。
foo=1がある場合はfoo=3も。
const url = new URL('https://iwb.jp?foo=1&bar=2')
const params = url.searchParams
params.set('foo', 3)
console.log(params.getAll('foo')) // ['3']
append
パラメーターを追加する。
すでに同名のキーがあっても上書きされない。
const url = new URL('https://iwb.jp?foo=1&bar=2')
const params = url.searchParams
params.append('foo', 3)
console.log(params.getAll('foo')) // ['1', '3']
delete
パラメーターを削除する。
const url = new URL('https://iwb.jp?foo=1&bar=2')
const params = url.searchParams
params.delete('foo')
console.log(params.get('foo')) // null
keys
オブジェクトに含まれるすべてのキーを反復処理できるiteratorを返す。
const url = new URL('https://iwb.jp?foo=1&bar=2')
const searchParams = url.searchParams
for (const key of searchParams.keys()) {
console.log(key)
}
// foo
// bar
values
オブジェクトに含まれるすべての値を反復処理できるiteratorを返す。
const url = new URL('https://iwb.jp?foo=1&bar=2')
const searchParams = url.searchParams
for (const key of searchParams.values()) {
console.log(key)
}
// 1
// 2
entries
オブジェクトに含まれるすべてのキーと値のペアを反復処理できる iteratorを返す。
const url = new URL('https://iwb.jp?foo=1&bar=2')
const searchParams = url.searchParams
for (const pair of searchParams.entries()) {
console.log(pair[0]+ ', '+ pair[1])
}
// foo, 1
// bar, 2
forEach
オブジェクトに含まれるすべての値を反復処理する。
const url = new URL('https://iwb.jp?foo=1&bar=2')
const searchParams = url.searchParams
searchParams.forEach((value, key) => {
console.log(value, key)
})
// foo 1
// bar 2
sort
キーの並び替え。
toString
文字列にして返す。
const params = new URLSearchParams('c=3&a=1&b=2')
params.sort()
console.log(params.toString())
// a=1&b=2&c=3