URL编码和Bsae64编码

我们经常会遇到所谓的URL编码（也叫百分号编码）和Base64编码。
      先说一下Bsae64编码。BASE64编码是一种常用的将二进制数据转换为64个可打印字符的编码，常用于在通常处理文本数据的场合，表示、传输、存储一些二进制数据。例如邮件系统的MIME协议等。这个协议的用途，是确保接收方在只能识别可见文本字符的情况下，能够接受和识别二进制数据。编码后数据长度大约为原长的135.1%。
      Base64编码是一种一对一的映射编码，其编码长度始终是3的倍数，不足3位，用=填充。所以，如果你看到一大堆乱七八糟的数据后面是=结尾的，大部分时候可以判定是Base64编码。由于Base64是映射编码，所以如果人为改变它的映射表，就可以作为一种简单的数据加密手段了。
       再说一下URL编码，这个编码通常用在网页地址（URL）的传递中，在URL解释中，部分字符例如/ +等，有着特定的意义，因此不能直接使用Base64编码来传输地址文本。这个编码也适用于统一资源标志符(URI)的编码。URI所允许的字符分作保留与未保留。保留字符是那些具有特殊含义的字符. 例如, 斜线字符用于URL (或者更一般的, URI)不同部分的分界符，未保留字符没有这些特殊含义。 URL编码把保留字符表示为%开头的特殊字符序列，所以又叫做百分号编码。
      2005年1月发布的RFC 3986，强制所有新的URI必须对未保留字符不加以百分号编码；其它字符要先转换为UTF-8字节序列, 然后对其字节值使用百分号编码。但是在目前的实际应用中，一个URL地址在做百分号编码之前，其未保留的字符序列不一定采用的是UTF-8编码，也有可能是ANSI编码。此外，部分早期的系统将空格编码成+，而不是标准推荐的%20，这是我们在实际应用中应该注意的事项。

一、URL编码和解码

1. escape 和 unescape

escape()不能直接用于URL编码，它的真正作用是返回一个字符的Unicode编码值。

采用unicode字符集对指定的字符串除0-255以外进行编码。所有的空格符、标点符号、特殊字符以及更多有联系非ASCII字符都将被转化成%xx格式的字符编码（xx等于该字符在字符集表里面的编码的16进制数字）。比如，空格符对应的编码是%20。
escape不编码字符有69个：*，+，-，.，/，@，_，0-9，a-z，A-Z。

escape()函数用于js对字符串进行编码，不常用。

　var url = "http://localhost:8080/pro?a=1&b=张三&c=aaa";
　　escape(url)  -->   http%3A//localhost%3A8080/pro%3Fa%3D1%26b%3D%u5F20%u4E09%26c%3Daaa

2. encodeURI 和 decodeURI

把URI字符串采用UTF-8编码格式转化成escape各式的字符串。
encodeURI不编码字符有82个：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z

 encodeURI()用于整个url编码

var url = "http://localhost:8080/pro?a=1&b=张三&c=aaa";
　　encodeURI(url)  -->   http://localhost:8080/pro?a=1&b=%E5%BC%A0%E4%B8%89&c=aaa 

3. encodeURIComponent 和 decodeURIComponent

与encodeURI()的区别是，它用于对URL的组成部分进行个别编码，而不用于对整个URL进行编码。

因此，"; / ? : @ & = + $ , #"，这些在encodeURI()中不被编码的符号，在encodeURIComponent()中统统会被编码。至于具体的编码方法，两者是一样。把URI字符串采用UTF-8编码格式转化成escape格式的字符串。

encodeURIComponent() 用于参数的传递，参数包含特殊字符可能会造成间断。

var url = "http://localhost:8080/pro?a=1&b=张三&c=aaa";
　　encodeURIComponent(url) --> http%3A%2F%2Flocalhost%3A8080%2Fpro%3Fa%3D1%26b%3D%E5%BC%A0%E4%B8%89%26c%3Daaa

 var paramUrl = "http://localhost:8080/aa?a=1&b=2&c=3";　　
    var url = "http://localhost:8080/pp?a=1&b="+ paramUrl;
    应该使用encodeURIComponent()进行转码　　
    encodeURIComponent(url) --> http://localhost:8080/pp?a=1&b=http%3A%2F%2Flocalhost%3A8080%2Faa%3Fa%3D1%26b%3D2%23%26c%3D3

原文链接：https://blog.csdn.net/WEB_CSDN_SHARE/article/details/79962996

一、Bsae64编码和解码

1. atob 和 btoa

从IE10+浏览器开始，所有浏览器就原生提供了Base64编码、解码方法，不仅可以用于浏览器环境，Service Worker环境也可以使用。
方法名就是 atob 和 btoa ，具体语法如下：

window.btoa('china is so nb') // 编码
"Y2hpbmEgaXMgc28gbmI="
window.atob("Y2hpbmEgaXMgc28gbmI=") // 解码
"china is so nb"

2.IE8/IE9的polyfill

当下，仍有不少PC项目还需要兼容IE9，所以，我们可以专门针对这些浏览器再引入一段ployfill脚本或者一个JS文件即可。

if IE] 表示所有IE浏览器，由于IE10+浏览器已经放弃了著名的IE条件注释的支持，Chrome等浏览器本身就不支持这个IE私有语法，因此，很天然的，上面一段script引入只在IE9-浏览器下有效。而我们本来就希望只IE8，IE9浏览器引入ployfill，于是正好完美衔接上。

也就是原生支持atob和btoa方法的浏览器认为就是一段无需关心的HTML注释，不支持atob和btoa的IE9及其以下浏览器则会加载我们的base64-polyfill.js，使浏览器也支持 window.btoa 和 window.atob 这个语法。

<!--[if IE]>
<script src="https://www.zhangxinxu.com/wordpress/2018/08/js-base64-atob-btoa-encode-decode/base64-polyfill.js"></script>
<![endif]-->

3.开源的base64.js 

开源的base64.js使用很简单，浏览器引入该JS文件，然后Base64编码这样：

Base64.encode('china is so nb'); // 编码
"Y2hpbmEgaXMgc28gbmI="

解码就调用 decode方法，如下：

Base64.decode("Y2hpbmEgaXMgc28gbmI="); // 解码
'china is so nb'

原文链接：https://www.jianshu.com/p/14437764eff3