プラス記号 (+) のURLエンコード

プラス記号 (+) を%2BにURLエンコードする方法を解説。+、スペース、%2Bの紛らわしい関係をURLエンコードの観点から理解しましょう。

Character

+

Encoded

%2B

詳細な説明

プラス記号(+)はURLにおいて大きな混乱を引き起こす二重の性質を持っています。application/x-www-form-urlencoded形式のクエリ文字列では、+はスペース文字を表します。しかし、リテラルのプラス記号がURLに必要な場合は、%2Bにエンコードする必要があります。

percent-encoding形式: %2Bはプラス記号を表します(ASCIIコード43、16進数で0x2B)。

混乱の説明: 2つの異なるエンコード標準が関わっています:

  1. RFC 3986(URI標準): スペースは%20にエンコードされます。プラス記号はほとんどのURLコンポーネントでエンコード不要の通常の文字です。
  2. 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+22%2B2になる
  • タイムゾーンオフセット:UTC+05:30のプラスはエンコードが必要
  • Google検索:"C++"を検索してURLでの表示を確認してみてください

落とし穴: ユーザーがフォームに"C++"を含めて送信し、サーバーが値"C "(スペース2つ)を受け取った場合、プラス記号が%2Bにエンコードされなかったためスペースとしてデコードされています。これはURLSearchParamsencodeURIComponent()を使わず手動でURLを構築する場合に特に多く発生します。

ユースケース

APIパラメータで国番号付き電話番号をエンコードする場合(例:+1-555-0100)や、検索クエリでC++のようなプログラミング言語名を扱う場合。

Try It — URL Encoder

フルツールを開く