パーセント記号 (%) のURLエンコード

パーセント記号 (%) を%25にURLエンコードする方法を解説。%がURLのエスケープ文字である理由と、二重エンコードバグの回避方法を理解しましょう。

Character

%

Encoded

%25

詳細な説明

パーセント記号(%)はURLエンコードにおけるエスケープ文字そのものです。すべてのpercent-encodingシーケンスは%の後に2桁の16進数が続きます(例:%20%3F)。URL内にリテラルのパーセント記号を含める必要がある場合は、エンコードシーケンスの開始と区別するために%25にエンコードしなければなりません。

percent-encoding形式: %25はパーセント記号を表します(ASCIIコード37、16進数で0x25)。これはエンコード文字自体のエンコードであり、すべてのURLエンコード文字の中でユニークな存在です。

特別な理由: %はエンコードされたトリプレットの開始を示すため、URL内のエンコードされていない%は曖昧さを生みます。URLに100%doneが含まれる場合、パーサーは%doをエンコードされた文字として解釈しようとして失敗し(doは有効な16進数ではないため)、実装に応じてエラーを投げるか文字化けした出力を生成します。

JavaScriptでの動作:

encodeURIComponent("100%")    // "100%25"
encodeURIComponent("50% off") // "50%25%20off"
decodeURIComponent("100%25")  // "100%"

// よくあるエラー:裸の%を含む文字列のデコード
decodeURIComponent("100%done") // URIError: URI malformed をスロー

二重エンコードとの関連: パーセント記号は二重エンコード問題と直接的に関係しています。すでにエンコードされた文字列を再度エンコードすると、エンコード済み文字列中の%%25に再エンコードされます。例えば、hello%20worldhello%2520worldになります。一度デコードするとhello worldではなくhello%20worldが得られます。これが典型的な二重エンコードバグです。

よくあるシナリオ:

  • URLに割引パーセンテージを表示する場合(例:50% off
  • すでにエンコードされたURLをパラメータ値として渡す場合(%20%を再エンコードする必要がある)
  • %を含む数学的・統計的な式
  • %を含むファイル名(まれだが存在する)

落とし穴: decodeURIComponent()関数は、有効な2桁の16進数が続かない裸の%に遭遇するとURIErrorをスローします。特にユーザー入力や外部データを処理する場合は、常にデコード呼び出しをtry-catchブロックで囲みましょう。

ユースケース

ECサイトのURLでの割引やパーセンテージ値の処理。例えば、商品検索クエリやプロモーションリンクパラメータで「50% off」をエンコードする場合。

Try It — URL Encoder

フルツールを開く