URLSearchParamsを使ってみたら、けっこう便利でした。

`URLSearchParams`とは

URLSearchParamsは、URLのクエリ文字列を生成するための、JavaScriptにあるオブジェクトです。死に体なIE11を除けば、サポートの続くブラウザでほぼ利用可能です（Can I use）。

何が便利か

何も使わずにクエリ文字列を組み立てようとすれば、ループを回しつつエスケープをかけたりなど、各種の作業が必要となります。URLSearchParamsは、そういった作業を全部担ってくれるので、中身のデータを作るのに専念できます。

また、HTTPリクエストを投げる際に、application/x-www-form-urlencodedはmultipart/form-dataよりデータがコンパクトになりますので、その点でも有利です。

生成する

new URLSearchParamsで生成できますが、コンストラクタに渡せる引数のパターンがいくつもあります。

引数なしで、クエリのない状態のオブジェクトを作る
クエリ文字列を与えて、それを解析してオブジェクトに起こす
[['キー1', '値1'], ['キー2', '値2']…]のような、キーと値のペアの配列を渡す
{'キー': '値'}形式のオブジェクトを渡す

なお、URLSearchParamsは同じキーを複数入れることができますが、オブジェクト形式では同じキーを複数渡せませんので要注意です。

編集する

出来上がったURLSearchParamsオブジェクトに対して、appendでキー・値のペアを追加する、deleteで削除する、setでキー・値のペアを設定する、forEachやfor-ofでループを回すなどが可能です。

なお、「既存のクエリをURLSearchParamsでパースして、必要な部分を書き換える」ような応用であれば別ですが、そうでないなら「配列やオブジェクトとしてデータを整えた上で、最後にnew URLSearchParamsへ投げ込む」ほうがやりやすいかもしれません。

出力する

URLSearchParamsの結果を得たい場合、大きく2つの方法が考えられます。

toString()でクエリ文字列にする。なお、文字列 + オブジェクトのような連結演算や、`${オブジェクト}`のような式展開を行うと、自動でtoString()が行われますので、自分から書かなくて構わない場合もあります。
URLSearchParamsオブジェクトをそのままXMLHTTPRequestやfetchに渡して、POSTなどのリクエストボディに組み込む。なお、URLSearchParamsを使う場合、リクエストのContent-Typeはapplication/x-www-form-urlencodedであることが明らかですので、自分でヘッダを書く必要もなくなって楽です。

応用編

<form>の値をクエリ文字列に起こしたい場合、FormDataに「フォームから値を拾う」機能がありますので、new URLSearchParams([...new FormData(formElement)])のように、「FormDataをspreadして配列にしてからURLSearchParamsに入れる」という形で実行可能です（もちろん、<input type="file">がないのが前提です）。

外部リンク