JavaScriptでクエリ付きURLを簡単に作る（URLSearchParams）

JavaScriptを用いてURLにクエリを入れるとめちゃめちゃ簡単なので紹介します。

この URLSearchParams を知らなかったときは、自力でこのように頑張ってました。

var url = "/search"
if (keyword) {
    url += "?keyword=" + keyword
}

if (tag) {
    url += "&tag=" + tag
}

window.location.href = url

でも、一番最初のパラメータは ?keyword= のように ?が入りますし、2個目以降のクエリには & が必要で、1個目か2個目か判定するのも面倒だし、どうしようかなーーーということで、

こういう時に便利なのが URLSearchParams ですね。

パラメータをオブジェクト形式で持っておくと、一瞬でこのクエリ文字列に変換してくれます。

例えば先程の例だとこんなにコンパクトに分かりやすくなります。

const params = {
    keyword: "keyword",
    tag: "tag"
}
const urlSearchParam =  new URLSearchParams(params).toString();
// keyword=keyword&tag=tag

window.location.href = "/?" + urlSearchParam

いかがでしょう？直感的ですごく分かりやすいですよね。

これを知って以来、結構URLSearchParamsを多用するようになりました！
皆さんもぜひ使ってみてくださいね