JavaScript URIエンコード(encodeURIComponent)

nas2017/04/04

JavaScriptのURIのエンコードとデコードのサンプルです。
encodeURIComponent関数とdecodeURIComponent関数を使用します。

目次

サンプル エンコードする(encodeURIComponent)
  元の文字列に戻す(decodeURIComponent)
  encodeURIComponent関数とencodeURI関数の違い
  escape関数

エンコードする(encodeURIComponent)

encodeURIComponent  ( 文字列 )
  • エンコードを行います。
  • 文字列を渡すと、URIエンコードされた文字列が返ります。
  • 次の文字は変換しません 。 
    A-Z  a-z  0-9 - _ . ! ~ * ' ( )
  • URLの末尾にパラメータ(クエリ文字列)を付ける時にエンコードします。
    クエリ文字列の例：testform.php?text1=a&text2=b
    パラメータ(クエリ文字列)とは、URLの末尾に?が付き、「名前=値」の形式です。値が複数ある場合は「&」でつなげます。送信する文字列に?や=や&があるとフォーマットが壊れることや全角の文字等は送れないためエンコードします。
  • 注意点としてスラッシュ(/)やコロン(:)は変換されます。
    例えばhttp://example.comを変換した場合、://の部分も変換されてしまいます。
  • 以下はMDNのencodeURIComponent()のリンクです。
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent

エンコードするサンプルです。

<script>

const str1 = 'あいAB12１２';
console.log(encodeURIComponent(str1));
// %E3%81%82%E3%81%84AB12%EF%BC%91%EF%BC%92

const str2 = 'a1-_.!~*\'()?:#$&=';
console.log(encodeURIComponent(str2)); 
// a1-_.!~*'()%3F%3A%23%24%26%3D

</script>

8行目のアルファベット、10進数字、- _ . ! ~ * ' ( ) は、変換されていません。

元の文字列に戻す(decodeURIComponent)

decodeURIComponent ( encodeURIComponentでエンコードされた文字列 )

元の文字列に戻すサンプルです。

<script>

const str1 = "%E3%81%82%E3%81%84AB12%EF%BC%91%EF%BC%92";
console.log(decodeURIComponent(str1)); // あいAB12１２

const str2 = "a1-_.!~*'()%3F%3A%23%24%26%3D";
console.log(decodeURIComponent(str2)); // a1-_.!~*'()?:#$&=

</script>

6行目のencodeURIComponent関数で変換されていない文字(a1-_.!~*'())は、そのまま出力されます。

encodeURIComponent関数とencodeURI関数の違い

encodeURI関数は、次の文字を変換しません 。 
赤字の部分がencodeURIComponent関数との違いです。

A-Z  a-z  0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #

スラッシュ(/)やコロン(:)は変換されないので
例えばhttp://example.comを変換した場合でも、://の部分は変換されません。

encodeURI関数のコードです。

<script>

const str1 = 'あいAB12１２';
console.log(encodeURI(str1));
// %E3%81%82%E3%81%84AB12%EF%BC%91%EF%BC%92

const str2 = 'a1-_.!~*\'()?:#$&=';
console.log(encodeURI(str2));
// a1-_.!~*'()?:#$&=

</script>

8行目は、変換されていません。

escape関数

escape関数も変換する関数ですが、現在は非推奨(Deprecated)になっています。

以下は、MDNのescape関数のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/escape

関連の記事

以下のページで試すことができます。
URLエンコードとURLデコードを行うWebツール

△上に戻る