JavaScript URLのパラメーターを結合したりマージしたい

URL のクエリストリングとかサーチクエリとか言われる ?key=value をマージしたり結合したりする方法のメモ

URLSearchParams を使ってパラメーターをマージしたり結合したりする

new URLSearchParams は引数に配列 [[key, value], [key, value]], オブジェクト {key: value, key: value} いずれも取ることができるので、この仕様を利用してマージしたり結合した引数を作って渡せば良い

1. パラメーターを結合する

// 期待する結果 `a=1&b=2&a=2&c=3`
const paramA = "a=1&b=2";
const paramB = "a=2&c=3";

const pA = new URLSearchParams(paramA);
const pB = new URLSearchParams(paramB);

new URLSearchParams([
    ...pa.entries(),
    ...pb.entries()
]).toString();
// => a=1&b=2&a=2&c=3

2. パラメーターをマージする

// 期待する結果 `a=2&b=2&c=3`
const paramA = "a=1&b=2";
const paramB = "a=2&c=3";

const pA = new URLSearchParams(paramA);
const pB = new URLSearchParams(paramB);

new URLSearchParams([
    ...Object.fromEntries(pa),
    ...Object.fromEntries(pb)
]).toString();
// => a=2&b=2&c=3

関数化する

const mergeURLSearchParams = (paramA: string, paramB: string, isMerge = true): string => {
  const paramA = "a=1&b=2";
  const paramB = "a=2&c=3";

  const pA = new URLSearchParams(paramA);
  const pB = new URLSearchParams(paramB);

  if (isMerge) {
    return new URLSearchParams([
      ...Object.fromEntries(pa),
      ...Object.fromEntries(pb)
    ]).toString();
  }

  return new URLSearchParams([
    ...pa.entries(),
    ...pb.entries()
  ]).toString();
}