Javascript URLEncode

escape , encodeURI , encodeURIComponent 的差異

在使用Javascript的URL encode時，常不清楚該使用哪一種方式， 今將escape、encodeURI、encodeURIComponent三種方法得差異整理如下：

參考幾篇不錯的文章：

清楚解釋各encode對中文的編碼方式：用Javascript替中文轉碼：escape, encodeURI, encodeURIComponent 的比較

並依得到的資訊，實際測試字串“A Z a z 0 1 堃 - _ . ! ~ * ' ( ) ; , / ? : @ & = + $ #“等字元，在被不同JavaScript URLEncode方法Encode後的結果，整理如下表：

文字類型 英文 數字 中文 Unescaped characters Reserved characters Score
原始字串 <html><font color=red>A</fond></html>Zaz01堃-_.!~*' ();,/?:@&=+$#
escape後 AZaz01%u5803-_.%21%7E*%27%28%29%3B%2C/%3F%3A@%26%3D+%24%23
encodeURI後AZaz01%E5%A0%83-_.!~*'();,/?:@&=+$#
encodeURI Component後AZaz01%E5%A0%83-_.!~*'()%3B%2C%2F%3F%3A%40%26%3D%2B%24%23

ps. 上表紅色字體表示部分，是突顯各Encode方法，不會做Encode的字元!

由上方的資訊可以整理出一些結論：

  1. 英文字、數字、-、_、.、* 這些字不管是哪一種Javascript URLEncode方式，都是不會被encode的!
  2. 各Encode方法，都是Encode為Unicode，但escape是Encode為UTF-16、而encodeURI與encodeURIComponent則是UTF-8。
  3. 因為 Javascript 都是 Encode 為 Unicode ，因此如有特殊用途須使用Big5編碼，需自行想辦法處理，例如 URI 中的 MailTo: 用法，outlook2010以前的版本，都只支援讀取Big5編碼! 但outlook 2010 卻又只支援讀取 Unicode @@。
  4. 符號部分，UTF-8與UTF-16的結果相同，因此上表可看到，除了被排除不Encode的字元外，使用escape與encodeURIComponent做Encode後的結果是相同的!
  5. 中文字部分，因 UTF-16 與 UTF-8 的編碼結果不同(可參考上表差異)，所以如內容有中文，則必須慎選Encode的方式，不然就要有對應的處理方式!
  6. encodeURI 與 encodeURIComponent 的差異是，encodeURI 會排除對 URL 有特殊意義的字元不做編碼，因此會排除 Reserved characters 與 Score 類型的字元。
  7. encodeURI 與 encodeURIComponent 均會排除 Unescaped characters 類型的字元。

所以在使用時，我認為可由兩方面去思考，判斷應使用哪一種Encode：

  1. 您要Encode的內容，適合使用哪一種編碼方式?! UTF-8 還是 UTF-16 ?!
    (這點跟使用的環境支援哪一種Encode … 等會有相關。)
  2. 您要Encode的內容，是否包含了於 URI 有特殊意義的字元?!

大致上這三種 javascript 的 URLEncode 方式特性整理如上。 希望下次使用時，可以清楚分辨該使用哪一種囉~~~