1.介绍

网页的 URL 只能包含合法的字符。合法字符分成两类。

  • URL 元字符：分号（;），逗号（,），斜杠（/），问号（?），冒号（:），at（@），&，等号（=），加号（+），美元符号（$），井号（#）
  • 语义字符：a-z，A-Z，0-9，连词号（-），下划线（_），点（.），感叹号（!），波浪线（~），星号（*），单引号（'），圆括号（()）

除了以上字符，其他字符出现在 URL 之中都必须转义，规则是根据操作系统的默认编码，将每个字节转为百分号（%）加上两个大写的十六进制字母。

2.使用

编码/解码方法

  • encodeURI()
  • encodeURIComponent()
  • decodeURI()
  • decodeURIComponent() 其中decodeURI()、decodeURIComponent()用于URL 片段的解码。它们分别是encodeURI()、encodeURIComponent()方法的逆运算。

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()

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()区别

1.encodeURI 方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码：- _ . ! ~ * ' ( )。
该方法的目的是对 URI 进行完整的编码，因此对以下在 URI 中具有特殊含义的 ASCII 标点符号，encodeURI() 函数是不会进行转义的：;/?:@&=+$,# 2.encodeURIComponent()方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。
其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。
传递参数时需要使用encodeURIComponent，这样组合的url才不会被#等特殊字符截断。
3.形象的解释，encodeURI全角日韩汉字其作用，对URL中的特殊字符不做处理。encodeURIComponent()对url中的特殊字符做出来，将他们转化成对应的ASCII码。
4.encodeURI不编码字符有82个：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z 5.encodeURIComponent不编码字符有71个：!， '，(，)，*，-，.，_，~，0-9，a-z，A-Z