JavaScriptでのURLSearchParamsの扱い

ご存知の通り、JavaScriptでフォームやGETリクエストを扱う際、次のような形式の文字列が発生します：

let paramsString = 'a=1&b=2&c=3';

このような文字列から特定のパラメータの値をプログラムで変更したい場合があります。そのためのコードを書くのはあまり便利ではありません。そのため、JavaScriptにはこのような文字列を扱うための特別なクラス URLSearchParams が組み込まれています。

このクラスのオブジェクトを作成し、パラメータ文字列を渡してみましょう：

let paramsString = 'a=1&b=2&c=3';
let searchParams = new URLSearchParams(paramsString);

作成されたオブジェクトが持つメソッドを見てみましょう。

パラメータ値の取得

メソッド get を使用して、パラメータの値を取得できます：

let res = searchParams.get('a');
console.log(res);

存在しないパラメータの値を取得してみましょう：

let res = searchParams.get('x');
console.log(res); // null を出力

メソッド has を使用して、パラメータの存在を確認できます。既存のパラメータを確認してみます：

let res = searchParams.has('a');
console.log(res); // true を出力

存在しないパラメータを確認してみます：

let res = searchParams.has('x');
console.log(res); // false を出力

メソッド toString を使用して、オブジェクトを文字列に戻すことができます：

let res = searchParams.toString();
console.log(res); // 'a=1&b=2&c=3' を出力

メソッド set を使用して、パラメータの値を変更できます：

searchParams.set('b', 'x');

変更を確認してみましょう：

let res = searchParams.toString();
console.log(res); // 'a=1&b=x&c=3' を出力

メソッド set を使用して、新しいパラメータを追加することもできます：

searchParams.set('d', '4');

変更を確認してみましょう：

let res = searchParams.toString();
console.log(res); // 'a=1&b=2&c=3&d=4' を出力

メソッド append を使用して新しいパラメータを追加することもできます：

searchParams.append('d', '4');

変更を確認してみましょう：

let res = searchParams.toString();
console.log(res); // 'a=1&b=2&c=3&d=4' を出力

既に存在するパラメータを追加してみましょう：

searchParams.append('a', '4');

この場合、メソッドは同じ名前のパラメータを末尾に追加します：

let res = searchParams.toString();
console.log(res); // 'a=1&b=2&c=3&a=4' を出力

ここに set メソッドと append メソッドの違いが表れます。前者は既存のパラメータを変更し、後者は単に末尾に重複を追加します。

メソッド delete を使用して、パラメータを削除できます：

searchParams.delete('b');

変更を確認してみましょう：

let res = searchParams.toString();
console.log(res); // 'a=1&c=3' を出力

パラメータはループで反復処理できます：

for (let p of searchParams) {
	console.log(p);
}

文字列に同じパラメータが複数あるとします：

let paramsString = 'a=1&a=2b=2&c=3';

メソッド getAll を使用して、これらのパラメータ値の配列を取得できます：

let res = searchParams.getAll('a');
console.dir(res); // [1, 2] を出力

次のようなパラメータ文字列があるとします：

let paramsString = 'test1=param1&test2=param2&test3=param3';

この文字列に、さらに別のパラメータ test3 を追加してください。

この文字列からパラメータ test2 を削除してください。

パラメータ test1 の値を新しい値に変更してください。