URLの項目を並べ替えると同じキーはどうなる？URLSearchParams.sortの順序を知ろう

検索条件のURLを見比べると、同じ項目なのに並び順が違って読みづらい。URLSearchParams.sort()を使えばキーの順に並べられるけれど、「同じキーの値まで昇順になる」と思うと結果を読み違えるよ。

ここでは架空のクエリ文字列で、並べ替える対象、同名キーの順序、元データの変更を確認する。クエリはURLで?の後ろに続く部分。実際のページへのアクセスやURL変更は行わない。

sortが見るのはキーの文字

const params = new URLSearchParams('c=3&a=z&b=2&a=a');
params.sort();
console.log(params.toString());
// a=z&a=a&b=2&c=3

この例ではa、b、cというキーの順に並ぶ。一方、a=zとa=aはそのままの前後関係。値のaが先に来るわけではないんだ。

公式の説明では、キーのUTF-16コード単位の値で並べる。UTF-16は文字列を表すための符号化方式の一つ。ここでは、利用者の言語に合った辞書順や数値としての大小を指定するものではない、と区別しておこう。

表示順に日本語の読み順などが必要なら、この機能だけで目的を満たすと決めず、必要な比較ルールを別に設計しよう。

同じキーの順序は保たれる

このsortは安定したソートを使う。同じキー同士について、元の相対的な順番が保たれるという意味だよ。複数の値を一つに減らす処理でもない。

console.log(params.getAll('a'));
// ['z', 'a']

aという項目の値は二つ残り、順番もz、a。この性質は複数選択など同じ名前の値を持つクエリで確認したいところ。ただし、受け取るサーバーが同名項目の順序をどう使うかは、そのアプリケーションのルールになる。

「キーを並べて見やすくする」ことと、「すべてのサービスにとって同じ意味のURLへ変換する」ことは同じではないよ。

元を変えたくなければ、先にコピーする

sortは呼び出したオブジェクト自身の組の順序を変え、返り値はundefined。並べ替え済みの新しいURLSearchParamsが戻るわけではない。

const source = new URLSearchParams('b=2&a=1');
const copy = new URLSearchParams(source);
const returned = copy.sort();

console.log(source.toString()); // b=2&a=1
console.log(copy.toString());   // a=1&b=2
console.log(returned);          // undefined

const sorted = source.sort()だけでは、sortedはundefinedになる。元を残したい処理なら、コピーする場所と変更する場所を分けよう。ページ内の作例もこの方式で、コピー元の組と並べたコピーを別々に表示している。

動かしてみよう

1. 最初の入力のまま「コピーをsortする」を押す。
2. 結果がa=z&a=a&b=2&c=3になり、aの値はz、aの順であることを見る。
3. 「大文字・小文字の例」を押す。大文字Aが先に来ることを確かめる。
4. 入力を変えてもよい。名前やトークンではなく、a=1のような架空の条件で試そう。
5. 「最初から試す」で入力と未実行表示を戻す。

sortの返り値と、「コピー元は変わらない」の表示も一緒に見ると、値の取得とオブジェクトの変更を分けて追えるね。

元のURL文字列を完全に保つ機能ではない

URLSearchParamsで文字列化すると、空白は+など所定の表現になる。a=hello%20worldを読み込み、並べ替えて文字列化すれば、同じ空白を含む値でもa=hello+worldという表記になり得るよ。

const q = new URLSearchParams('b=2&a=hello%20world');
q.sort();
console.log(q.toString()); // a=hello+world&b=2

また、url.searchParams.sort()のようにURLオブジェクトへ結び付いたものを操作すれば、そのURLのクエリにも変更が反映される。署名付きURLや、順序・元の符号化表記が意味を持つ処理を、見た目をそろえる目的だけで並べ替えないでね。

個数の変化はappendとsetの違い、値の符号化はencodeURIとencodeURIComponentで続けて確認できる。

2026年11月1日にMDNを確認し、同名キーの安定した順序、大文字・小文字、空白の文字列化、コピー元と返り値、リセットをChromiumの幅240・319・1280pxで検証した。