encodeURI 和encodeURIComponent的区别

1. encodeURI()函数

encodeURI() 函数通过将特定字符的每个实例替换为一个、两个、三或四转义序列来对统一资源标识符 (URI) 进行编码。

简述：对整个URL进行编码

示例：

console.log(encodeURI("http://username:password@www.example.com:80/path/to/file.php?foo=316&bar=this+has+spaces#anchor"))
// output: ”http://username:password@www.example.com:80/path/to/file.php?foo=316&bar=this+has+spaces#anchor”

encodeURI 会替换所有的字符，但不包括以下字符，即使它们具有适当的UTF-8转义序列：

类型	包含
保留字符	; , / ? : @ & = + $
非转义的字符	字母 数字 - _ . ! ~ * ' ( )
数字符号	#

2. encodeURIComponent()函数

encodeURIComponent() 函数通过将一个，两个，三个或四个表示字符的 UTF-8 编码的转义序列替换某些字符的每个实例来编码 URI

简述：对URL的组成部分进行个别编码，如URL的参数

示例：

console.log(`?x=${encodeURIComponent('test?')}`);
// output: "?x=test%3F"

encodeURIComponent 转义除了如下所示外的所有字符：

类型	包含
不转义的字符	A-Z a-z 0-9 - _ . ! ~ * ’ ( )

3. encodeURIComponent() 和 encodeURI() 有以下几个不同点

除了不转义字符外， encodeURIComponent() 和 encodeURI() 结果都不一样

var set1 = ";,/?:@&=+$";  // 保留字符
var set2 = "-_.!~*'()";   // 不转义字符 ☆☆☆☆☆
var set3 = "#";           // 数字标志
var set4 = "ABC abc 123"; // 字母数字字符和空格

console.log(encodeURI(set1)); // ;,/?:@&=+$
console.log(encodeURI(set2)); // -_.!~*'()    ☆☆☆☆☆
console.log(encodeURI(set3)); // #
console.log(encodeURI(set4)); // ABC%20abc%20123 (空格被编码为 %20)

console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(encodeURIComponent(set2)); // -_.!~*'()  ☆☆☆☆☆
console.log(encodeURIComponent(set3)); // %23
console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (the space gets encoded as %20)

参考：
MDN关于encode的解释说明
MDN关于encodeURIComponent的解释说明