概述
前端经常需要对放入url中的参数进行编码和解码，js原生提供了两组编码和解码的函数，分别为encodeURIComponent与decodeURIComponet，encodeURI与decodeURI，这两组函数有什么区别和不同的应用场景呢？我自己经常会混淆，最近又遇到这些问题，因此自己去尝试了一些demo，并记录下来，让自己彻底搞明白；
共同点
这两组函数都是js的全局函数，encodeURI()和encodeURIComponent()方法可以对URI (Uniform ResourceIdentifiers，通用资源标识符)进行编码，以便发送给浏览器。有效的URI中不能包含某些字符，例如空格、+、/等。而这URI编码方法就可以对URI进行编码，它们用特殊的UTF-8编码替换所有无效的字 符，从而让浏览器能够接受和理解。编码函数都不会对ASCII码字母、数字、特定标点符号【- _ . ! ~ * ' ( ) 等等】进行编码，对其保持原型。
对应的decodeURI()和decodeURIComponent()则是对编码的URI进行解码，以得到原始的URI。
不同点
encodeURI()不会对在 URI 中具有特殊含义的 ASCII 标点符号【如 , / ? : @ & 空格 = + $ # 等等】进行编码，还是保持原形；但是会对%编码，因为%比较特殊，它是浏览器中十六进制表示关键字，比如+对应%2B，如果你的原始URI中有%，encodeURI会对其进行转义。
函数ecodeURIComponent(str) 会对这些符号进行编码，编码成由一个或多个十六进制的转义序列表示。
ecodeURIComponent(str)假定它的入参是 URI 的一部分（比如协议、主机名、路径或查询字符串）。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。
一般用法
如果需要编码整个URL，然后使用这个URL，用encodeURI
当只需要编码URL中的参数时，用encodeURIComponent
示例
demo1
> var url = "http://www.baidu.com/list?p=a+b+c"
> encodeURI(url)
"http://www.baidu.com/list?p=a+b+c"
> encodeURIComponet(url)
"http%3A%2F%2Fwww.baidu.com%2Flist%3Fp%3Da%2Bb%2Bc"
可以看出encodeURIComponet()方法吧url中的/、?以及+都转义了，而encodeURI()方法没有改变；
demo2
> var url = "%+/$#;"
> encodeURI(url)
"%25+/$#;"
> encodeURIComponet(url)
"%25%2B%2F%24%23%3B"
%也被encodeURI函数转义
参考
https://www.cnblogs.com/gexiaoshan/p/4260588.html
https://www.w3school.com.cn/js/jsref_encodeURIComponent.asp
