JavaScriptでクエリー文字列を作成する方法

2023/12/18 JavaScript

こんにちは、さるまりんです。

今回はJavaScriptでクエリー文字列を作成する方法です。

item_type=books&price_from=500&price_to=1000

のような文字列を作成してクエリー付きのURLを作成したい時は

URLSearchParamsを使います

こんな感じです。

const params = {
    item_type: "books",
    price_from: 500,
    price_to: 1000
};

const queryString = new URLSearchParams(params).toString();

window.location.href = "/search?" + queryString;

このコードでは以下のことをしています。
1. paramsにクエリに使われるキーと値をもつ
2. paramsを使ってURLSearchParamsを作る
3. できたURLSearchParamsをtoStringで文字列にする
4. /search?item_type=books&price_from=500&price_to=1000にリダイレクトする

簡単ですね。

URLSearchParamsのコンストラクタには文字列でitem_type=books&price_from=500&price_to=1000をそのまま渡すことも、上の例のようにオブジェクトを渡すことも、こんな

const params = [
   ["item_price", "books"],
   ["price_from", 500],
   ["price_to", 1000]
];

のように、キーと値のペアを配列で渡すこともできます。

例のように画面上の選択肢の状態でクエリを作って検索するケースなどで使えますね。

JavaScriptもいろんなことができるので勉強したいと思います。
サーバーサイドもフロントもどちらも大切ですね。

読んでくださってありがとうございました。

それではまた！