はじめに
この記事では、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() は、予約文字のみエスケープの実施有無が異なり、それ以外の記号・文字のエスケープの有無は同じです。