encodeURIComponent は何をするのでしょうか?例を挙げて簡単に説明

JavaScript で URL を構築したことがある場合は、おそらく encodeURIComponent と、その紛らわしいほどよく似た兄弟である encodeURI に遭遇したことがあるでしょう。間違ったものを使用すると、微妙な方法でリンクが壊れてしまう典型的なバグです。ここでは、encodeURIComponent の機能を例とともに明確に説明し、2 つのどちらかを選択するための簡単なルールを示します。

何をするのか

encodeURIComponent は文字列を受け取り、URL 内の安全でない文字をパーセント エンコードされた同等の文字に置き換えます。スペースは %20、アンパサンドは %26、等号は %3D、疑問符は %3F などになります。その目的は、特殊文字が URL 構造として誤って読み取られることなく、値、検索語、パラメータ、リダイレクト ターゲットとして URL に安全にドロップできるテキストを作成することです。問題を引き起こす可能性のあるすべてのものをエンコードします。これはまさに単一の値に必要なものです。

具体例

「猫と犬」というクエリの検索 URL を作成するとします。これを単に連結すると、...?q=cats & Dogs が得られますが、これは壊れ、アンパサンドはパラメータ区切り文字として読み取られ、スペースは不正です。最初に encodeURIComponent を通じて値を実行すると、「cats & Dogs」は cats%20%26%20dogs になり、...?q=cats%20%26%20dogs が得られます。サーバーはこれを単一の値「cats & Dogs」として正しく読み取ります。エンコーディングでは、構造的な文字をエスケープすることでデータの意味が保持されます。

encodeURIComponent と encodeURI

違いは、それぞれが何を残すかです。 encodeURIComponent は、/? のような URL 構造文字を含む、予約されているものすべてをエンコードします。 & = #。これは、URL 内に入る値をエンコードしていると想定しているためです。 encodeURI は、構築済みの URL 全体をエンコードし、その機能を維持したいと想定しているため、意図的にこれらの構造文字をエンコードしません。したがって、encodeURI('https://x.com?a=b c') は、://、?、および = をそのまま保持し、スペースのみを修正しますが、encodeURIComponent はそれらをすべてエスケープします。部分にはコンポーネントを使用し、URL 全体には encodeURI を使用します。

簡単なルール

トラブルを回避するためのルールは次のとおりです。URL、検索語、パラメータ値、パス セグメント、リダイレクト ターゲット内に含まれる値をエンコードする場合は、encodeURIComponent を使用します。動作する URL を維持したい URL 全体をエンコードする場合は、encodeURI を使用します。確信が持てない場合は、ほとんどの場合、URL 全体ではなく値をエンコードするため、encodeURIComponent が必要になります。これを正しく行うことで、最も一般的な URL 構築のバグを防ぐことができます。

二重エンコードに注意

1 つの罠: すでにエンコードされている文字列に対して encodeURIComponent を実行しないでください。値を 2 回エンコードすると、パーセント記号自体がエンコードされ、%20 は %2520 になり、リンクが切れます。エンコードされていない生のテキストのみをエンコードします。文字列がすでにエンコードされているかどうかが不明な場合は、まず文字列をデコードしてから、一度だけエンコードしてください。この二重エンコードの間違いが、壊れた URL で時々見られる謎の %2520 の原因です。