🐷
searchParamsで指定パラメーターを簡単に削除したい
はじめに
以前の案件で指定パラメーターを削除する要件があったのですが、searchParamsを使うと思った以上に簡単に変更ができたのでメモしておきます。
ソース
先にコードを上げると下記方法で削除ができます。
const url = new URL('https://example.com/?hoge=test&fuga=test2');
const params = url.searchParams;
params.delete('hoge')
console.log(url.href); // "https://example.com/?fuga=test2"
new URL とは
URLクラスの引数としてURL文字列を渡すと、その中身を解析してURLオブジェクトを作成＆返却します。
今回の例の場合だと、以下の内容でオブジェクトが返ります。
※各プロパティの意味はこちらにそれぞれ詳しく書かれています。
searchParams
URLクラスが持つプロパティです。引数として渡したURLをセットしたURLSearchParamsオブジェクトが返されます。
このURLSearchParamsオブジェクトによって、デコードされた、先ほどのURL文字列のパラメータへのアクセスが可能になります。
ちなみにfor~ofでこのオブジェクトの中身を見ることができます。
パラメーターの一番初めの「?」は読みとばしてくれるので、パラメーター名と値のみが入ります。
for(const param of params) {
console.log(param) // ['hoge', 'test'] ['fuga', 'test2']
}
delete
URLSearchParamsが持つメソッドの1つです。
名前の通り、指定のパラメーターを全て削除してくれます。
ちなみに存在しないパラメーターを指定してもエラーにならず、何も変更されずに終わります。
実装時にハマったこと
初めて実装した際、削除後のパラメーター箇所のみ取得しようと下記のように実装してうまくいきませんでした。
const url = new URL('https://example.com/?hoge=test&fuga=test2');
const params = url.searchParams;
params.delete('hoge')
console.log(params) // URLSearchParams {}
あくまでparamsの中身は文字列ではなく、前述のオブジェクトであり、変更はurl側で破壊的に行われています。
そのため変更後のパラメーターは下記で取得することができます。
console.log(url.search) // ?fuga=test2
delete以外のメソッド
deleteだけでなく、反対にパラメーターをセットするsetやパラメーターの有無を判断するhasなど他にもメソッドは存在します。（詳細はこちらへ）
Discussion