はじめに

この記事では、encodeURI() と encodeURIComponent() の共通点と相違点について整理します。

URLエンコードとは

パーセントエンコーディング (英: percent-encoding) とは、URIにおいて使用できない文字を使う際に行われるエンコード（一種のエスケープ）の名称である。「%」を使用していることから、この名称で呼ばれている。一般にURLエンコードとも称される。

`encodeURI()` と `encodeURIComponent()` の共通点と相違点

エンコードする文字によって、結果が同じになる場合もあれば、異なる場合もあります。

予約文字

予約文字というURI において特別な意味を持つ文字（ex. ;,/?:@&=+$#）については、結果が異なります。

encodeURI()：エンコードされない
encodeURIComponent()：エンコードされる

index.ts

const reservedCharacters = ";,/?:@&=+$#";
console.log(encodeURI(reservedCharacters));
console.log(encodeURIComponent(reservedCharacters));

;,/?:@&=+$#
%3B%2C%2F%3F%3A%40%26%3D%2B%24%23

予約されていない記号

予約文字以外の記号は両方ともエンコードされません。

index.ts

const unescapedCharacters = "-_.!~*'()";
console.log(encodeURI(unescapedCharacters));
console.log(encodeURIComponent(unescapedCharacters));

-_.!~*'()
-_.!~*'()

アルファベットと数字

アルファベットと数字も両方ともエンコードされません。

index.ts

const alphanumericCharacters = "ABCabc123";
console.log(encodeURI(alphanumericCharacters));
console.log(encodeURIComponent(alphanumericCharacters));

ABCabc123
ABCabc123

アルファベット以外の文字、スペース

一方、仮名や漢字などのアルファベット以外の文字やスペースは両方ともエンコードされます。

index.ts

const nonAlphabeticCharactersAndSpace = "あ ア 亜 التثكيل ш";
console.log(encodeURI(nonAlphabeticCharactersAndSpace));
console.log(encodeURIComponent(nonAlphabeticCharactersAndSpace));

%E3%81%82%20%E3%82%A2%20%E4%BA%9C%20%D8%A7%D9%84%D8%AA%D8%AB%D9%83%D9%8A%D9%84%20%D1%88
%E3%81%82%20%E3%82%A2%20%E4%BA%9C%20%D8%A7%D9%84%D8%AA%D8%AB%D9%83%D9%8A%D9%84%20%D1%88

まとめ

encodeURI() と encodeURIComponent() は、予約文字のみエスケープの実施有無が異なり、それ以外の記号・文字のエスケープの有無は同じです。

参照