クエリパラメーターを操作する「URLSearchParams」
Mineo Okuda
/ 1,280 views
URLSearchParamsとは
クエリパラメーターとはURLの末尾にある「?」以降の文字列のことで、key=valueを&でつないだものです。
その値を元にデータをURLで管理し、多くの場合、ページ番号や、検索結果の保持に使われます。
その文字列を操作しやすくしてくれるのがURLSearchParamsです。
使い方
使い方は以下のように新規インスタンスを生成し、追加・削除・取得等の操作を行えるというものです。
インスタンス化する際に引数にlocation.searchを入れることで現在のパラメーターを取得できます。
URLSearchParamsの使い方
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
値を追加するメソッド
append
params.append("name","foo")
params.append("name","bar")
// name=foo&name=bar
appendはパラメーターのkeyの重複が可能です。keyが重複しても問題ない場合はappendを使用します。
set
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を使用することでかなり見通しよく書けるようになります。
ぜひ参考にしてみてください。