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">がないのが前提です）。