パーセント記号 (%) の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%20worldはhello%2520worldになります。一度デコードするとhello worldではなくhello%20worldが得られます。これが典型的な二重エンコードバグです。
よくあるシナリオ:
- URLに割引パーセンテージを表示する場合(例:
50% off) - すでにエンコードされたURLをパラメータ値として渡す場合(
%20の%を再エンコードする必要がある) %を含む数学的・統計的な式%を含むファイル名(まれだが存在する)
落とし穴: decodeURIComponent()関数は、有効な2桁の16進数が続かない裸の%に遭遇するとURIErrorをスローします。特にユーザー入力や外部データを処理する場合は、常にデコード呼び出しをtry-catchブロックで囲みましょう。
ユースケース
ECサイトのURLでの割引やパーセンテージ値の処理。例えば、商品検索クエリやプロモーションリンクパラメータで「50% off」をエンコードする場合。