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

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

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

?

1.encodeURI

encodeURI是用來編碼URI的，最常見的就是編碼一個URL。?encodeURI會將需要編碼的字符轉換為UTF-8的格式。decodeURI方法可以恢復到原有字符串。

encodeURI方法不會編碼下列字符：":", "/", ";", and "?"，不過我們可以通過下面的encodeURIComponent方法來編碼這些字符。

例如URL中包含中文：

encodeURI('http://www.我.com') // => "http://www.%E6%88%91.com"

由于encodeURI不轉義&,?+, 和?=。所以URL參數的值是無法轉義的，比如我們想把a=?傳給服務器：

encodeURI('http://www.我.com?a=?') // => "http://www.%E6%88%91.com?a=?"

服務器收到的a值為空，因為?是URL保留字符。此時我們需要用encodeURIComponent來編碼！

?

2.encodeURIComponent

encodeURIComponent是用來編碼URI參數的。decodeURIComponent方法可以恢復到原有字符串。

它只會跳過非轉義字符（字母數字以及-_.!~*'()）， URL保留字符（;,/?:@&=+$#）均會被轉義。

由于encodeURIComponent能夠編碼差不多所有字符，當我們把編碼過的/folder1/folder2/default.html發送到服務器時時，由于‘/’也將被編碼，服務器將無法正確識別。

比如上面的例子：

// => "http://www.我.com?a=%3F" encodeURI('http://www.我.com') + '?a=' + encodeURIComponent('?');

因為encodeURIComponent會編碼所有的URL保留字，所以不適合編碼URL，例如：

encodeURIComponent('http://www.我.com') "http%3A%2F%2Fwww.%E6%88%91.com"

?

3.btoa

btoa：將ascii字符串或二進制數據轉換成一個base64編碼過的字符串，該方法不能直接作用于Unicode字符串。

atob：將已經被base64編碼過的數據進行解碼。

注意：因為btoa僅將ascii字符串或二進制數據進行編碼，不能作用于unicode字符串，所以對中文的base64編碼會報錯：

btoa("hello 童童"); // InvalidCharacterError: 'btoa' failed: The string to be encoded contains characters outside of the Latin1 range.

如果要對中文進行base64編碼，只需要將中文進行 encodeURIComponent 進行編碼之后再進行 base64編碼即可。

btoa(encodeURIComponent("hello 童童")); // "aGVsbG8lMjAlNDAlRTQlQkElOTElRTYlQjclQTElRTclODQlQjY="

完整的utf8編碼字符串進行base64編碼示例：

// 完整的utf8字符串base64編碼與解碼 function uft8ToBase64(utf8) { return btoa(encodeURIComponent(utf8)); } function base64ToUtf8(base64) { return decodeURIComponent(atob(base64)); } var base64 = uft8ToBase64("hello 童童"); // "aGVsbG8lMjAlNDAlRTQlQkElOTElRTYlQjclQTElRTclODQlQjY=" base64ToUtf8(base64); // "hello 童童"

?

轉載于:https://www.cnblogs.com/shytong/p/5102256.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的encodeURI、encodeURIComponent、btoa及其应用场景的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。