まくまくJavaScriptノート
URL からクエリ文字列を取り出す／辞書オブジェクトからクエリ文字列を生成する (window.location.search, URLSearchParams)
Web アプリに検索機能を導入するとき、URL の末尾に指定された次のようなクエリ文字列を処理したいことがよくあります。
https://example.com/search?aaa=100&bbb=200
Web ブラウザ上の JavaScript から、URL のクエリ文字列部分（? とその後ろの文字列）を取得するには、Window.location オブジェクト の search プロパティを参照します。
console.log(window.location.search) //=> '?aaa=100&bbb=200'
クエリ文字列をパラメーターごとにキーと値のペアに分割するには、Web ブラウザが搭載する URLSearchParams クラス を使用します。
// window.location.search には '?aaa=100&bbb=200' が格納されていると仮定
const searchParams = new URLSearchParams(window.location.search)
console.log(searchParams.has('aaa')) //=> true
console.log(searchParams.get('aaa')) //=> '100'
console.log(searchParams.has('bbb')) //=> true
console.log(searchParams.get('bbb')) //=> '200'
console.log(searchParams.has('ccc')) //=> false
console.log(searchParams.get('ccc')) //=> null
URLSearchParams オブジェクトを次のように for-of ループで処理すると、すべてのパラメータを順番に取得することができます。
const searchParams = new URLSearchParams(window.location.search)
for (const [key, val] of searchParams) {
console.log(`${key}: ${val}`)
}
aaa: 100
bbb: 200
URLSearchParams クラスは、キーと値のペアが格納されたオブジェクトからクエリ文字列を生成する機能も備えています。
次のようにコンストラクタにオブジェクトを渡すだけです。
const searchParams = new URLSearchParams({
aaa: 100,
bbb: 200,
ccc: 300,
})
console.log(searchParams.toString()) //=> 'aaa=100&bbb=200&ccc=300'
console.log(searchParams.get('aaa')) //=> '100'
console.log(searchParams.get('bbb')) //=> '200'
console.log(searchParams.get('ccc')) //=> '300'
ちなみに、URLSearchParams インスタンスの append、set、delete メソッドを使うと、パラメーターの追加・上書き・削除を行うことができます。
const searchParams = new URLSearchParams()
searchParams.append('aaa', 100) // 追加
searchParams.append('bbb', 200) // 追加
searchParams.append('ccc', 300) // 追加
searchParams.set('bbb', 'XXXX') // 上書き
searchParams.delete('ccc') // 削除
console.log(searchParams.toString()) //=> 'aaa=100&bbb=XXXX'
