背景
URLSearchParamsでクエリを作成する際にクエリより前の部分は別で管理していました。
const searchParams = new URLSearchParams({x:'a',y:'b'});
const url = `https://qiita.com/sample?${searchParams}`;
url;
//'https://qiita.com/sample?x=a&y=b'
こちらの記事でURLクラス経由で使用するのを紹介されていたので実装してみます。
サンプルコード
URLインスタンスからsearchParamsプロパティにアクセスしてクエリパラメータをセットします。
const url = new URL("https://qiita.com/sample");
url.searchParams.set('x','a');
url.searchParams.set('y','b');
url.href;
//'https://qiita.com/sample?x=a&y=b'
urlに関する情報をまとめて管理して、最終的に完成系のurlの文字列を作成できるので便利そうです。
課題としては複数のクエリパラメータを設定する時です。
以下のようにすれば良さそうです。
const url = new URL("https://qiita.com/sample");
const params = {'x':'a','y':'b'};
Object.keys(params).forEach(key=>{
url.searchParams.set(key,params[key])
})
url.href;
//'https://qiita.com/sample?x=a&y=b'
searchParamsは読取専用のため
searchParams自体を新しいURLSearchParamsオブジェクトで直接置き換えることはできません。
const url = new URL("https://qiita.com/sample");
url.searchParams = new URLSearchParams({'x':'a','y':'b'});
url.href;
//'https://qiita.com/sample'
最後に
普段はURLSearchParamsをそのまま使っていました。
パラメータが少ない際はURL経由で使うのが有効そうです。