关于javascript:URL-编码与解码使用详解

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"