検索文字の「+」が消える？URLSearchParamsの変換を比較する

今回の仕上がり：入力した値を読み戻す

検索URLを文字の足し算で作ると、入力した「+」や「&」がそのまま残らないことがあります。自作例では「C++ & tea」を3通りで検索パラメータにし、それぞれ読み戻した結果を並べました。元の値をURLSearchParamsのset()へ渡す方法なら、今回の入力を元どおりに取り出せます。

結果のrawは直接連結、setはset()を使う方法、preEncodedThenSetは先にencodeURIComponent()を使う方法です。readBackを入力欄と見比べてください。

文字を変えて確かめる

1. 下の実験を開きます。必要なのはJavaScriptが動くブラウザだけです。
2. 「変換する文字列」にC++ & teaを入れ、「3通りを比較する」を押します。Enterでも比較できます。
3. setのqueryがq=C%2B%2B+%26+tea、readBackがC++ & teaになることを確認します。queryの+は空白、%2Bは文字の+です。
4. a+b、日本語 & +、100%、空欄でも試します。入力値とsetのreadBackが一致すれば確認できています。

const params = new URLSearchParams();
params.set('q', value);
const query = params.toString();
const restored = new URLSearchParams(query).get('q');

先に変換しすぎない

set()に渡す前にencodeURIComponent()をかけると、%が%25へ変換されます。読み戻しても変換済みの文字列が残るのは、そのためです。実験では、5種類の値についてこの違いを確かめました。値を受け取るset()と、完成した検索文字列を解析するコンストラクタを分けて考えると追いやすくなります。

MDNのURLSearchParams解説でも、文字列の解析時の+と、値の追加時の扱いが説明されています。URL全体をそのまま渡す使い方や、サーバー側の解析は今回の実験に含めていません。

一つの文字列の変換を手で確かめたい場合は、URL encoder/decoderの実操作例も参考になります。ツールの%20とURLSearchParamsの+は、今回の空白の表し方が異なります。