Code Tips‎ > ‎

escape()とencodeURI()とencodeURIComponent()の違い

  • escape()
  • encodeURI()
  • encodeURIComponent()
それぞれの違いについてまとめました。


escape

escapeは古くからある関数ですが、非推奨になりました。これはescapeの仕様が明確に定められていなかったため、ブラウザやバージョンにより異なる実装がなされた為です。例えばIE3.0以前やNetscapeなどでは、HTMLソースの文字コードにしたがってエンコードしていました。IE4.0以降やFireFox・Chromeなどではマルチバイト文字をUnicodeベースでエンコードします。encodeURIやencodeURIComponentがある現在では、あえて使用する意味はないと思います。

例
「http://www.google.co.jp/search?hl=ja&q=escape」→「http%3A//www.google.co.jp/search%3Fhl%3Dja%26q%3Descape」
「適当な日本語」→「%u9069%u5F53%u306A%u65E5%u672C%u8A9E」
「(3+5)/2=4」→「%283+5%29/2%3D4」

下記のサイトでは、いろいろなブラウザの実行結果を掲載しています。



escapeに対し、encodeURIとencodeURIComponentは比較的新しい関数です。「ECMAScript 3rd edition」で導入され、IEでは5.5から採用されました。

encodeURI

encodeURIは、UTF-8ベースでエンコードします。URI において特別な意味を持つ予約文字「/」「:」「&」「+」「=」などはエンコードしません。よって不完全なエンコードになります。encodeURIを使用する場合には、対象のURI文字列内のパラメータの値に予約文字が存在しないことが前提になります。

例
「http://www.google.co.jp/search?hl=ja&q=escape」→「http://www.google.co.jp/search?hl=ja&q=escape」
「適当な日本語」→「%E9%81%A9%E5%BD%93%E3%81%AA%E6%97%A5%E6%9C%AC%E8%AA%9E」
「(3+5)/2=4」→「(3+5)/2=4」


encodeURIComponent

encodeURIComponentは、URIComponent(URIを構成する部分文字列)をUTF-8ベースでエンコードします。URIで使用する記号をすべてエンコードするため、完全なエンコードになります。「/」「:」「&」「+」「=」などもエンコードする為、URI全体に適用するとそれ自体はURIとして機能しなくなります。

例
「http://www.google.co.jp/search?hl=ja&q=escape」→「http%3A%2F%2Fwww.google.co.jp%2Fsearch%3Fhl%3Dja%26q%3Descape」
「適当な日本語」→「%E9%81%A9%E5%BD%93%E3%81%AA%E6%97%A5%E6%9C%AC%E8%AA%9E」
「(3+5)/2=4」→「(3%2B5)%2F2%3D4」


まとめ

◎escape
  • 古くからある関数
  • 仕様が明確に定められていなかったため、ブラウザ・バージョン・HTMLの文字コードによって挙動が変わる
  • 非推奨になっている

◎encodeURI
  • UTF-8ベースでエンコードを行う
  • URI全体に適用するための関数
  • URIの予約文字をエンコードしないため、URLのパスもしくはパラメータ部分に「; , / ? : @ & = + $ #」を含む場合は、不完全なエンコードとなる
  • 「A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #」以外の文字をエンコードする
  • 「; , / ? : @ & = + $ #」はエンコード対象外

◎encodeURIComponent
  • UTF-8ベースでエンコードを行う
  • URIを構成する部分文字列に適用するための関数
  • URI全体にかけると無効なURIになる
  • 「A-Z a-z 0-9 - _ . ! ~ * ' ( )」以外の文字を対象とする
  • 「; , / ? : @ & = + $ #」はエンコード対象

「エンコードが必要な部分ごとにencodeURIComponentをかけた上で結合しURIを完成させる」というのがあるべき姿です。
ただし、URLのパスもしくはパラメータ部分に「; , / ? : @ & = + $ #」を含まないことが確定している場合には、encodeURIでも問題ありません。


参考


2011/11/03