JS中编码和解码的总结

1、base-64编码的字符串：window.btoa()编码、window.atob()解码

2、十六进制转义序列的字符串：escape编码、unescape解码

3、URL：encodeURI编码、decodeURI解码、encodeURIComponent编码、decodeURIComponent解码

一、编码URL有何不同？

唯一区别就是编码的字符范围

encodeURI函数对 URI 进行完整的编码

encodeURIComponent函数假定它的参数是 URI 的一部分（比如协议、主机名、路径或查询字符串）。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。

如果 URI 组件中含有分隔符，比如 ? 和 #，则应当使用 encodeURIComponent() 方法分别对各组件进行编码。

所以encodeURIComponent比encodeURI编码的范围更大。

二、具体什么场合使用？

1、如果只是编码字符串，使用escape

escape("Need tips? Visit RUNOOB!")

// Need%20tips%3F%20Visit%20RUNOOB%21

2、如果需要编码整个URL，然后需要使用这个URL，使用encodeURl

encodeURI("http://www.w3school.com.cn/My first/")

// http://www.w3school.com.cn/My%20first/

3、如果需要编码URL中的参数，使用encodeURlComponent

encodeURIComponent("http://www.w3school.com.cn/p 1/")

// http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F

三、btoa & atob

1、string ---> base-64转码

var str = 'javascript'

window.btoa(str)

// 转码结果："amF2YXNjcmlwdA=="

window.atob("amF2YXNjcmlwdA==")

// 解码结果："javascript"

2、base64转码的对象只能是字符串，不能对unicode转码

var str = "China，中国"

window.btoa(str);

报错：Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

对于汉字，这就要使用window.encodeURIComponent和window.decodeURIComponent

var str = "China，中国"

window.btoa(window.encodeURIComponent(str))

// 转码结果："Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ="

window.decodeURIComponent(window.atob('Q2hpbmElRUYlQkMlOEMlRTQlQjglQUQlRTUlOUIlQkQ='))

// 转码结果："China，中国"