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%BD
2.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()方法的逆运算，两个解码方法只接受一个入参，就是转码后的字符串；示例如下：
//decodeURI
decodeURI("https://www.baidu.com/s?ie=UTF-8&wd=%E4%B8%AD%E5%9B%BD")
//输出: https://www.baidu.com/s?ie=UTF-8&wd=中国
//decodeURIComponent
decodeURIComponent("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"
以上是今日分享内容，如有错误地方，欢迎指出~
