1 介绍
1.1 背景
网页的 URL 只能蕴含非法的字符。非法字符分成两类。
- URL 元字符：分号（
;），逗号（,），斜杠（/），问号（?），冒号（:），at（@），&，等号（=），加号（+），美元符号（$），井号（#） - 语义字符：
a-z，A-Z，0-9，连词号（-），下划线（_），点（.），感叹号（!），波浪线（~），星号（*），单引号（'），圆括号（()）
除了以上字符，其余字符呈现在 URL 之中都必须本义，规定是依据操作系统的默认编码，将每个字节转为百分号（%）加上两个大写的十六进制字母。
比方，UTF-8 的操作系统上，https://www.baidu.com/s?ie=UTF-8&wd=中国这个 URL 之中，汉字“中国”不是 URL 的非法字符，所以被浏览器主动转成https://www.baidu.com/s?ie=UTF-8&wd=%E4%B8%AD%E5%9B%BD。其中，“中”转成了%E4%B8%AD，“国”转成了%E5%9B%BD。这是因为“中”和“国”的 UTF-8 编码别离是E4 B8 AD和E5 9B BD，将每个字节后面加上百分号，就形成了 URL 编码。
1.2 编码/解码办法
encodeURI()encodeURIComponent()decodeURI()decodeURIComponent()
其中decodeURI()、decodeURIComponent()用于URL 片段的解码。它们别离是encodeURI()、encodeURIComponent()办法的逆运算。
2 应用
2.1 encodeURI()
encodeURI()办法用于转码整个 URL。它的参数是一个字符串，代表整个 URL。它会将元字符和语义字符之外的字符，都进行本义。示例如下：
encodeURI('https://www.baidu.com/s?ie=UTF-8&wd=中国')// 输入: https://www.baidu.com/s?ie=UTF-8&wd=%E4%B8%AD%E5%9B%BD2.2 encodeURIComponent()
encodeURIComponent()办法用于转码 URL 的组成部分，会转码除了语义字符之外的所有字符，即元字符也会被转码。所以，它不能用于转码整个 URL。它承受一个参数，就是 URL 的片段。示例如下：
// 对URL中的非凡编码字符局部进行转码'https://www.baidu.com/s?ie=UTF-8&wd='+encodeURIComponent('中国')//输入: "https://www.baidu.com/s?ie=UTF-8&wd=%E4%B8%AD%E5%9B%BD"// 对URL中的回调链接进行转码'https://www.baidu.com/s?returnURL=' +encodeURIComponent('http://www.test.com/')//输入: "https://www.baidu.com/s?returnURL=http%3A%2F%2Fwww.test.com%2F"2.3 解码
decodeURI()、decodeURIComponent()用于URL 片段的解码。它们别离是encodeURI()、encodeURIComponent()办法的逆运算，两个解码办法只承受一个入参，就是转码后的字符串；示例如下：
//decodeURIdecodeURI("https://www.baidu.com/s?ie=UTF-8&wd=%E4%B8%AD%E5%9B%BD")//输入: https://www.baidu.com/s?ie=UTF-8&wd=中国//decodeURIComponentdecodeURIComponent("http%3A%2F%2Fwww.test.com%2F")//输入:"http://www.test.com/"3 encodeURI()、encodeURIComponent()区别以及应用场景
3.1 区别
从以上咱们能够看出，encodeURI()办法用于转码整个 URL，encodeURIComponent()办法用于转码 URL 的组成部分；起因是encodeURI()与encodeURIComponent()有着本质区别：encodeURI()不会对URL 元字符进行转码，而encodeURIComponent()会对URL元字符进行转码；这样一来，会导致encodeURIComponent()转码过后的URL无奈间接拜访；所以encodeURIComponent()个别用于转码URL的局部参数；
URL 元字符：分号（;），逗号（,），斜杠（/），问号（?），冒号（:），at（@），&，等号（=），加号（+），美元符号（$），井号（#）
3.4 应用场景
对于无非凡参数的链接，都能够应用encodeURI()进行转码，那什么非凡状况须要用到encodeURIComponent()呢？通常是链接带着一些非凡参数的时候，就比方以下链接：
https://www.baidu.com/s?returnURL=http://www.test.com/链接内蕴含一个回调地址，回调地址是另外一个URL，此时咱们就须要应用encodeURIComponent()对回调地址进行转码，这样一来，URL中就不会呈现多个http://，多个&这样的特殊字符；不便对回调地址进行解决；以上链接解决如下：
// 对URL中的回调链接进行转码'https://www.baidu.com/s?returnURL=' +encodeURIComponent('http://www.test.com/')//输入: "https://www.baidu.com/s?returnURL=http%3A%2F%2Fwww.test.com%2F"