用Javascript替中文網址轉碼:escape, encodeURI, encodeURIComponent 的比較

如果你要找線上轉碼的工具請至
Online UrlEncoder:線上轉換中文網址為UTF-8編碼

在程式或者網頁的應用中我們常常需要把中文轉換為其他編碼
例如在 Google Chart API:繪製中文圓餅圖(Pie Chart)
就需要把中文網址轉換為 UTF-8 的編碼
用Java替中文轉碼:URLEncoder 中已經介紹了使用Java來轉碼的方法
這一篇要介紹的則是Javascript中的三種轉碼工具以及這三者間的比較

首先先看到節錄自用javascript轉UTF-8編碼的編碼解碼介紹
其中紅色的部分是我自己更改的地方,與網頁內容不同

escape(String args),unescape(String args)
會處理#字元為%23,空白字元轉換為+,中文字處理為UniCode

encodeURI(String args),decodeURI(String args)
不會處理#字元,空白字元轉換為%20,中文字處理為UTF-8

encodeURIComponent(String args),decodeURIComponent(String args)
會處理#字元為%23,空白字元轉換為%20,中文字處理為UTF-8

而更詳細的區別則在對比 javascript url編碼可以看見
javascript 常用的編碼格式有:
escape(), encodeURL(), encodeURIComponent() 區別如下:

escape() 方法:
採用ISO Latin字符集對指定的字符串進行編碼。所有的空格符、標點符號、特殊字符以及其他非ASCII字符都將被轉化成%xx格式的字符編碼(xx等於該字符在字符集表裡面的編碼的16進制數字)。比如,空格符對應的編碼是%20。
不會被此方法編碼的字符: @ * / +

encodeURI() 方法:
把URI字符串採用UTF-8編碼格式轉化成escape格式的字符串。
不會被此方法編碼的字符:! @ # $& * ( ) = : / ; ? + '

encodeURIComponent() 方法:
把URI字符串採用UTF-8編碼格式轉化成 escape格式的字符串。與encodeURI()相比,這個方法將對更多的字符進行編碼,比如 / 等字符。所以如果字符串裡面包含了URI的幾個部分的話,不能用這個方法來進行編碼,否則 / 字符被編碼之後URL將顯示錯誤。
不會被此方法編碼的字符:! * ( ) '

因此,對於中文字符串來說,如果不希望把字符串編碼格式轉化成UTF-8格式的(比如原頁面和目標頁面的charset是一致的時候),只需要使用escape。如果你的頁面是GB2312或者其他的編碼,而接受參數的頁面是UTF-8編碼的,就要採用encodeURI或者encodeURIComponent。
另外,encodeURI/encodeURIComponent是在javascript1.5之後引進的,escape則在javascript1.0版本就有。

藉由以上的比較後得知如果需要用javascript處理utf-8的中文的話
那麼使用encodeURIComponent絕對是最佳的選擇
若是對英文不害怕的話可以再看看這篇文章
Handling UTF-8 in JavaScript, PHP, and Non-UTF8 Databases
應該會對UTF-8的使用更為了解

這篇javascript轉碼的應用也可以使用在
Google Chart API:繪製中文圓餅圖(Pie Chart)
趕快寫個簡單的測試網頁看看結果吧

關鍵字:javascript, UTF-8, escape, encodeURI, encodeURIComponent, url, encode, decode, 比較, 中文, 中文網址, 轉碼, 編碼
參考資料:
1. 用javascript轉UTF-8編碼
2. 對比 javascript url編碼
3. Handling UTF-8 in JavaScript, PHP, and Non-UTF8 Databases

這個網誌中的熱門文章

【博客來折價券】博客來免費序號e-coupon分享(持續更新)

【博客來折價券】25/50/100/150現領現折+天天簽到換200+OP兩倍換!

【銀行代碼查詢】3碼銀行代碼列表、7碼分行代碼查詢

【新光卡攻略】台灣Pay單筆888送50+寰宇3%,LINE會員繳費10%!

【Hami Video】免費Hami Video體驗/試用序號分享(隨時更新)!

Gmail 無限分身術:產生無限 email 帳號