encodeURI、encodeURIComponent、btoa及其应用场景

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