js中編碼函數：escape,encodeURI與encodeURIComponent詳解

1、eacape(): 該方法不會對 ASCII 字母和數字進行編碼，也不會對下面這些 ASCII 標點符號進行編碼： * @ - _ + . / 。其他所有的字符都會被轉義序列替換。其它情況下escape，encodeURI，encodeURIComponent編碼結果相同。

   escape對0-255以外的unicode值進行編碼時輸出%u****格式

   可以使用 unescape() 對 escape() 編碼的字符串進行解碼。

   ECMAScript v3 反對使用該方法，應用使用 decodeURI() 和 decodeURIComponent() 替代它。

2、encodeURI 和 encodeURIComponent

encodeURI 和 encodeURIComponent都是ECMA-262標準中定義的函數,所有兼容這個標準的語言（如JavaScript, ActionScript）都會實現這兩個函數。它們都是用來對URI （RFC-2396）字符串進行編碼的全局函數，但是它們的處理方式和使用場景有所不同。為了解釋它們的不同，我們首先需要理解RFC-2396中對于 URI中的字符分類：

1>保留字符（reserved characters）：這類字符是URI中的保留關鍵字符，它們用于分割URI中的各個部分。這些字符是：";" | "/" | "?" | ":" | "@" | "&" | "=" | "+" | "$" | ","

2>Mark字符（mark characters）：這類字符在RFC-2396中特別定義，但是沒有特別說明用途，可能是和別的RFC標準相關。 這些字符是："-" | "_" | "." | "!" | "~" | "*" | "'" | "(" | ")"

3>基本字符（alphanum characters）：這類字符是URI中的主體部分，它包括所有的大寫字母、小寫字母和數字。

在介紹完上面三類字符串后，我們就非常容易來解釋encodeURI和encodeURIComponent函數的不同之處了：

encodeURI: 該函數對傳入字符串中的所有非（基本字符、Mark字符和保留字符）進行轉義編碼（escaping）。所有的需要轉義的字符都按照UTF-8編碼轉化成 為一個、兩個或者三個字節的十六進制轉義字符（％xx）。例如，字符空格" "轉換成為"%20"。在這種編碼模式下面，需要編碼的ASCII字符用一個字節轉義字符代替，在\u0080和\u007ff之間的字符用兩個字節轉義字符代替，其他16為Unicode字符用三個字節轉義字符代替。

encodeURIComponent: 該函數處理方式和encodeURI只有一個不同點，那就是對于保留字符同樣做轉義編碼。這樣url中的參數和值才不會被#等特殊字符截斷。 比如：http://localhost:8080/xss/XssServlet?username=A&T Plastic，該url，后臺的代碼：

String username = request.getParameter("username");

獲得的username值為A，而不是我們希望的 A&T Plastic。因為 username=A&T Plastic，其中含有了保留字符&，并且沒有進行編碼，所以username的值被其給截斷了。所以正確的做法是，對其進行編碼：encodeURIComponent("A&T Plastic") == A%26T%20Plastic，然后將上面的連接改為：

http://localhost:8080/xss/XssServlet?username=A%26T%20Plastic，后臺才能獲得正確的值：username==A&T Plastic。

因為username的值含有了uri的保留字符，所以需要進行編碼。

例如，字符":"被轉義字符"%3A"代替

之 所以有上面兩個不同的函數，是因為我們在寫JS代碼的時候對URI進行兩種不同的編碼處理需求。encodeURI可以用來對完整的URI字符串進行編碼處理。而encodeURIComponent可以對URI中一個部分進行編碼，從而讓這一部分可以包含一些URI保留字符。這在我們日常編程中是十分有用的。比如下面的URI字符串：

http://www.mysite.com/send-to-friend.aspx?url=http://www.mysite.com/product.html

在 這個URI字符串中。send-to-friend.aspx頁面會創建HTML格式的郵件內容，里面會包含一個鏈接，這個鏈接的地址就是上面URI字符 串中的url值。顯然上面的url值是URI中的一個部分，里面包含了URI保留關鍵字符。我們必須調用encodeURIComponent對它進行編 碼后使用，否則上面的URI字符串會被瀏覽器認為是一個無效的URI。

正確的URI應該如下：

http://www.mysite.com/send-to-friend.aspx?url=http%3A%2F%2Fwww.mysite.com%2Fproduct.html

最多使用的應為encodeURIComponent，它是將中文、韓文等特殊字符轉換成utf-8格式的url編碼，所以如果給后臺傳遞參數需要使用encodeURIComponent時需要后臺解碼對utf-8支持（form表單中的編碼方式和當前頁面編碼方式相同）

     escape不編碼字符有69個：*，+，-，.，/，@，_，0-9，a-z，A-Z

     encodeURI不編碼字符有82個：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z

     encodeURIComponent不編碼字符有71個：!， '，(，)，*，-，.，_，~，0-9，a-z，A-Z

例子：

alert(encodeURIComponent("A&T Plastic")); //A%26T%20Plastic
alert(escape("A&T Plastic"));  //A%26T%20Plastic
alert(encodeURI("A&T Plastic"));  //A&T%20Plastic
alert(escape("A&T Plastic中"));  //A%26T%20Plastic%uFFFD%uFFFD

我們看到 encodeURI 沒有編碼uri的保留字符 & ，'中'被編碼成了 %uFFFD%uFFFD

encodeURIComponent 就編碼了保留字符& 。

url的編碼經常會被利用在XSS攻擊中來繞過服務端的 xss filter, 對有威脅的url進行偽裝，讓不明用戶去點擊。

所以如果只是處理 get 提交時url地址中的亂碼問題，可以使用 encodeURI 來編碼整個url；

如果參數中含有保留字符需要進行編碼，那么應該使用 encodeURIComponent 來編碼部分參數；

如果使用encodeURIComponent來處理中文亂碼，那么前端需要使用兩次encodeURIComponent(encodeURIComponent('你好'))，Java后端使用：

java.Net.URLDecoder.decode(param,"UTF-8");

來解碼；

參考：

https://www.jb51.net/article/22880.htm

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。