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 童童"

總結

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

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