カテゴリー
SugiBlog Webデザイナー・プログラマーのためのお役立ちTips

JavaScriptでクエリ文字列をスマートに生成する

この記事は最終更新日から1年以上経過しています。

URLパラメーターとしてクエリ文字列を渡す際に、クエリ文字列をスマートに生成することについて考察してみました。

昔ながらのクエリ文字列生成方法

let params = "";
params += "a=b";
params += "&c=d";
console.log(params);

出力結果

a=b&c=d

この方法だと条件式によってパラメーターを追加していくって場合にはアンパサンド(&)が問題になってくるのでちょっと不便ですね。
それを単純に解消しようと思うと以下のようなやり方でしょうか。

const DATA = [];
DATA.push("a=b");
DATA.push("c=d");

console.log(DATA.join("&"));

URLSearchParamsインターフェイス

URLSearchParamsインターフェイスを使うと、もっとスマートに生成できます。

const params = new URLSearchParams();

params.append("a", "b"); // append(name, value)
params.append("c", "d");

console.log(params.toString());

params.set()でもOKです。setの場合、同じ名前だと上書きされます。

オブジェクトリテラルを使うパターン

const params = new URLSearchParams({a: "b", c: "d"});
console.log(params.toString());

appendのように色々値を追加しながら最後にクエリ文字列を生成するパターン

const DATA = {};
DATA.a = "b";
DATA.c = "d";

const params = new URLSearchParams(DATA);
console.log(params.toString());

配列を使うこともできます。

const params = new URLSearchParams([["a", "b"],["c", "d"]]);
console.log(params.toString());

順次、配列に追加していくパターン

const DATA = [];
DATA.push(["a", "b"]);
DATA.push(["c", "d"]);

const params = new URLSearchParams(DATA);
console.log(params.toString());

公式リファレンス:
URLSearchParams – Web API | MDN

この記事がお役に立ちましたらシェアお願いします
2,994 views

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です