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