js对url进行编码和解码

为什么要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

1. 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")
   结果："张"

2. 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"

3. 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"