關於我

我的相片
用心思考、保持熱情,把工作上的經驗作分享與紀錄。希望能夠跟大家一起不斷的成長~

Javascript URLEncode - escape , encodeURI , encodeURIComponent 的差異

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

參考幾篇不錯的文章:

  1. 清楚解釋各encode對中文的編碼方式:用Javascript替中文轉碼:escape, encodeURI, encodeURIComponent 的比較
  2. https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Functions/encodeURI
  3. https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent
  4. http://blog.miniasp.com/?tag=/encodeuri
  5. http://diary.tw/march/category/Javascript

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

文字類型 英文 數字 中文 Unescaped characters Reserved characters Score
原始字串 A Z a z 0 1 - _ . ! ~ * ' ( ) ; , / ? : @ & = + $ #
escape後 A Z a z 0 1 %u5803 - _ . %21 %7E * %27 %28 %29 %3B %2C / %3F %3A @ %26 %3D + %24 %23
encodeURI後 A Z a z 0 1 %E5%A0%83 - _ . ! ~ * ' ( ) ; , / ? : @ & = + $ #
encodeURI
Component後
A Z a z 0 1 %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 方式特性整理如上。 希望下次使用時,可以清楚分辨該使用哪一種囉~~~

沒有留言:

張貼留言