クエリ文字列を連想配列に変換する簡単なやり方 (URLSearchParams)
location.search で取得した ?hoge=fuga&foo=bar みたいなクエリ文字列をパースする時に、コレまでは npm の query-string パッケージを使ったりしていた。
もしくは、次のように自分でパースしてみたこともあった。
// slice(1) で先頭の '?' を除去している
const params = window.location.search.slice(1).split('&').reduce((acc, current) => {
const pair = current.split('=');
const key = pair[0];
const value = pair[1]; // 場合によっては decodeURIComponent() をかませる
acc[key] = value;
return acc;
}, {});
今でもこの手法は有効ではあるが、最近は URLSearchParams というインターフェースがあるようだ。
const urlSearchParams = new URLSearchParams(location.search);
でインスタンス化すると色々なことが出来るようだ。先頭の ? の有無とかも気にしなくて良い。
// location.search 風な文字列を自分で作って渡してやってもちゃんと処理する
const myLocationSearch = '?hoge=fuga&foo=bar';
const pairs = [...new URLSearchParams(myLocationSearch).entries()];
// → [ [ 'hoge', 'fuga' ], [ 'foo', 'bar' ] ]
こんな風に配列にセットしてやると、Key Value のペアの配列になる。この .entries() は省略しても等価なので、クエリ文字列を連想配列にするワンライナーが以下のように作れる。
const params = [...new URLSearchParams(location.search)].reduce((acc, pair) => ({...acc, [pair[0]]: pair[1]}), {});
// → { hoge: 'fuga', foo: 'bar' }
トリッキーに見えるが、URLSearchParams に渡す引数は undefined・null・空文字・オブジェクトなど、結構メチャクチャなデータを投げつけてもうまく処理してくれる。ざっと触ってみた感じ例外が発生することはなさそうだ。
ワンライナーが厳しければ、
const pairs = [...new URLSearchParams(myLocationSearch)];
pairs.forEach((pair) => {
const key = pair[0];
const value = pair[1];
});
この Key・Value ペアを作るイディオムだけでも覚えておくと、find したりなんだりがやりやすくなると思う。