为什么要URL编码？
在因特网上传送URL，只能采用ASCII字符集
也就是说URL只能使用英文字母、阿拉伯数字和某些标点符号，不能使用其他文字和符号，即
只有字母和数字[0-9a-zA-Z]、一些特殊符号$-_.+!*()、以及某些保留字（空格转换为+）才可以不经过编码直接用于URL
这意味着 如果URL中有汉字，就必须编码后使用
但是麻烦的是 标准的国际组织并没有规定具体的编码方法，而是交给应用程序（浏览器）自己决定。 这导致"URL编码"成为了一个混乱的领域。
如果包含中文，其实会自动编码的，比如Chrome和火狐，"文"和"章"的utf-8编码分别是"E6 96 87"和"E7 AB A0" ,下图所示的"%e6%96%87%e7%ab%a0"就是按照顺序，在每个字节前加上%而得到的:
但是不同的浏览器可能会有不同的编码方式，不要将编码交给浏览器。应该用JS在前端对URL编码，这样就实现了统一
如何编码?
URL编码通常也被称为百分号编码（percent-encoding），是因为它的编码方式非常简单：
使用%加上两位的字符——0123456789ABCDEF——代表一个字节的十六进制形式。URL编码要做的，就是将每一个非安全的ASCII字符都被替换为“%xx”格式，
对于非ASCII字符，RFC文档建议使用utf-8对其进行编码得到相应的字节，然后对每个字节执行百分号编码。
如"中文"使用UTF-8字符集得到的字节为0xE4 0xB8 0xAD 0xE6 0x96 0x87，经过Url编码之后得到"%E4%B8%AD%E6%96%87"。
一些常见的特殊字符换成相应的十六进制的值：
+ %20
/ %2F
? %3F
% %25
# %23
& %26
假如我们有一个需要编码的url：
var url = 'http://www.baidu.com?name=李晓韬&age=2'
现在分别用escape、encodeURI、encodeURIComponent 这三种方式编码
escape(url) // http%3A//www.baidu.com%3Fname%3D%u674E%u6653%u97EC%26age%3D2
encodeURI(url) // http://www.baidu.com?name=%E6%9D%8E%E6%99%93%E9%9F%AC&age=2
encodeURIComponent(url) // http%3A%2F%2Fwww.baidu.com%3Fname%3D%E6%9D%8E%E6%99%93%E9%9F%AC%26age%3D2
汉字都被编码了，貌似都没问题，但是如果我们需要在浏览器中打开编码后的url就有问题了，只有用encodeURI编码的url可以在浏览器中打开
所以如果我们有这样一个需求：
- 接口传给我们一个带汉字的url
- 拿到url后要用浏览器打开，如果有汉字在浏览器中打开可能会报错，需要编码
满足以上两个条件就必须用encodeURI编码
以下是对这三种编码方式的介绍：
只有 0-9[a-Z] $ - _ . + ! * ' ( ) , 以及某些保留字，才能不经过编码直接用于 URL
escape 和 unescape
原理：对除ASCII字母、数字、标点符号 @ * _ + - . / 以外的其他字符进行编码。
编码：escape('http://www.baidu.com?name=zhang@xiao@jie&order=1')
结果："http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1"
编码：escape('张')
结果："%u5F20"
解码：unescape("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")
结果："http://www.baidu.com?name=zhang@xiao@jie&order=1"
解码：unescape("%u5F20")
结果："张"encodeURI 和 decodeURI (推荐使用)
原理：返回编码为有效的统一资源标识符 (URI) 的字符串，不会被编码的字符：! @ # $ & * ( ) = : / ; ? + '
encodeURI()是Javascript中真正用来对URL编码的函数。
用于：对整个url进行编码
编码：encodeURI('http://www.baidu.com?name=zhang@xiao@jie&order=1')
结果："http://www.baidu.com?name=zhang@xiao@jie&order=1"
解码：decodeURI("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")
结果："http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1"encodeURIComponent 和 decodeURIComponent
原理：对URL的组成部分进行个别编码，而不用于对整个URL进行编码
用于：对url上的参数编码
function param (data) {
let url = ''
for (var k in data) {
let value = data[k] !== undefined ? data[k] : ''
url += '&' + k + '=' + encodeURIComponent(value)
}
return url ? url.substring(1) : ''
}
编码：encodeURIComponent('http://www.baidu.com?name=zhang@xiao@jie&order=1')
结果："http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1"
解码：decodeURIComponent("http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1")
结果："http://www.baidu.com?name=zhang@xiao@jie&order=1"
