プラス記号 (+) のURLエンコード
プラス記号 (+) を%2BにURLエンコードする方法を解説。+、スペース、%2Bの紛らわしい関係をURLエンコードの観点から理解しましょう。
Character
+
Encoded
%2B
詳細な説明
プラス記号(+)はURLにおいて大きな混乱を引き起こす二重の性質を持っています。application/x-www-form-urlencoded形式のクエリ文字列では、+はスペース文字を表します。しかし、リテラルのプラス記号がURLに必要な場合は、%2Bにエンコードする必要があります。
percent-encoding形式: %2Bはプラス記号を表します(ASCIIコード43、16進数で0x2B)。
混乱の説明: 2つの異なるエンコード標準が関わっています:
- RFC 3986(URI標準): スペースは
%20にエンコードされます。プラス記号はほとんどのURLコンポーネントでエンコード不要の通常の文字です。 - HTMLフォームエンコード(
application/x-www-form-urlencoded): スペースは+にエンコードされます。そのため、リテラルの+はスペースとしてデコードされないよう%2Bにエンコードする必要があります。
Web上のほとんどのクエリ文字列はフォームエンコードの慣例を使用するため、クエリ文字列内の+はほぼ常にスペースとして解釈されます。
JavaScriptでの動作:
encodeURIComponent("+") // "%2B"
encodeURIComponent("1+1=2") // "1%2B1%3D2"
// URLSearchParams はフォームエンコードを使用し、スペースを+としてエンコード
new URLSearchParams({q: "a b"}).toString() // "q=a+b"
new URLSearchParams({q: "a+b"}).toString() // "q=a%2Bb"
// + をスペースとしてデコード(フォームエンコードの動作)
new URLSearchParams("q=a+b").get("q") // "a b"
よくあるシナリオ:
- 国番号付き電話番号:
+1-555-0100は%2B1-555-0100にエンコードが必要 - 数学の式:クエリ内の
2+2は2%2B2になる - タイムゾーンオフセット:
UTC+05:30のプラスはエンコードが必要 - Google検索:"C++"を検索してURLでの表示を確認してみてください
落とし穴: ユーザーがフォームに"C++"を含めて送信し、サーバーが値"C "(スペース2つ)を受け取った場合、プラス記号が%2Bにエンコードされなかったためスペースとしてデコードされています。これはURLSearchParamsやencodeURIComponent()を使わず手動でURLを構築する場合に特に多く発生します。
ユースケース
APIパラメータで国番号付き電話番号をエンコードする場合(例:+1-555-0100)や、検索クエリでC++のようなプログラミング言語名を扱う場合。