URLSearchParamsとは

URLSearchParamsは、URLのクエリ文字列を操作するためのWebブラウザ組み込みのAPIです。これを使用することで、URLのクエリパラメータ（URLの「?」以降の部分）を簡単に解析、操作、生成できます。

サンプルコード 01

// 1. URLSearchParamsオブジェクトの作成
// a) 文字列から作成
let params1 = new URLSearchParams('foo=1&bar=2');

// b) オブジェクトから作成
let params2 = new URLSearchParams({foo: '3', bar: '4'});

// c) 現在のURLのクエリ文字列から作成（ブラウザ環境で実行時）
let params3 = new URLSearchParams(window.location.search);

// 2. パラメータの取得
console.log(params1.get('foo')); // 出力: '1'
console.log(params1.getAll('foo')); // 出力: ['1']
console.log(params1.has('bar')); // 出力: true

// 3. パラメータの設定
params1.set('baz', '3');
console.log(params1.toString()); // 出力: 'foo=1&bar=2&baz=3'

// 4. パラメータの追加（同じ名前のパラメータを複数持つ場合）
params1.append('foo', '5');
console.log(params1.getAll('foo')); // 出力: ['1', '5']

// 5. パラメータの削除
params1.delete('bar');
console.log(params1.has('bar')); // 出力: false

// 6. すべてのパラメータの取得
for (let [key, value] of params1.entries()) {
  console.log(key + ': ' + value);
}

// 7. URLSearchParamsオブジェクトを文字列に変換
let queryString = params1.toString();
console.log(queryString); // 出力: 'foo=1&foo=5&baz=3'

// 8. 新しいURLの作成（ブラウザ環境で実行時）
let newUrl = new URL('https://example.com');
newUrl.search = new URLSearchParams({id: '123', category: 'books'}).toString();
console.log(newUrl.href); // 出力: 'https://example.com/?id=123&category=books'

サンプルコード 02

下記のgetParameter関数は、URLSearchParamsオブジェクトを引数として受け取り、特定の広告トラッキングパラメータを検索して返す関数です

function getParameter(searchParams: URLSearchParams) {
  const idList = ['gclid', 'yclid', 'wbraid', 'twclid', 'msclkid', 'ldtag_cl', 'fbclid'];
  for (const id of idList) {
    if (searchParams.get(id)) {
      return '&' + id + '=' + searchParams.get(id);
    }
  }
  return null;
}

サンプルコード 03

const url = new URL('https://example.com?gclid=1234567890');
const result = getParameter(url.searchParams);
console.log(result); // 出力: &gclid=1234567890
});