JS--グローバル関数のencodeURI /encodeURIComponent

encodeURI/encodeURIComponent関数

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【encodeURI関数の使い方】
グローバル関数のひとつである encodeURI 関数は、引数に指定した文字列の中に含まれる特別な文字をエンコードします。

・書式

encodeURI(strURI)

引数には対象となる文字列を指定してください。文字列の中の特別な文字がエンコードされた新しい文字列が戻り値として返される。

・サンプルコード

let uri = 'https://www.example.com/ブログ/park.html'
console.log(encodeURI(uri));実行> https://www.example.com/%E3%83%96%E3%83%AD%E3%82%B0/park.html

let uri = 'https://www.example.com/公園.html?place=sea&park'
console.log(encodeURI(uri));実行
> https://www.example.com/%E5%85%AC%E5%9C%92.html?place=sea&park

 上記の URI の様にパラメータの中で値として & が含まれているような場合 encodeURI 関数ではエンコードされない為、こういった利用できません。この場合はパラメータの値だけをエンコードする encodeURIComponent 関数を使用してください。

【decodeURI関数の使い方】
encodeURI 関数によってエンコードされたものをデコードするにはグローバル関数のひとつである decodeURI 関数を使用します。
・書式

decodeURI(strEncodedURI)

引数には対象となるエンコードされた文字列を指定してください。 encodeURI 関数でエンコードされた文字をデコードした新しい文字列が戻り値として返されます。

・サンプル

let encodedURI = 'https://www.example.com/%E3%83%96%E3%83%AD%E3%82%B0/park.html'
console.log(decodeURI(encodedURI));実行
> https://www.example.com/ブログ/park.html

エンコードされた URI をデコードして元に戻すことができました。

【encodeURIComponent関数の使い方】
グローバル関数のひとつである encodeURIComponent 関数は、引数に指定した文字列の中に含まれる特別な文字をエンコードします。
・書式

encodeURIComponent(str)

引数には対象となる文字列を入れると、文字列の中の特別な文字がエンコードされた新しい文字列が戻り値となって返される。

encodeURIComponent 関数では、
次の文字以外の文字がすべてエンコードされます。(英数字というのは A～Ｚ、a～z、0～9 までの文字のことです)。例えば日本語の文字などはすべてエンコードされます。

英数字 - _ . ! ~ * ' ( )

encodeURIComponent 関数では、 encodeURI 関数ではエンコードされなかった次の文字もエンコードの対象となる。

# ; , / ? : @ & = + $  

encodeURIComponent 関数は、
引数の文字列に URI の中に含まれるパラメータ部分などだけを指定する場合に使用される関数です。その為 & などの文字もエンコードされる為、引数に URI 全体の文字列を指定してしまうと / も含めてエンコードされてしまう門題点も、ある。

・サンプル

let uri = 'https://www.example.com/公園.html?';
let para = ' place=sea&park'
console.log(encodeURIComponent(para));
>> place%3Dsea%26park

encodeURIComponent 関数は & も含めてエンコードを行うのでパラメータの中の値に & などが含まれていればエンコードした値を返してくれます。

もう一つサンプルをみてください。

let uri = 'https://www.example.com/ブログ/park.html'
console.log(encodeURIComponent(uri));
>> https%3A%2F%2Fwww.example.com%2F%E3%83%96%E3%83%AD%E3%82%B0%2Fpark.html

URI を表す文字列全体を引数に指定してしまうと、コロン(:)やスラッシュ(/)等も含めてエンコードしてしまう

【encodeURIComponent 関数の使い方】
encodeURIComponent 関数によってエンコードされたものをデコードするには、 decodeURIComponent 関数を使用します。

・書式

decodeURIComponent(strEncoded)

引数には対象となるエンコードされた文字列を指定してください。 encodeURIComponent 関数でエンコードされた文字をデコードした新しい文字列が戻り値として返されます。

サンプル

let strEncode = 'place%3Dsea%26park'
console.log(decodeURIComponent(strEncode));
>> place=sea&park