JavaScriptのURLのパラメーターをsearchParamsで取得する方法

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