前端常用的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字母、数字、标点符号"@ * _ + - . /"以外，对其他所有字符进行编码(注：空格会被转化为+字符)

注：

1. escape用来对某个字符串进行编码的，不能直接用于url编码，尽管url也是个字符串。所以如果你需要编码整个URL，那么用decodeURI()是专门着眼于对整个url进行编码的。
2. ECMAScript v3 反对使用escape()方法，现在已经很少使用，应用使用 decodeURI() 和 decodeURIComponent() 替代它

2. encodeURI() / decodeURI()

• 用途：encodeURI()是Javascript中真正用来对URL编码的函数。

• 规则：不会对下列字符编码 ASCII字母 数字 ~ ! @ # $ & * ( ) = : / , ; ? + '(注：这是单引号，若果双引号"会被编码%22)进行编码

• 结果：输出utf-8形式，并且在每个字节前加上%。

3.encodeURIComponent() / decodeURIComponent

• 用途：与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

参考文章

阮一峰老师文章关于URL编码

简单明了区分escape、encodeURI和encodeURIComponent