URLSearchParamsとは

クエリパラメーターとはURLの末尾にある「?」以降の文字列のことで、key=valueを&でつないだものです。
その値を元にデータをURLで管理し、多くの場合、ページ番号や、検索結果の保持に使われます。

その文字列を操作しやすくしてくれるのがURLSearchParamsです。

使い方

使い方は以下のように新規インスタンスを生成し、追加・削除・取得等の操作を行えるというものです。
インスタンス化する際に引数にlocation.searchを入れることで現在のパラメーターを取得できます。

const params = new URLSearchParams(location.search);
params.append("name","foo")
params.append("data","bar")
const url = `https://example.com?${params.toString()}`;

console.log(url); // https://example.com?name=foo&data=bar

値を追加するメソッド

params.append("name","foo")
params.append("name","bar")
// name=foo&name=bar

appendはパラメーターのkeyの重複が可能です。keyが重複しても問題ない場合はappendを使用します。

params.set("name","foo")
params.set("name","bar")
// name=bar

setはパラメーターのkeyの重複は不可で、keyが重複した場合は後から設定されたものが値となります。

値を取得するメソッド

キーを指定して取得する方法としてgetとgetAllがあります。

params.get('name')
// foo
params.getAll('name')
// ['foo']

また、keys() / values() / entries()の反復処理ができるイテレーターを返すメソッドがあります。

Array.from(params.keys())
// (2) ['name', 'data']

Array.from(params.values())
// (2) ['foo', 'bar']

Object.fromEntries(params.entries())
// {name: 'foo', data: 'bar'}

存在を確認するメソッド

指定したキーを元に存在するかを確認します。

params.has('name')
// true

削除するメソッド

指定されたキーと値に一致する検索パラメーターを、検索パラメーターのリストからすべて削除します。

params.delete('name')

まとめ

クエリパラメーターの操作はかなり冗長なコードになりがちなのですがURLSearchParamsを使用することでかなり見通しよく書けるようになります。
ぜひ参考にしてみてください。