--- theme: channing-cyan highlight: a11y-dark --- ## 前言本文收录在 **[前端基础进阶](https://juejin.cn/column/6979380367216082957)** 专栏，欢迎关注和收藏, 往期经典： * [【干货】私藏的这些高级工具函数，你拥有几个?](https://juejin.cn/post/6987166546502090788) 500+ star * [三千文字，也没写好 Function.prototype.call](https://juejin.cn/post/6978744007601946654) 200+ star * [那些你熟悉而又陌生的函数](https://juejin.cn/post/6977239278145241101) 200+ star * [这16种原生函数和属性的区别，你真的知道吗？精心收集，高级前端必备知识，快快打包带走](https://juejin.cn/post/6982742095375597575) 100+ star **收藏不star就是耍流氓！哈** ## 大纲方便移动端阅读： * Base64在前端的应用 * Base64数据编码起源 * Base64编码64的含义 * Base64编码优缺点 * 一些计算机和前端基础知识 * ASCII码， Unicode , UTF-8 * Base64编码和解码 * 其他的成熟方案 * 写在最后 ## Base64在前端的应用 Base64编码，你一定知道的，先来看看她在前端的一些常见应用：当然绝部分场景都是基于[Data URLs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) ### Canvas图片生成 canvas的 [toDataURL](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL)可以把canvas的画布内容转base64编码格式包含图片展示的 [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)。 ```js const ctx = canvasEl.getContext("2d"); // ...... other code const dataUrl = canvasEl.toDataURL(); // data:image/png;base64,iVBORw0KGgoAAAANSUhE......... ``` 你画我猜，新用户加入，要获取当前的最新的绘画界面，也可以通过Base64格式的消息传递。 ### 文件读取 FileReader的 [readAsDataURL](https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL)可以把上传的文件转为base64格式的data URI，比较常见的场景是用户头像的剪裁和上传。 ```js function readAsDataURL() { const fileEl = document.getElementById("inputFile"); return new Promise((resolve, reject) => { const fd = new FileReader(); fd.readAsDataURL(fileEl.files[0]); fd.onload = function () { resolve(fd.result); // data:image/png;base64,iVBORw0KGgoAAAA....... } fd.onerror = reject; }); } ``` ### jwt jwt由header, payload,signature三部分组成，前两个解码后，都是可以明文看见的。拿 [国服最强JWT生成Token做登录校验讲解，看完保证你学会！](https://blog.csdn.net/u011277123/article/details/78918390) 里面的token做测试。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/79fa98d2c98347689d599235de5ddc0a~tplv-k3u1fbpfcp-watermark.image) ### 网站图片和小图片 #### 移动端网站图标优化 ``` ``` 至于怎么获得这个值`data:,`的： ```html

``` #### 小图片这个就有很多场景了，比如img标签，背景图等 img标签： ```html

