URL编码和Base64编码

---

前言

数据操作过程中，经常涉及到编码与解码等相关操作，如web请求时会对url进行编码，其中的中文等字符会转义为其他内容；中文字符串数据传输时，会将其使用base64编码并在接收后解码，以避免乱码的出现。

---

一、URL编码

1. URLEncoder和URLDecoder

URLDecoder 和 URLEncoder 用于普通字符串 和 application/x-www-form-urlencoded MIME 字符串之间的相互转换。

当URL地址里包含非西欧字符的字符串时，浏览器会将这些非西欧字符串转换成application/x-www-form-urlencoded MIME 字符串。

• URLDecoder类包含一个decode(String s,String enc)静态方法，它可以将application/x-www-form-urlencoded MIME字符串转成普通字符串；
• URLEncoder类包含一个encode(String s,String enc)静态方法，它可以将普通字符串转换成application/x-www-form-urlencoded MIME字符串。

2. URL编码规则

对 String 编码时，使用以下规则：

• 字母、数字和字符， “a” 到 “z”、”A” 到 “Z” 和 “0” 到 “9” 保持不变；
• 特殊字符 “.”、”-“、”*” 和 “_” 保持不变；
• 空格字符 ” ” 转换为一个加号 “+”；
• url编码时会将 + 编码成空格；
• 除此之外，所有的其他字符都是不安全的，会变成以 % 开头的字符；
• 对于一个中文，会使用3个字节表示 由于以上限制内容，因此URL编码是一种限制性编码方式。

3. Javascript 原生提供三对 Url编码 的函数

Javascript中提供了3对函数用来将不安全不合法的Url字符转换为合法的Url字符表示 ，它们分别是：

• escape / unescape
• encodeURI / decodeURI
• encodeURIComponent / decodeURIComponent

由于解码和编码的过程是可逆的，因此这里只解释编码的过程。

3.1 三对函数的不同点

（1） 安全字符不同

下面列出了这三个函数的安全字符（即函数不会对这些字符进行编码）：

• escape（69个）：*/@±._0-9a-zA-Z
• encodeURI（82个）：!#$&'()*+,/:;=?@-._~0-9a-zA-Z
• encodeURIComponent（71个）：!'()*-._~0-9a-zA-Z

（2） 兼容性不同

escape函数是从Javascript 1.0的时候就存在了，其他两个函数是在Javascript 1.5才引入的。但是由于Javascript 1.5已经非常普及了，所以实际上使用encodeURI和encodeURIComponent并不会有什么兼容性问题。

（3） 对Unicode字符的编码方式不同

escape 和 encodeURI / encodeURIComponent 不是同一类。

简单来说，escape 是对字符串进行编码， 而另外两种是对URL进行编码，作用是让它们在所有电脑上可读。编码之后的效果是%XX或者%uXXXX这种形式。其中 ASCII字母，数字 ，@*/+ 这几个字符不会被编码，其余的都会。

注意：当需要对URL编码时，请忘记这个方法，这个方法是针对字符串使用的，不适用于URL。

（4） 适用场合不同

encodeURI 被用作对一个完整的URI进行编码，而 encodeURIComponent 被用作对URI的一个组件进行编码。

对URL编码是常见的事，所以这两个方法应该是实际中要特别注意的。它们都是编码URL，唯一区别就是 编码的字符范围：

• encodeURI 方法不会对下列字符编码：ASCII字母 ，数字 ， ~!@#$&*()=:/,;?+’
• encodeURIComponent 方法不会对下列字符编码 ：ASCII字母 ，数字 ， ~!*()’

所以 encodeURIComponent 比 encodeURI 编码的范围更大。

实际例子来说，encodeURIComponent 会把 http:// 编码成 http%3A%2F%2F ，而encodeURI 却不会。

总的来说，最重要的是什么场合应该用什么方法：

1. 如果只是编码 字符串，和URL没有关系，那么使用 escape；
2. 如果需要编码 整个URL，并需要使用这个URL，那么用 encodeURI；

例如：

 encodeURI("http://www.cnblogs.com/hl/some other thing");

编码后会变为：

"http://www.cnblogs.com/hl/some%20other%20thing";

其中，空格被编码成了%20。但是如果你用了encodeURIComponent，那么结果变为 “http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2Fsome%20other%20thing”
看到区别了嘛？连 “/” 都被编码了，整个URL已经没法用了。

3. 如果需要编码 URL中的参数，使用 encodeURIComponent 是最好方法。

// param为参数
let param = "http://www.cnblogs.com/season-huang/"; param = encodeURIComponent(param);let url = "http://www.cnblogs.com?next=" + param;
console.log(url);
// "http://www.cnblogs.com?next=http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2F

看到了吧，参数中的 “/” 可以编码，如果用 encodeURI 肯定要出问题，因为后面的 / 是需要编码的。

二、Base64编码

1. Base64编码规则

Base64是一种将二进制数据用文本表示的编码算法，它只包含64个字符，A - Z，a - z，0 - 9，+ ，/ ， 对应索引为 0 - 63。

• base64编码时选取3个字节为一组，进行重新编排，将原来8个bit为一个字节改为每6个bit作为新的字节，3个字节编码形成4个字节；
• 如果字符字节长度不是3的倍数，会使用\x00字节补足，再根据补足的数量添加等量的=标识；
• 如43yW56CB5rWL6K+HUQ==代表，编码时补足两个\x00，编码后增加两个+；

2. Base64编码使用

如果需要将包含中文的utf-8编码字符转换称ASCII码，则需要使用Base64作为中间编码来保证字符数据的稳定。

• 编码，要将utl-8字符使用base64编码，得到结果后将字符转成ASCII编码；
• 解码，将ASCII编码解析为Base64字符串，使用Base64解码方法解析为utf-8的结果数据；
• 除了针对字符串外，Base64还可以对不太大的文件进行编码，使用字符序列表示二进制文件；

3. JavaScript 原生提供两个 Base64 相关的方法

• btoa()：任意值转为 Base64 编码；
• atob()：Base64 编码转为原来的值；

注意，这两个方法不适合非 ASCII 码的字符，会报错。
要将非 ASCII 码字符转为 Base64 编码，必须中间插入一个转码环节，再使用这两个方法。

function b64Encode(str) {return btoa(encodeURIComponent(str));
}function b64Decode(str) {return decodeURIComponent(atob(str));
}b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"

---

总结

参考链接：
URL编码和Base64编码
Web开发须知：URL编码与解码
escape,encodeURI,encodeURIComponent有什么区别?