前端常用的url编码方式
1.为什么需要编码？
一般来说，URL只能使用英文字母、阿拉伯数字和某些标点符号，不能使用其他文字和符号。比如，世界上有英文字母的网址"http://www.abc.com"，但是没有希腊字母的网址"http://www.aβγ.com"（读作阿尔法-贝塔-伽玛.com）。这是因为网络标准RFC 1738做了硬性规定（只有字母和数字[0-9a-zA-Z]、一些特殊符号"$-_.+!*'(),"[不包括双引号]、以及某些保留字，才可以不经过编码直接用于URL。）
这意味着，如果URL中有汉字或者其他特殊字符，就必须编码后使用。但是麻烦的是，RFC 1738没有规定具体的编码方法，而是交给浏览器自己决定。这导致不同浏览器对特殊字符的编码方式不同。
举个例子：
我在谷歌浏览器输入http://www.baidu.com?a=测试，可以发现查询字符串，测试已经被编码成 %E6%B5%8B%E8%AF%95
20190517101910.png
参考阮一峰老师文章关于URL编码,里面介绍使用ie8会出现编码结果不同，由于我的电脑没有ie8,所以没法测试。不过我试了360、搜狗，和谷歌测试的结果一样。
而火狐直接显示的是中文：
20190517105233.png
上面只是统一操作系统的浏览器，如果不同操作系统等，肯定会出现其他编码方式。所以我们在使用url的时候需要一个统一的编码方式（即使用Javascript先对URL编码，不用浏览器自己来编码。因为Javascript的输出总是一致的，服务器获取查询参数等数据，再用对应的解码函数进行解码）
2.网络中常见的编码方式
Javascript语言用于编码的函数，一共有三个，最古老的一个就是escape()。虽然这个函数现在已经不提倡使用了，但是由于历史原因，很多地方还在使用它，所以有必要先从它讲起。
1. escape() / unescape()
规则：除了ASCII字母、数字、标点符号"@ * _ + - . /"以外，对其他所有字符进行编码(注：空格会被转化为+字符)
注：
- escape用来对某个字符串进行编码的，不能直接用于url编码，尽管url也是个字符串。所以如果你需要编码整个URL，那么用
decodeURI()是专门着眼于对整个url进行编码的。 - ECMAScript v3 反对使用
escape()方法，现在已经很少使用，应用使用 decodeURI() 和 decodeURIComponent() 替代它
2. encodeURI() / unencodeURI()
-
用途：encodeURI()是Javascript中真正用来对URL编码的函数。
-
规则：不会对下列字符编码
ASCII字母 数字 ~ ! @ # $ & * ( ) = : / , ; ? + '(注：这是单引号，若果双引号"会被编码%22)进行编码 -
结果：输出utf-8形式，并且在每个字节前加上%。
3.encodeURIComponent() / encodeURIComponent
-
用途：与encodeURI()的区别是，它用于对URL的组成部分（如查询参数、路径等）进行个别编码，而不用于对整个URL进行编码。
-
规则： 不会对下列字符编码
ASCII字母 数字 ~ ! * ( ) '(注：这是单引号，若果双引号"会被编码%22)进行编码 -
结果：和encodeURI一样，输出utf-8形式，并且在每个字节前加上%。
3.区别
- encodeURIComponent比encodeURI编码的范围更大，即
@ # $ & = : / , ; ? +，这些在encodeURI()中不被编码的符号，在encodeURIComponent()中统统会被编码 - 如果只是编码字符串，不和URL有半毛钱关系，那么用escape。当然该方法已经不推荐使用，所以不用深究
- encodeUR用于编码整个URL
- encodeURIComponent用于编码url中的查询参数或路径等（若参数为url,还是相当于参数，用
encodeURIComponent()）
4.测试
console.log(encodeURI("http://www.w3school.com.cn"))
console.log(encodeURIComponent("http://www.w3school.com.cn"))
console.log(encodeURI("http://www.w3school.com.cn/My first/"))
console.log(encodeURI('"'))
console.log(encodeURIComponent('"'))
console.log(encodeURI("http://www.w3school.com.cn?t="+encodeURIComponent('http://www.w3school.com.cn')))
输出：
http://www.w3school.com.cn
http%3A%2F%2Fwww.w3school.com.cn
http://www.w3school.com.cn/My%20first/
%22
%22
http://www.w3school.com.cn?t=http%253A%252F%252Fwww.w3school.com.cn
参考文章
