共计 7354 个字符，预计需要花费 19 分钟才能阅读完成。
一、为什么要编码解码
咱们都晓得 Http 协定中参数的传输是 ”key=value” 这种几乎对模式的，如果要传多个参数就须要用“&”符号对键值对进行宰割。
如 ”?name1=value1&name2=value2″，这样在服务端在收到这种字符串的时候，会用“&”宰割出每一个参数，而后再用“=”来宰割出参数值。
针对“name1=value1&name2=value2”咱们来说一下客户端到服务端的概念上解析过程:
上述字符串在计算机中用 ASCII 吗示意为：
text
6E616D6531 3D 76616C756531 26 6E616D6532 3D 76616C756532。6E616D6531：name1
3D：=
76616C756531：value1
26：&
6E616D6532：name2
3D：=
76616C756532：value2 服务端在接管到该数据后就能够遍历该字节流，首先一个字节一个字节的吃，当吃到 3D 这字节后，服务端就晓得后面吃得字节示意一个 key，再想后吃，如果遇到 26，阐明从方才吃的 3D 到 26 子节之间的是上一个 key 的 value，以此类推就能够解析出客户端传过来的参数。
当初有这样一个问题，如果我的参数值中就蕴含 = 或 & 这种特殊字符的时候该怎么办？
比如说“name1=value1”, 其中 value1 的值是“va&lu=e1”字符串，那么理论在传输过程中就会变成这样“name1=va&lu=e1”。咱们的本意是就只有一个键值对，然而服务端会解析成两个键值对，这样就产生了奇怪。
如何解决上述问题带来的歧义呢？解决的方法就是对参数进行 URL 编码
URL 编码只是简略的在特殊字符的各个字节前加上 %，例如，咱们对上述会产生奇怪的字符进行 URL 编码后后果：“name1=va%26lu%3D”，这样服务端会把紧跟在“%”后的字节当成一般的字节，就是不会把它当成各个参数或键值对的分隔符。
另外一个问题，就是为什么咱们要用 ASCII 传输，可不可以用别的编码？
当然能够用别的编码，你本人能够开发一套编码，而后本人解析。就像大部分国家都有本人的语言一样。那国家之间要交换，怎么办？用英语把，英语的应用范畴最广。
通常如果一样货色须要编码，阐明这样货色并不适宜传输。起因多种多样，如 Size 过大，蕴含隐衷数据，对于 Url 来说，之所以要进行编码，是因为 Url 中有些字符会引起歧义。
例如，Url 参数字符串中应用 key=value 键值对这样的模式来传参，键值对之间以 & 符号分隔，如 /s?q=abc&ie=utf-8。如果你的 value 字符串中蕴含了 = 或者 &，那么势必会造成接管 Url 的服务器解析谬误，因而必须将引起歧义的 & 和 = 符号进行本义，也就是对其进行编码。
又如，Url 的编码格局采纳的是 ASCII 码，而不是 Unicode，这也就是说你不能在 Url 中蕴含任何非 ASCII 字符，例如中文。否则如果客户端浏览器和服务端浏览器反对的字符集不同的状况下，中文可能会造成问题。
Url 编码的准则就是应用平安的字符（没有非凡用处或者非凡意义的可打印字符）去示意那些不平安的字符。
准备常识：URI 是对立资源标识的意思，通常咱们所说的 URL 只是 URI 的一种。典型 URL 的格局如下所示。上面提到的 URL 编码，实际上应该指的是 URI 编码。
> `foo:``//example.com:8042/over/there?name=ferret#nose`
>
> `_/ ______________/ ________/_________/ __/`
>
> `| | | | |`
>
> scheme authority path query fragment二、哪些字符须要编码
RFC3986 文档规定，Url 中只容许蕴含英文字母（a-zA-Z）、数字（0-9）、-_.~4 个特殊字符以及所有保留字符。RFC3986 文档对 Url 的编解码问题做出了具体的倡议，指出了哪些字符须要被编码才不会引起 Url 语义的转变，以及对为什么这些字符须要编码做出了相应的解释。
US-ASCII 字符集中没有对应的可打印字符：Url 中只容许应用可打印字符。US-ASCII 码中的 10-7F 字节全都示意控制字符，这些字符都不能间接呈现在 Url 中。同时，对于 80-FF 字节（ISO-8859-1），因为曾经超出了 US-ACII 定义的字节范畴，因而也不能够放在 Url 中。
保留字符：Url 能够划分成若干个组件，协定、主机、门路等。有一些字符（:/?#[]@）是用作分隔不同组件的。例如：冒号用于分隔协定和主机，/ 用于分隔主机和门路，? 用于分隔门路和查问参数，等等。
还有一些字符（!$&'()*+,;=）用于在每个组件中起到分隔作用的，如 = 用于示意查问参数中的键值对，& 符号用于分隔查问多个键值对。当组件中的一般数据蕴含这些特殊字符时，须要对其进行编码。
RFC3986 中指定了以下字符为保留字符：! * ' () ; : @ & = + $ , / ? # []不平安字符：还有一些字符，当他们间接放在 Url 中的时候，可能会引起解析程序的歧义。这些字符被视为不平安字符，起因有很多。
- 空格：Url 在传输的过程，或者用户在排版的过程，或者文本处理程序在解决 Url 的过程，都有可能引入无关紧要的空格，或者将那些有意义的空格给去掉。
- 引号以及 <>：引号和尖括号通常用于在一般文本中起到分隔 Url 的作用
- [#]：通常用于示意书签或者锚点
- %：百分号自身用作对不平安字符进行编码时应用的特殊字符，因而自身须要编码
- {}|^[]`~：某一些网关或者传输代理会篡改这些字符
须要留神的是 ：对于 Url 中的非法字符，编码和不编码是等价的，然而对于下面提到的这些字符，如果不通过编码，那么它们有可能会造成 Url 语义的不同。因而对于 Url 而言，只有一般英文字符和数字，特殊字符 %$-_.+!*'() 还有保留字符，能力呈现在未经编码的 Url 之中。其余字符均须要通过编码之后能力呈现在 Url 中。
这里打个比方：
http://baidu.com/ques='JS 的编码解码'下面除了中文，都是 url 认可呈现在外面的，所以咱们须要对中文进行翻译变为 url 认可的形式：
let a = "http://baidu.com/ques='JS 的编码解码 '"
console.log(encodeURI(a))打印后果：
http://baidu.com/ques='JS%E7%9A%84%E7%BC%96%E7%A0%81%E8%A7%A3%E7%A0%81'此时地址符没有中文，有的只是数字英文，这些是非法字符，” 单引号，. 小点，百分号 % 属于特殊字符，: / 属于保留字符都是 url 认可的。
其实不止中文须要编码，因为最后搞这些技术的，或者说技术最后技术牛逼的大多都是那些说英文的，所以除了英文和那些与英文一起经常呈现的特殊符号被 url 认可，其余的什么韩语、日语还有一些其余国家与英文不同本源的字符都须要编码成 url 认可的，也能够说编码成老外（讲英文的老外）看的懂的货色才是 url 认可的
三、如何对 Url 中的非法字符进行编码
Url 编码通常也被称为百分号编码（Url Encoding，also known as percent-encoding），是因为它的编码方式非常简单，应用 % 百分号加上两位的字符——0123456789ABCDEF——代表一个字节的十六进制模式。
Url 编码默认应用的字符集是 US-ASCII。例如 a 在 US-ASCII 码中对应的字节是 0x61，那么 Url 编码之后失去的就是 %61，咱们在地址栏上输出 http://g.cn/search?q=%61%62%63，实际上就等同于在 google 上搜寻 abc 了。又如 @符号在 ASCII 字符集中对应的字节为 0x40，通过 Url 编码之后失去的是 %40。
对于非 ASCII 字符，须要应用 ASCII 字符集的超集进行编码失去相应的字节，而后对每个字节执行百分号编码。对于 Unicode 字符，RFC 文档倡议应用 utf- 8 对其进行编码失去相应的字节，而后对每个字节执行百分号编码。如 ” 中文 ” 应用 UTF- 8 字符集失去的字节为 0xE4 0xB8 0xAD 0xE6 0x96 0x87，通过 Url 编码之后失去 ”%E4%B8%AD%E6%96%87″。
如果某个字节对应着 ASCII 字符集中的某个非保留字符，则此字节无需应用百分号示意。例如 ”Url 编码 ”，应用 UTF- 8 编码失去的字节是 0x55 0x72 0x6C 0xE7 0xBC 0x96 0xE7 0xA0 0x81，因为前三个字节对应着 ASCII 中的非保留字符 ”Url”，因而这三个字节能够用非保留字符 ”Url” 示意。最终的 Url 编码能够简化成 ”Url%E7%BC%96%E7%A0%81″，当然，如果你用 ”%55%72%6C%E7%BC%96%E7%A0%81″ 也是能够的。
因为历史的起因，有一些 Url 编码实现并不齐全遵循这样的准则，上面会提到。
1.Javascript 中的 escape, encodeURI 和 encodeURIComponent 的区别
JavaScript 中提供了 3 对函数用来对 Url 编码以失去非法的 Url，它们别离是 escape / unescape, encodeURI / decodeURI 和 encodeURIComponent / decodeURIComponent。因为解码和编码的过程是可逆的，因而这里只解释编码的过程。
这三个编码的函数——escape，encodeURI，encodeURIComponent——都是用于将不平安不非法的 Url 字符转换为非法的 Url 字符示意，它们有以下几个不同点。
平安字符不同：
上面列出了这三个函数的平安字符（即函数不会对这些字符进行编码）
- escape（69 个）：*/@+-._0-9a-zA-Z
- encodeURI（82 个）：!#$&'()*+,/:;=?@-._~0-9a-zA-Z
- encodeURIComponent（71 个）：!'()*-._~0-9a-zA-Z
兼容性不同：
escape 函数是从 Javascript 1.0 的时候就存在了，其余两个函数是在 Javascript 1.5 才引入的。然而因为 Javascript 1.5 曾经十分遍及了，所以实际上应用 encodeURI 和 encodeURIComponent 并不会有什么兼容性问题。
对 Unicode 字符的编码方式不同：
这三个函数对于 ASCII 字符的编码方式雷同，均是应用百分号 + 两位十六进制字符来示意。然而对于 Unicode 字符，escape 的编码方式是 %uxxxx，其中的 xxxx 是用来示意 unicode 字符的 4 位十六进制字符。
这种形式曾经被 W3C 废除了。然而在 ECMA-262 规范中依然保留着 escape 的这种编码语法。encodeURI 和 encodeURIComponent 则应用 UTF- 8 对非 ASCII 字符进行编码，而后再进行百分号编码。这是 RFC 举荐的。因而倡议尽可能的应用这两个函数代替 escape 进行编码。
实用场合不同：encodeURI 被用作对一个残缺的 URI 进行编码，而 encodeURIComponent 被用作对 URI 的一个组件进行编码。从下面提到的平安字符范畴表格来看，咱们会发现，encodeURIComponent 编码的字符范畴要比 encodeURI 的大。
咱们下面提到过，保留字符个别是用来分隔 URI 组件（一个 URI 能够被切割成多个组件，参考准备常识一节）或者子组件（如 URI 中查问参数的分隔符），如：号用于分隔 scheme 和主机，? 号用于分隔主机和门路。因为 encodeURI 操纵的对象是一个残缺的的 URI，这些字符在 URI 中原本就有非凡用处，因而这些保留字符不会被 encodeURI 编码，否则意义就变了。
组件外部有本人的数据表示格局，然而这些数据外部不能蕴含有分隔组件的保留字符，否则就会导致整个 URI 中组件的分隔凌乱。因而对于单个组件应用 encodeURIComponent，须要编码的字符就更多了。
表单提交
当 Html 的表单被提交时，每个表单域都会被 Url 编码之后才在被发送。因为历史的起因，表单应用的 Url 编码实现并不合乎最新的规范。
例如对于空格应用的编码并不是 %20，而是 + 号，如果表单应用的是 Post 办法提交的，咱们能够在 HTTP 头中看到有一个 Content-Type 的 header，值为 application/x-www-form-urlencoded。
大部分应用程序均能解决这种非标准实现的 Url 编码，然而在客户端 Javascript 中，并没有一个函数可能将 + 号解码成空格，只能本人写转换函数。还有，对于非 ASCII 字符，应用的编码字符集取决于以后文档应用的字符集。例如咱们在 Html 头部加上：
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />这样浏览器就会应用 gb2312 去渲染此文档（留神，当 HTML 文档中没有设置此 meta 标签，则浏览器会依据以后用户爱好去主动抉择字符集，用户也能够强制以后网站应用某个指定的字符集）。当提交表单时，Url 编码应用的字符集就是 gb2312。
之前在应用 Aptana（为什么专指 aptana 上面会提到）遇到一个很蛊惑的问题，就是在应用 encodeURI 的时候，发现它编码失去的后果和我想的很不一样。上面是我的示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<script type="text/javascript">
document.write(encodeURI("中文"));
</script>
</body>
</html>运行后果输入 %E6%B6%93%EE%85%9F%E6%9E%83。显然这并不是应用 UTF- 8 字符集进行 Url 编码失去的后果（在 Google 上搜寻 ” 中文 ”，Url 中显示的是 %E4%B8%AD%E6%96%87）。
所以我过后就很质疑，难道 encodeURI 还跟页面编码无关，然而我发现，失常状况下，如果你应用 gb2312 进行 Url 编码也不会失去这个后果的才是。起初终于被我发现，原来是页面文件存储应用的字符集和 Meta 标签中指定的字符集不统一导致的问题。
Aptana 的编辑器默认状况下应用 UTF- 8 字符集。也就是说这个文件理论存储的时候应用的是 UTF- 8 字符集。然而因为 Meta 标签中指定了 gb2312，这个时候，浏览器就会依照 gb2312 去解析这个文档，那么天然在 ” 中文 ” 这个字符串这里就会出错，因为 ” 中文 ” 字符串用 UTF- 8 编码过后失去的字节是 0xE4 0xB8 0xAD 0xE6 0x96 0x87，这 6 个字节又被浏览器拿 gb2312 去解码，那么就会失去另外三个汉字 ” 涓枃 ”（GBK 中一个汉字占两个字节），这三个汉字在传入 encodeURI 函数之后失去的后果就是 %E6%B6%93%EE%85%9F%E6%9E%83。因而，encodeURI 应用的还是 UTF-8，并不会受到页面字符集的影响。
对于蕴含中文的 Url 的解决问题，不同浏览器有不同的体现。例如对于 IE，如果你勾选了高级设置 ” 总是以 UTF- 8 发送 Url”，那么 Url 中的门路局部的中文会应用 UTF- 8 进行 Url 编码之后发送给服务端，而查问参数中的中文局部应用零碎默认字符集进行 Url 编码。为了保障最大互操作性，倡议所有放到 Url 中的组件全副显式指定某个字符集进行 Url 编码，而不依赖于浏览器的默认实现。
另外，很多 HTTP 监督工具或者浏览器地址栏等在显示 Url 的时候会主动将 Url 进行一次解码（应用 UTF- 8 字符集），这就是为什么当你在 Firefox 中拜访 Google 搜寻中文的时候，地址栏显示的 Url 蕴含中文的缘故。但实际上发送给服务端的原始 Url 还是通过编码的。你能够在地址栏上应用 Javascript 拜访 location.href 就可以看进去了。在钻研 Url 编解码的时候千万别被这些假象给蛊惑了。
然而因为历史起因，目前尚存在一些不规范的编码实现。例如对于~ 符号，尽管 RFC3986 文档规定，对于波浪符号~，不须要进行 Url 编码，然而还是有很多老的网关或者传输代理会进行编码
Javascript 语言用于编码的函数，一共有三个，最古老的一个就是 escape()。尽管这个函数当初曾经不提倡应用了，然而因为历史起因，很多中央还在应用它，所以有必要先从它讲起。
escape 和 unescape
实际上，escape()不能间接用于 URL 编码，它的真正作用是返回一个字符的 Unicode 编码值。比方 ” 春节 ” 的返回后果是 %u6625%u8282，也就是说在 Unicode 字符集中，” 春 ” 是第 6625 个（十六进制）字符，” 节 ” 是第 8282 个（十六进制）字符。
它的具体规定是，除了 ASCII 字母、数字、标点符号 ”@ * _ + – . /” 以外，对其余所有字符进行编码。在 u0000 到 u00ff 之间的符号被转成 %xx 的模式，其余符号被转成 %uxxxx 的模式。对应的解码函数是 unescape()。
还有两个中央须要留神。
首先，无论网页的原始编码是什么，一旦被 Javascript 编码，就都变为 unicode 字符。也就是说，Javascipt 函数的输出和输入，默认都是 Unicode 字符。这一点对上面两个函数也实用。
其次，escape()不对 ”+” 编码。然而咱们晓得，网页在提交表单的时候，如果有空格，则会被转化为 + 字符。服务器解决数据的时候，会把 + 号解决成空格。所以，应用的时候要小心。
