encodeURI()、encodeURIComponent()区别及使用场景

一、URL

　　URL是使用 ASCII 进行编码的，所以有些内容是不支持的，例如中文， URL会使用编码的手段将其转义为可解释内容。

　　在URL中，合法字符分成两类。

URL 元字符：分号（;），逗号（,），斜杠（/），问号（?），冒号（:），at（@），&，等号（=），加号（+），美元符号（$），井号（#）

 

语义字符：a-z，A-Z，0-9，连词号（-），下划线（_），点（.），感叹号（!），波浪线（~），星号（*），单引号（'），圆括号（()）

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

　　比如，UTF-8 的操作系统上，http://www.example.com/q=春节这个 URL 之中，汉字“春节”不是 URL 的合法字符，所以被浏览器自动转成http://www.example.com/q=%E6%98%A5%E8%8A%82。其中，“春”转成了%E6%98%A5，“节”转成了%E8%8A%82。这是因为“春”和“节”的 UTF-8 编码分别是E6 98 A5和E8 8A 82，将每个字节前面加上百分号，就构成了 URL 编码。

　　JavaScript 提供四个 URL 的编码/解码方法：

• encodeURI()、decodeURI()
• encodeURIComponent()、decodeURIComponent()

二、区别：

1、encodeURI()

　　用于通常用于转码整个 URL。它会将元字符和语义字符之外的字符，都进行转义。

2、encodeURIComponent()

　　encodeURIComponent()通常只用于转码URL组成部分，如URL中?后的一串；它会转码除了语义字符之外的所有字符，即元字符也会被转码。所以，它不能用于转码整个 URL。

　　PS:若整个链接被encodeURIComponent()转码，则该链接无法被浏览器访问，需要解码之后才可以正常访问。

三、使用

　　在使用过程时候 如果是http路径采用encodeURI进行编码，但是在路径中携带的参数采用encodeURIComponent进行编码。

1、如果你需要编码整个URL，然后需要使用这个URL，那么用encodeURI。

比如对于链接：http://www.example.com/q=春节，

encodeURI('http://www.example.com/q=春节')
// "http://www.example.com/q=%E6%98%A5%E8%8A%82"

encodeURIComponent('http://www.example.com/q=春节')
// "http%3A%2F%2Fwww.example.com%2Fq%3D%E6%98%A5%E8%8A%82"

如果使用encodeURIComponent();连 '/' 都被转码了，整个链接都没办法用了。

2、如果URL中携带了特殊参数的时候，则使用encodeURIComponent对那部分参数进行编码

比如对于链接：

https://www.baidu.com/s?returnURL=http://www.test.com/

// 对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"

 

引：https://blog.csdn.net/m0_46309087/article/details/119839122