JavaScript での URL エンコード

URL エンコードは、URL 内の 8 ビット文字を%とそれに続く 16 進文字でエンコードするプロセスです。文字をパーセント記号に置き換えるため、パーセントエンコードとも呼ばれます。URL エンコードは、JavaScript を含むほとんどすべてのプログラミング言語を使用して実行できます。

URL をエンコードする理由は、URL に ASCII テーブルの特定の文字のみを含めることができるためです。URL を正しく機能させるには、URL 内に存在する他のすべての文字をエンコードする必要があります。URL でエンコードする必要のある文字は、':'、'/'、'?'、'#'、'['、']'、'@'、'!'、'$'、'&'、"'"、'('、')'、'*'、'+'、','、';'、'=' と '%'です。これらの文字とそのエンコード形式の詳細については、このリンクにアクセスしてください。

URI と URL の違いは何ですか

先に進む前に、まず URI と URL について理解しましょう。

Uniform Resource Identifier（URI）は、インターネットを介してリソースを識別するために使用されます。対照的に、Uniform Resource Locator（URL）は、そのリソースを見つけて到達するのに役立つものです。

URI はロケーターと同様に識別子にすることもできますが、URL はロケーターにすることしかできません。URL は URI の下にあります。したがって、どちらも少し似ているように聞こえますが、微妙な違いがあります。

たとえば、facebook.com は Facebook のウェブページがどこにあるかを取得するため URL ですが、近くのコーヒーショップは（リソースである）コーヒーショップがどこにあるかを知っているため URI になり、そこに行く方法（パス）も知っているので、URI になる。

JavaScript で encodeURI() メソッドを使用して URL をエンコードする

encodeURI() メソッドは、JavaScript で URL をエンコードするために使用できるメソッドの 1つです。この方法は、完全な URL がある場合に使用できます。

URL が https://en.wikipedia.org/[$q=english &language] であるとしましょう。次に、encodeURI() メソッドを使用してこの URL をエンコードし、このメソッドが提供する出力を確認しましょう。

const URL = 'https://en.wikipedia.org/[$q=english &language]';
console.log(encodeURI(URL));

出力：

https://en.wikipedia.org/%5Bq=english%20&language%5D

このメソッドでは、空白や角かっこなど、URL 内の文字のごく一部しかエンコードされていないことに注意してください。

このメソッドは、次の特殊文字をエンコードしません。

encodeURI() ` will not encode: ` ~!@#$ & * () =: /,;?+'

他の特殊文字のいくつかをエンコードする場合は、encodeURIComponent() メソッドを使用できます。

JavaScript で encodeURIComponent() メソッドを使用して URL をエンコードする

encodeURIComponent() メソッドを使用して URL をエンコードすることもできます。この方法は、URL の一部しかない場合に使用できます。すでに見てきたように、encodeURI() メソッドはごく少数の文字をエンコードしますが、他の文字もエンコードする場合は、encodeURIComponent() メソッドを使用できます。

以前に取得したのと同じ URL を使用して、このメソッドを使用して文字列をエンコードしたときにどのような出力が得られるかを見てみましょう。

const URL = 'https://en.wikipedia.org/[$q=english &language]';
console.log(encodeURIComponent(URL));

出力：

https%3A%2F%2Fen.wikipedia.org%2F%5B%24q%3Denglish%20%26language%5D

ご覧のとおり、このメソッドはほとんどの URL をエンコードしています。

このメソッドは、次の特殊文字をエンコードしません。

encodeURIComponent() ` will not encode: ` ~! * ()'

要件と使用法に応じて、上記の 2つの方法のいずれかまたは両方を使用して、JavaScript で URL をエンコードできます。