0
点赞
收藏
分享

微信扫一扫

javascript编码与解码: en(de)codeURI、en(de)codeURIComponent、(un)escape、btoa(atob)

春意暖洋洋 2022-02-21 阅读 92

1.encodeURI 和 decodeURI

方法解释:

encodeURI 特点:

 例如:

 
encodeURI("http://cfz.me?username=hello @风筝");
// "http://cfz.me?username=hello%20@%E9%A3%8E%E7%AD%9D"

decodeURI("http://cfz.me?username=hello%20@%E9%A3%8E%E7%AD%9D");
// http://cfz.me?username=hello @风筝"

2.encodeURIComponent 和 decodeURIComponent

特点: 

例如: 

 
encodeURIComponent("http://cfz.me?username=hello @风筝");
// "http%3A%2F%2Fcfz.me%3Fusername%3Dhello%20%40%E9%A3%8E%E7%AD%9D"

decodeURIComponent("http%3A%2F%2Fcfz.me%3Fusername%3Dhello%20%40%E9%A3%8E%E7%AD%9D");
// "http://cfz.me?username=hello @风筝"

3.escape 和 unescape

escape 与 encodeURI 和 encodeURIComponent 类似,都是对字符串进行编码。不同点在于该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号(即: * @ - _ + . / )进行编码,其他所有的字符都会被转义序列替换。

 
encodeURI("hello @风筝");// 编码了空格、中文
// "hello%20@%E9%A3%8E%E7%AD%9D" 

console.log(encodeURIComponent("hello @风筝")); // 编码了空格、@符合以及中文
// hello%20@%u98CE%u7B5D

console.log(escape("hello @风筝"));// 编码了空格、@符合以及中文
// hello%20@%u98CE%u7B5D

如上,encodeURI 和 encodeURIComponent 的编码结果几乎是一致的,但 escape 的中文编码却大相径庭。unescape 是 escape 的反函数,作用是用于解码 escape 编码后的字符串。

4.btoa 和 atob 

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 @云淡然"
举报

相关推荐

0 条评论