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"