URLSearchParamsの使い方

URLSearchParamsとは

URLSearchParamsはURLパラメータを操作するのに便利なインタフェースです。

ブラウザに表示されるURLは次のような文字列になっていることがあります。

https://example.com?category=aaa&action=bbb

このうち、「?」以降の文字列、category=aaa&action=bbbの部分はサーバにデータを送るためのものでURLパラメータと呼ばれています。この部分をプログラムで動的に変更することで画面に変化を加えるという処理をすることがあります。

これを操作するためのインタフェースがURLSearchParamsです。

使い方

URLSearchParamsの引数にURLパラメータを設定するとURLSearchParamsオブジェクトが生成されます。これにtoString()を使用するとURLパラメータが返ります。

const paramString = 'category=aaa&action=bbb'
const params = new URLSearchParams(paramString)
console.log(params.toString())//category=aaa&action=bbb

このURLパラメータはcategory=aaaのようにキー（名前）と値で成り立っています。このうちキーの部分を検索パラメータとも呼びます。

よく使うメソッド

パラメータに対応する値を返す — get，getAll

引数に指定したキーに対応する値を返します。ない場合はnullを返します。

getメソッドは最初の値を返しますが、getAllはすべての値を返します。

const paramString = 'category=aaa&action=bbb'
const params = new URLSearchParams(paramString)
console.log(params.get('category'))//aaa

パラメータに値を追加する — append，set

appendとsetでURLパラメータを新たに追加することができます。appendは既にキーが存在しても重複して追加するのに対し、setは既にキーが存在する場合はその値を消して設定しなおします。

const paramString = 'category=aaa&action=bbb'
const params = new URLSearchParams(paramString)
params.append('category', 'ccc')
console.log(params.toString())//category=aaa&action=bbb&category=ccc

const paramString = 'category=aaa&action=bbb'
const params = new URLSearchParams(paramString)
params.set('category', 'ccc')
console.log(params.toString())//category=ccc&action=bbb

パラメータを削除する — delete

deleteでパラメータを削除できます。

const paramString = 'category=aaa&action=bbb'
const params = new URLSearchParams(paramString)
params.delete('category')
console.log(params.toString())//action=bbb

使用例

URLインタフェースと組み合わせて次のようにすることによって、URL操作が可能になります。

let url = new URL(location.href)
let params = url.searchParams;
params.set('hoge', 'boo');
history.pushState(null, '', url);

このコードを実行すると、URLパラメータにhoge=booが追加されます。

その他

ServiceNowのウィジェットではURLパラメータを用いて画面を変えるということをやるため、これが役に立ちます。