encodeURI和encodeURIComponent之间的区别

encodeURI与encodeURIComponent之间的区别和适用场景

相同与不同： encodeURI和encodeURIComponent作用对象都是URL，唯一的区别是编码的字符范围

• encodeURI不会对以下字符进行编码ASCII字母 数字 ~!@#$&*()=:/,;?+’
• encodeURIComponent方法不会对以下字符编码 ASCII字母 数字 ~!*()’

结论：encodeURIComponent 比 encodeURI的编码范围更大。
例如：encodeURIComponent会把 http:// 编码成 http%3A%2F%2F 而encodeURI却不会。

适用场景
encodeURI编码后url仍可以适用而，即如果还需要使用改URL进行网络传输则可以使用encodeURI。例如URL出现了中文，中文在网络中无法直接传输，则URL需要编码。
（事实上，我们在浏览器中输入一个含有中文参数的URL，在发出请求后，会自动使用encodeURI进行编码。所以有的带中文的url在浏览器可以使用，而在小程序中用不了，大概也是这个原因）

encodeURI("http://www.cnblogs.com/season-huang/some other thing");
//encodeURI编码后会变为(空格被编码成了%20)
"http://www.cnblogs.com/season-huang/some%20other%20thing";
//encodeURIComponent编码后会变为(连 "/" 都被编码了，整个URL已经没法用了)
"http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2Fsome%20other%20thing"

对于带参数URL进行编码使用encodeURIComponent更好。这个作为参数的URL中会包含:/?=&这些字符，如果不加处理，会解析错误

const uri = 'https://www.test.com/person/index.asp?name=张三&age=12'
encodeURI(uri)          // "https://www.test.com/person/index.asp?name=%E5%BC%A0%E4%B8%89&age=12"
encodeURIComponent(uri) // "https%3A%2F%2Fwww.test.com%2Fperson%2Findex.asp%3Fname%3D%E5%BC%A0%E4%B8%89%26age%3D12"

• 为了避免服务器收到不可预知的请求，对任何用户输入的作为 URI 部分的内容你都需要用 encodeURIComponent 进行转义。
• 比如，一个用户可能会输入"Thyme &time=again"作为comment变量的一部分。如果不使用
  encodeURIComponent 对此内容进行转义，服务器得到的将是comment=Thyme%20&time=again。
• 请注意，"&“符号和”="符号产生了一个新的键值对，所以服务器得到两个键值对（一个键值对是comment=Thyme，另一个则是time=again），而不是一个键值对。
• 对于 application/x-www-form-urlencoded (POST) 这种数据方式，空格需要被替换成
  ‘+’，所以通常使用 encodeURIComponent 的时候还会把 “%20” 替换为 “+”。

参考：escape,encodeURI,encodeURIComponent有什么区别? - 大黄的回答 - 知乎
https://www.zhihu.com/question/21861899/answer/20300871
https://www.cnblogs.com/hdxg/p/17077467.html