引子
瀏覽器URl地址，上網必定會用到，可是瀏覽器地址有中文或者瀏覽器url參數操做的時候，常常會用到encodeURIComponent()和decodeURIComponent()以及encodeURI()等等。關於瀏覽器參數操做，請看文章http://www.haorooms.com/post/js_url_canshu ，今天主要講講escape(),encodeURI(),encodeURIComponent()這幾個函數的用法和區別。javascript
爲啥會有瀏覽器編碼這一說法
通常來講，URL只能使用英文字母、阿拉伯數字和某些標點符號，不能使用其餘文字和符號。好比，世界上有英文字母的網址 「h ttp://www.haorooms.com」， 可是沒有希臘字母的網址「h ttp://www.aβγ.com」 （讀做阿爾法-貝塔-伽瑪.com）。這是由於網絡標準RFC 1738作了硬性規定：html
原文："...Only alphanumerics [0-9a-zA-Z], the special characters "$-_.+!*'()," [not including the quotes - ed], and reserved characters used for their reserved purposes may be used unencoded within a URL."
翻譯：「只有字母和數字[0-9a-zA-Z]、一些特殊符號「$-_.+!*'(),」[不包括雙引號]、以及某些保留字，才能夠不通過編碼直接用於URL。」java
這意味着，若是URL中有漢字，就必須編碼後使用。可是麻煩的是，RFC 1738沒有規定具體的編碼方法，而是交給應用程序（瀏覽器）本身決定。這致使「URL編碼」成爲了一個混亂的領域。瀏覽器
下面咱們經過介紹escape(),encodeURI(),encodeURIComponent()來講說Javascript瀏覽器編碼方法。服務器
出現瀏覽器編碼的幾種狀況
一、網址路徑中包含漢字網絡
以下圖：函數
h ttp://www.haorooms.com/您好， 在瀏覽器中顯示的是 h ttp://www.haorooms.com/%E6%82%A8%E5%A5%BD 自動對「你好」進行了編碼。要是咱們瀏覽器地址中有中文的時候，就要用到url編碼了。post
二、查詢字符串包含漢字ui
http://www.haorooms.com/search?keywords=您好
這樣包含查詢的的條件的時候，漢字也會被編碼。編碼
三、Get方法生成的URL包含漢字
前面說的是直接輸入網址的狀況，可是更常見的狀況是，在已打開的網頁上，直接用Get或Post方法發出HTTP請求。
根據臺灣中興大學呂瑞麟老師的試驗，這時的編碼方法由網頁的編碼決定，也就是由HTML源碼中字符集的設定決定。
<meta http-equiv="Content-Type" content="text/html;charset=xxxx">
若是上面這一行最後的charset是UTF-8，則URL就以UTF-8編碼；若是是GB2312，URL就以GB2312編碼。
舉例來講，百度是GB2312編碼，Google是UTF-8編碼。所以，從它們的搜索框中搜索同一個詞「春節」，生成的查詢字符串是不同的。
百度生成的是%B4%BA%BD%DA，這是GB2312編碼。Google生成的是%E6%98%A5%E8%8A%82，這是UTF-8編碼。因此，結論3就是，GET和POST方法的編碼，用的是網頁的編碼。
四、Ajax調用的URL包含漢字
前面三種狀況都是由瀏覽器發出HTTP請求，最後一種狀況則是由Javascript生成HTTP請求，也就是Ajax調用。仍是根據呂瑞麟老師的文章，在這種狀況下，IE和Firefox的處理方式徹底不同。
舉例來講，有這樣兩行代碼：
url = url + "?q=" +document.myform.elements[0].value; // 假定用戶在表單中提交的值是「春節」這兩個字 http_request.open('GET', url, true);
那麼，不管網頁使用什麼字符集，IE傳送給服務器的老是「q=%B4%BA%BD%DA」，而Firefox傳送給服務器的老是「q=%E6%98%A5%E8%8A%82」。也就是說，在Ajax調用中，IE老是採用GB2312編碼（操做系統的默認編碼），而Firefox老是採用utf-8編碼。
瀏覽器編碼的函數簡介escape(),encodeURI(),encodeURIComponent()
一、escape()
escape()是js編碼函數中最古老的一個。雖然這個函數如今已經不提倡使用了，可是因爲歷史緣由，不少地方還在使用它，因此有必要先從它講起。
實際上，escape()不能直接用於URL編碼，它的真正做用是返回一個字符的Unicode編碼值。好比「春節」的返回結果是%u6625%u8282，也就是說在Unicode字符集中，「春」是第6625個（十六進制）字符，「節」是第8282個（十六進制）字符。
例如：
javascript:escape("春節"); //輸出 "%u6625%u8282" javascript:escape("hello word"); //輸出 "hello%20word"
還有兩個地方須要注意。
首先，不管網頁的原始編碼是什麼，一旦被Javascript編碼，就都變爲unicode字符。也就是說，Javascipt函數的輸入和輸出，默認都是Unicode字符。這一點對下面兩個函數也適用。
javascript:escape("\u6625\u8282"); //輸出 "%u6625%u8282" javascript:unescape("%u6625%u8282"); //輸出 "春節" javascript:unescape("\u6625\u8282"); //輸出 "春節"
其次，escape()不對「+」編碼。可是咱們知道，網頁在提交表單的時候，若是有空格，則會被轉化爲+字符。服務器處理數據的時候，會把+號處理成空格。因此，使用的時候要當心。
二、encodeURI()
它着眼於對整個URL進行編碼，所以除了常見的符號之外，對其餘一些在網址中有特殊含義的符號「; / ? : @ & = + $ , #」，也不進行編碼。編碼後，它輸出符號的utf-8形式，而且在每一個字節前加上%。
它對應的解碼函數是decodeURI()。
須要注意的是，它不對單引號'編碼。
三、encodeURIComponent()
最後一個Javascript編碼函數是encodeURIComponent()。與encodeURI()的區別是，它用於對URL的組成部分進行個別編碼，而不用於對整個URL進行編碼。
所以，「; / ? : @ & = + $ , #」，這些在encodeURI()中不被編碼的符號，在encodeURIComponent()中通通會被編碼。至於具體的編碼方法，二者是同樣。
它對應的解碼函數是decodeURIComponent()。
encodeURIComponent()相比encodeURI()要更加完全。
例如：
<html> <body> <script type="text/javascript"> var test1="http://www.haorooms.com/My first/"; var nn=encodeURI(test1); var now=decodeURI(test1); var test1="http://www.haorooms.com/My first/"; var bb=encodeURIComponent(test1); var nnow=decodeURIComponent(bb); </script> </body> </html>
輸出結果是：
http://www.haorooms.com/My%20first/ http://www.haorooms.com/My first/ http%3A%2F%2Fwww.haorooms.com%2FMy%20first%2F http://www.haorooms.com/My first/
總結
escape()不能直接用於URL編碼，它的真正做用是返回一個字符的Unicode編碼值。好比"春節"的返回結果是%u6625%u8282，，escape()不對"+"編碼 主要用於漢字編碼，如今已經不提倡使用。
encodeURI()是Javascript中真正用來對URL編碼的函數。 編碼整個url地址，但對特殊含義的符號"; / ? : @ & = + $ , #"，也不進行編碼。對應的解碼函數是：decodeURI()。
encodeURIComponent() 能編碼"; / ? : @ & = + $ , #"這些特殊字符。對應的解碼函數是decodeURIComponent()。
假如要傳遞帶&符號的網址，因此用encodeURIComponent()