Code Tips‎ > ‎

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

  • escape()
  • encodeURI()
  • encodeURIComponent()
それぞれの違いについてあいまいな知識しかもっていなかったので、調べてまとめました。


escape

escapeは古くからある関数ですが、推奨されなくなりました。これはescapeの仕様が不明確であった為、ブラウザやバージョンにより異なる実装がなされた為です。例えばIE3.0以前やNetscapeなどでは、HTMLソースの文字コードにしたがってエンコードしていました。IE4.0以降やFireFox・Chromeなどではマルチバイト文字をUnicodeベースでエンコードします(Ascii文字は別)。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を構成する部分文字列)をエンコードします。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
URI全体に適用するための関数。URIの予約文字をエンコードしないため、不完全なエンコードとなる。

◎encodeURIComponent
URIを構成する部分文字列に適用するための関数。本来のエンコード目的であればこれを使うべき。URI全体にかけてしまうと無効なURIになる。

「エンコードが必要な部分ごとにencodeURIComponentをかけた上で結合しURIを完成させる」というのがあるべき姿だと思います。


参考