``` css背景图： ```css .bg{ background: url(data:image/png;base64,iVBORw0KGgoAAAA.......) } ``` ### 简单的数据加密当然这不是好方法，但是至少让你不好解读。 ```js const username = document.getElementById("username").vlaue; const password = document.getElementById("password").vlaue; const secureKey = "%%S%$%DS)_sdsdj_66"; const sPass = utf8_to_base64(password + secureKey); doLogin({ username, password: sPass }) ``` ### SourceMap 借用阮大神的一段代码, 注意mappings字段，这实际上就是bas64编码格式的内容，当然你直接去解，是会失败的。 ```js { 　　　　version : 3, 　　　　file: "out.js", 　　　　sourceRoot : "", 　　　　sources: ["foo.js", "bar.js"], 　　　　names: ["src", "maps", "are", "fun"], 　　　　mappings: "AAgBC,SAAQ,CAAEA" 　　} ``` 具体的实现请看官方的[base64-vlq.js](https://github.com/mozilla/source-map/blob/master/lib/base64-vlq.js)文件。 ### 混淆加密代码著名的代码混淆库， [javascript-obfuscator](https://github.com/javascript-obfuscator/javascript-obfuscator#javascript-obfuscator-options)，其也是有应用base64几码的，一起看看选项： [webpack-obfuscator](https://github.com/javascript-obfuscator/webpack-obfuscator)也是基于其封装的。 ```js --string-array-indexes-type '' (comma separated) [hexadecimal-number, hexadecimal-numeric-string] --string-array-encoding '' (comma separated) [none, base64, rc4] --string-array-index-shift --string-array-wrappers-count --string-array-wrappers-chained-calls ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6efd8949a8484d87aa133f0f51213018~tplv-k3u1fbpfcp-watermark.image) ### 其他 X.509公钥证书， github SSH key， mht文件，邮件附件等等，都有Base64的影子。 ## Base64数据编码起源早期邮件传输协议基于 ASCII 文本，对于诸如图片、视频等二进制文件处理并不好。 ASCII 主要用于显示**现代英文**，到目前为止只定义了 **128** 个字符，包含控制字符和可显示字符。为了解决上述问题，Base64 编码顺势而生。 Base64是编解码，主要的作用不在于安全性，而在于让内容能在各个网关间无错的传输，这才是Base64编码的核心作用。除了Base64数据编码，其实还有**Base32数据编码, Base16数据编码**，可以参见 **[RFC 4648](https://datatracker.ietf.org/doc/html/rfc4648)**。 ## Base64编码64的含义 64就是64个字符的意思。 base64对照表，借用 [Base64原理](https://juejin.cn/post/6844903698045370376)的一张图： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/58bd54e545664e52ace242d27216d84e~tplv-k3u1fbpfcp-watermark.image) 1. `A-Z` 26 2. `a-z` 26 3. `0-9` 10 4. `+ /` 2 `26 + 26 + 10 + 2` = `64` 当然还有一个字符`=`，这是填充字符，后面会提到，不属于64里面的范畴。对照表的**索引值**，注意一下，后面的base64编码和解码会用到。 ## Base64编码优缺点 ### 优点 1. 可以将二进制数据（比如图片）转化为可打印字符，方便传输数据 2. 对数据进行简单的加密，肉眼是安全的 3. 如果是在html或者css处理图片，可以减少http请求 ### 缺点 1. 内容编码后体积变大，至少1/3 因为是三字节变成四个字节，当只有一个字节的时候，也至少会变成三个字节。 2. 编码和解码需要额外工作量 ---------------------- 说完优缺点，回到正题：我们今天的重点是 uf8编码转Base64编码： **基本流程** > char => 码点 => utf-8编码 => base64编码在之前要解一下编码的知识, 了解编码知识，又要先了解一些计算机的基础知识。 ## 一些计算机和前端基础知识 ### 比特和字节 **比特又叫位**。在计算机的世界里，信息的表示方式只有 0 和 1, 其可以表示两种状态。一位二进制可以表示两状态， N位可以表示`2^N`种状态。一个字节`(Byte)`有8位`(Bit)` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e5f89053a314fa79be4194fa5b6d076~tplv-k3u1fbpfcp-watermark.image) 所以一个字节可以表示 `2^8` = 256种状态； ### 获得字符的 Unicode码点 [String.prototype.charCodeAt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt) 可以获取字符的码点，获取范围为`0` ~ `65535`。这个地方注意一下，关系到后面的utf-8字节数。 ```js "a".charCodeAt(0) // 97 "中".charCodeAt(0) // 20013 ``` ### 进制表示 1. `0b`开头，可以表示二进制注意`0b10000000`= 128 ,`0b11000000`=92，之后会用到. ```js 0b11111111 // 255 0b10000000 // 128 后面会用到 0b11000000 // 192 后面会用到 ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/25ba3d632c4e4e66ab662e4143683c73~tplv-k3u1fbpfcp-watermark.image) 2. `0x`开头，可以表示16进制 ```js 0x11111111 // 286331153 ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/40ada595a9c846bca205ec54d221f377~tplv-k3u1fbpfcp-watermark.image) `0o`开头可以表示8进制，就不多说了，本来不会涉及。 ### 进制转换 **10进制转其他进制** [Number.prototype.toString(radix)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString)可以把十进制转为其他进制。 ```js 100..toString(2) // 1100100 100..toString(16) // 64, 也等于 ox64 ``` **其他进制转为10进制** [parseInt(string, radix)](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt)可以把其他进制，转为10进制。 ```js parseInt("10000000", 2) // 128 parseInt("10",16) // 16 ``` 这里额外提一下一元操作符号`+`可以把字符串转为数字，后面也会用到,之前提到的`0b`,`0o`,`0x`这里都会生效。 ```js +"1000" // 1000 +"0b10000000" // 128 +"0o10" // 8 +"0x10" // 16 ``` ### 位移操作本文只涉及**右移**操作，就只讲右移，右移相当于除以2，如果是整数，**简单说是去低位**，移动几位去掉几位，其实和10进制除以10是一样的。 `64 >> 2 = 16` 我们一起看一下过程 ```js 0 1 0 0 0 0 0 0 64 ------------------- 0 1 0 0 0 0 | 0 0 16 ``` ### 一元 `&` 操作和一元`|`操作 **一元&** 当两者皆为1的时候，值为1。 **本文的作用可用来去高位**，具体看代码。 `3553 & 36` = `0b110111100001 & 0b111111` = `100001` 因为高位缺失，不可能都为1，故均为0, 而**低位相当于复制一遍而已**。 ```js 110111 100001 111111 ------------ 000000 100001 ``` **一元|** 当任意一个为1，就输出为1. **本文用来填补`0`**。比如，把3补成8位二进制 `3 | 256` = `11 | 100000000` = `100000011` `100000011.substring(1)`是不是就等于8位二进制呢`00000011` 具备了这些基本知识，我们就开始先了解编码相关的知识。 ## ASCII码， Unicode , UTF-8 ### ASCII码 ASCII码第一位始终是0, 那么实际可以表示的状态是 `2^7` = 128种状态。 ASCII 主要用于显示**现代英文**，到目前为止只定义了 **128** 个字符，包含控制字符和可显示字符。 * 0~31 之间的**ASCII码**常用于控制像打印机一样的外围设备 * 32~127 之间的**ASCII码**表示的符号，**在我们的键盘上都可以被找到** 完整的 ASCII码对应表，可以参见 **[基本ASCII码和扩展ASCII码](https://www.asciim.cn/)** 接下来是Unicode和UTF-8编码，请先记住这个重要的知识： - Unicode: **字符集** - UTF-8: **编码规则** ### Unicode Unicode 为世界上所有字符都分配了一个唯一的编号(**码点**)，这个编号范围从 0x000000 到 0x10FFFF (十六进制)，有 100 多万，每个字符都有一个唯一的 Unicode 编号，这个编号一般写成 16 进制，在前面加上 U+。例如：`掘`的 Unicode 是U+6398。 * U+0000到U+FFFF 最前面的65536个字符位，它的码点范围是从0一直到**2¹⁶-1**。所有最常见的字符都放在这里。 * U+010000一直到U+10FFFF 剩下的字符都放着这里，码点范围从U+010000一直到U+10FFFF。 Unicode有平面的概念，这里就不拓展了。 **Unicode只规定了每个字符的码点**，到底用什么样的字节序表示这个码点，就涉及到编码方法。 ### UTF-8 UTF-8 是互联网使用最多的一种 Unicode 的实现方式。还有 UTF-16（字符用两个字节或四个字节表示）和 UTF-32（字符用四个字节表示）等实现方式。 UTF-8 是它是一种变长的编码方式, 使用的字节个数从 **1 到 4 个不等**，最新的应该不止4个，这个1-4不等，是后面编码和解码的关键。 UTF-8的编码规则： 1. 对于只有一个字节的符号，字节的第一位设为`0`，后面 7 位为这个符号的 Unicode 码。此时，对**于英语字母UTF-8 编码和 ASCII 码是相同的。** 1. 对于 `n` 字节的符号（`n > 1`），第一个字节的前 `n` 位都设为 `1`，第 `n + 1` 位设为`0`，后面字节的前两位一律设为 `10`。剩下的没有提及的二进制位，全部为这个符号的 Unicode 码，如下表所示： | Unicode 码点范围（十六进制）| 十进制范围 | UTF-8 编码方式（二进制） | 字节数 | | --------------------- | ----------------------------------- | ---- | --- | | `0000 0000 ~ 0000 007F` | `0 ~ 127` |`0xxxxxxx` | 1 | | `0000 0080 ~ 0000 07FF` | `128 ~ 2047` |`110xxxxx 10xxxxxx` | 2 | | `0000 0800 ~ 0000 FFFF` | `2048 ~ 65535` |`1110xxxx 10xxxxxx 10xxxxxx` | 3 | | `0001 0000 ~ 0010 FFFF` | `65536 ~ 1114111` |`11110xxx 10xxxxxx 10xxxxxx 10xxxxxx` | 4 | 我们可能没见过字节数为`2`或者为`4`的字符，字节数为`2`的可以去[Unicode对应表](http://titus.uni-frankfurt.de/unicode/unitestx.htm)这里找，而等于`4`的可以去这看看[Unicode® 13.0 Versioned Charts Index](https://www.unicode.org/charts/PDF/Unicode-13.0/) 下面这些码点都处于`0000 0080 ~ 0000 07FF`, utf-8编码需要2个字节 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7bba7b751658447c810cc09f5875639f~tplv-k3u1fbpfcp-watermark.image) 下面这些码点都处于`0001 0000 ~ 0010 FFFF`, utf-8编码需要4个字节 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5e5f540dc41c45e69c6a6697379def39~tplv-k3u1fbpfcp-watermark.image) 可能这里光说不好理解，我们分别以英文字符`a`和中文字符`掘`来讲解一下：为了验证结果，可以去 [Convert UTF8 to Binary Bits - Online UTF8 Tools](https://onlineutf8tools.com/convert-utf8-to-binary) #### 英文字符`a` 1. 先获得其码点，`"a".charCodeAt(0)` 等于 `97` 2. 对照表格， 0~127, 需`1`个字节 3. `97..toString(2)` 得到编码 `1100001` 4. 根据格式`0xxxxxxx`进行填充，最终结果 ``` 01100001 ``` #### 中文字符`掘` 1. 先获得其码点，`"掘".charCodeAt(0)` 等于 `25496` 2. 对照表格，2048 ~ 65535 需`3`个字节 3. `25496..toString(2)` 得到编码 `110 001110 011000` 4. 根绝格式`1110xxxx 10xxxxxx 10xxxxxx`进行填充, 最终结果如下 ``` 11100110 10001110 10011000 ``` [Convert UTF8 to Binary Bits - Online UTF8 Tools](https://onlineutf8tools.com/convert-utf8-to-binary)执行结果：完全匹配 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3b687a1fb6cc4fba9261d69e7fea17bc~tplv-k3u1fbpfcp-watermark.image) #### 抽象把字符转为utf8格式二进制的方法基于上面的表格和转换过程，我们抽象一个方法，这个方法在**之后的Base64编码和解码至关重要**：先看看功能，覆盖utf8编码1-3字节范围 ```js console.log(to_binary("A")) // 11100001 console.log(to_binary("س")) // 1101100010110011 console.log(to_binary("掘")) // 111001101000111010011000 ``` 方法如下 ```js function to_binary(str) { const string = str.replace(/\r\n/g, "\n"); let result = ""; let code; for (var n = 0; n < string.length; n++) { //获取麻点 code = str.charCodeAt(n); if (code < 0x007F) { // 1个字节 // 0000 0000 ~ 0000 007F 0 ~ 127 1个字节 // (code | 0b100000000).toString(2).slice(1) result += (code).toString(2).padStart(8, '0'); } else if ((code > 0x0080) && (code < 0x07FF)) { // 0000 0080 ~ 0000 07FF 128 ~ 2047 2个字节 // 0x0080 的二进制为 10000000 ，8位，所以大于0x0080的，至少有8位 // 格式 110xxxxx 10xxxxxx // 高位 110xxxxx result += ((code >> 6) | 0b11000000).toString(2); // 低位 10xxxxxx result += ((code & 0b111111) | 0b10000000).toString(2); } else if (code > 0x0800 && code < 0xFFFF) { // 0000 0800 ~ 0000 FFFF 2048 ~ 65535 3个字节 // 0x0800的二进制为 1000 00000000，12位，所以大于0x0800的，至少有12位 // 格式 1110xxxx 10xxxxxx 10xxxxxx // 最高位 1110xxxx result += ((code >> 12) | 0b11100000).toString(2); // 第二位 10xxxxxx result += (((code >> 6) & 0b111111) | 0b10000000).toString(2); // 第三位 10xxxxxx result += ((code & 0b111111) | 0b10000000).toString(2); } else { // 0001 0000 ~ 0010 FFFF 65536 ~ 1114111 4个字节 // https://www.unicode.org/charts/PDF/Unicode-13.0/U130-2F800.pdf throw new TypeError("暂不支持码点大于65535的字符") } } return result; } ``` 方法中有三个地方稍微难理解一点，我们一起来解读一下： 1. **二字节 `(code >> 6) | 0b11000000`** 其作用是生成高位二进制。我们以实际的一个栗子来讲解，以`س`为例，其码点为`0x633`,在`0000 0080 ~ 0000 07FF`之间，占两个字节，在其二进制编码为`11 000110011` ，其填充格式如下，低位要用**6位**。 ```js 110xxxxx 10xxxxxx ``` 为了方便观察，我们把 `11 000110011` 重新调整一下 ` 11000 110011 `。 **(code >> 6) 等于 00110011 >> 6，右移6位，直接干掉低6位**。为什么是6呢，因为低位需要6位，右移动6位后，剩下的就是用于高位操作的位了。 ```js 11000000 11000 | 110011 -------------- 11011000 ``` 2. **二字节 `(code & 0b111111) | 0b10000000`** 作用，用于生成低位二进制。以`س`为例，`11000 110011`, 填充格式 ```js 110xxxxx 10xxxxxx ``` `(code & 0b111111)这步的操作是为了干掉6位以上的高位，仅仅保留低6位`。一元`&`符号，两边都是1的时候才会是1，妙啊。 ```js 11000 110011 111111 ------------------ 110011 ``` 接着进行 `| 0b10000000`, 主要是按照格式`10xxxxxx`进行位数填补, 让其满8位。 ```js 11000 110011 111111 (code & 0b111111) ------------------ 110011 10 000000 (code & 0b111111) | 0b10000000 ------------------- 10 110011 ``` ## Base64编码和解码 ### utf-8转Base64编码规则 1. 获取每个字符的Unicode码，转为utf-8编码 2. **三个字节**作为一组，一共是24个二进制位字节数不能被 3 整除，用0字节值在末尾补足 3. 按照**6个比特位**一组分组，前两位补0，凑齐8位 4. 计算每个分组的数值 5. 以第`4`步的值作为索引，去ASCII码表找对应的值 6. 替换第`2`步**添加字节数个数**的 `=` 比如第`2`添加了2个字节，后面是2个`=` 以大`掘A`为例, 我们通过上面的`utf8_to_binary`方法得到utf8的编码 `11100110 10001110 10011000 11000001`, 其字节数不能被3整除，后面填补 ``` 11100110 10001110 10011000 01000001 -------- 00000000 00000000 ``` 6位一组分为四组，高位补`0`, 用`|` 分割一下填补的。 ``` 00 | 111001 => 57 => 5 00 | 101000 => 40 => o 00 | 111010 => 58 => 6 00 | 011000 => 24 => Y 00 | 110000 => 16 => Q 00 | 010000 => 16 => Q 00 | 000000 => => = 00 | 000000 => => = ``` 结果是：`5o6YQQ==`，完美。 ### utf-8转Base64编码规则代码实现基于上面的`to_binary`方法和base64的转换规则，就很简单啦：先看看执行效果，very good, 和 **[base64.us](https://base64.us/)** 结果完全一致。 ```js console.log(utf8_to_base64("a")); // YQ== console.log(utf8_to_base64("Ȃ")); // yII= console.log(utf8_to_base64("中国人")); // 5Lit5Zu95Lq6 console.log(utf8_to_base64("Coding Writing 好文召集令｜后端、大前端双赛道投稿，2万元奖池等你挑战！")); //Q29kaW5nIFdyaXRpbmcg5aW95paH5Y+s6ZuG5Luk772c5ZCO56uv44CB5aSn5YmN56uv5Y+M6LWb6YGT5oqV56i/77yMMuS4h+WFg+WlluaxoOetieS9oOaMkeaImO+8gQ== ``` 完整代码如下： ```typescript const BASE64_CHARTS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/' function utf8_to_base64(str: string) { let binaryStr = to_binary(str); const len = binaryStr.length; // 需要填补的=的数量 let paddingCharLen = len % 24 !== 0 ? (24 - len % 24) / 8 : 0; //6个一组 const groups = []; for (let i = 0; i < binaryStr.length; i += 6) { let g = binaryStr.slice(i, i + 6); if (g.length < 6) { g = g.padEnd(6, "0"); } groups.push(g); } // 求值 let base64Str = groups.reduce((b64str, cur) => { b64str += BASE64_CHARTS[+`0b${cur}`] return b64str }, ""); // 填充= if (paddingCharLen > 0) { base64Str += paddingCharLen > 1 ? "==" : "="; } return base64Str; } ``` 至于解码，是其逆过程，留给大家去实现吧。 ## 其他的成熟方案 1. 当然是基于已有的 `btoa`和`atob`, 但是 unescape是不被推荐使用的方法 ```js function utf8_to_b64( str ) { return window.btoa(unescape(encodeURIComponent( str ))); } function b64_to_utf8( str ) { return decodeURIComponent(escape(window.atob( str ))); } ``` // Usage: utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU=" b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode" 2. MDN的 [rewriting `atob()` and `btoa()` using `TypedArray`s and UTF-8](https://developer.mozilla.org/en-US/docs/Glossary/Base64#solution_2_%E2%80%93_rewriting_atob_and_btoa_using_typedarrays_and_utf-8 "Permalink to Solution #2 – rewriting atob() and btoa() using TypedArrays and UTF-8") 其支持到6字节，但是可读性并不好。 3. 第三方库 [base64-js](https://www.npmjs.com/package/base64-js) 与 [js-base64](https://www.npmjs.com/package/js-base64)都是周下载量过百万的库。虽然有那么多成熟的，但是我们理解和自己实现，才能更明白Base64的编码原理。 ## 额外补充一点 1. 编码关系图借用[[你真的了解 Unicode 和 UTF-8 吗？](https://www.cnblogs.com/reycg-blog/p/10021658.html)]一张图： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/68d76d951cff42db802cb7a5514e5118~tplv-k3u1fbpfcp-watermark.image) 2. [DOMString](https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString) 是`utf-16`编码 ## 写在最后写作不易，你的三连（一赞，一评，一收藏），就是我最大的动力。点赞**过百**，再写篇浏览器，DOM, JS等关于编码的文章。 ## 引用 > [Version-Specific Charts](https://www.unicode.org/charts/About.html) > [Unicode13.0.0](https://www.unicode.org/versions/Unicode13.0.0) > [Unicode® 13.0 Versioned Charts Index](https://www.unicode.org/charts/PDF/Unicode-13.0/) > [RFC 4648 \| The Base16, Base32, and Base64 Data Encodings](https://datatracker.ietf.org/doc/html/rfc4648) > [Base64 encoding and decoding](https://developer.mozilla.org/en-US/docs/Glossary/Base64) > [字符编码笔记：ASCII，Unicode 和 UTF-8](http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html?20110621174302) > [Unicode与JavaScript详解](http://www.ruanyifeng.com/blog/2014/12/unicode.html) > [Base64 编码入门教程](https://juejin.cn/post/6898104998547161096) > [Base64原理](https://juejin.cn/post/6844903698045370376) > [详解base64原理](https://juejin.cn/post/6946169611461066789) > [一文读懂base64编码](https://juejin.cn/post/6844904197519835150) > [JS 中关于 base64 的一些事](https://juejin.cn/post/6844903838286102536) > [Base64 的原理、实现及应用](https://juejin.cn/post/6844903663459106829) > [图片与Base64换算关系](https://juejin.cn/post/6913814643618086925) > [[你真的了解 Unicode 和 UTF-8 吗？](https://www.cnblogs.com/reycg-blog/p/10021658.html)] > [Unicode中UTF-8与UTF-16编码详解](https://juejin.cn/post/6844903590155272199) > [Unicode对应表](http://titus.uni-frankfurt.de/unicode/unitestx.htm) > [JavaScript Source Map 详解](https://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html)