聊聊编码那些事顺带实现base64

jiezi

5 年前

进制间的转换
- 对任意进制的数进行任意进制转换
- 将任意进制数转换为十进制数
- 几道关于 parseInt 的面试题
编码发展历史
base64 编码
- 为什么需要 base64
如何实现 base64
- 读取 buffer 转为 json 对象
- 将 10 进制转为 2 进制
- 将 2 进制拼一起 3 * 8 然后分隔成 4 *6
- 然后将 2 进制转成 10 进制
- base64 码
- 取到每一个 base64 码
小结

日常工作中，频繁的使用 base64 取代小图标，以便减少 HTTP 请求进而达到性能优化的目的。基于此来聊聊编码的发展、为什么需要 base64 以及如何实现 base64。此文章首发于聊聊编码那些事，顺带实现 base64 转载请注明来源。

一些前置知识，也涉及到一些经典的面试小题。

Number.prototype.toString(radix)

parseInt(string, radix)

说到 parseInt，不得不提到一个很有意思的面试题

// 会输出什么？[1, 2, 3].map(parseInt)
// => 1, NaN, NaN

map方法第一个参数为函数，函数有三个参数，array.map((item, index, array) => {...})

实际上相当于

function fn (item, index) {return parseInt(item, index)
}
[1, 2, 3].map(fn)
// parseInt 迭代过程相当于如下
// parseInt(1, 0) => 1
// parseInt(2, 1) => NaN
// parseInt(3, 2) => NaN

再来看一个类似的面试题

// 会输出什么？'1 2 3'.replace(/\d/g, parseInt)
// => 1, NaN, 3

replace方法第二个参数若是一个函数，函数会有若干个参数。第一个为匹配模式的字符串；第二个为与模式中子表达式匹配的字符串，可以有零个或多个这样的参数。

实际上相当于如下

function fn (...args) {
  // 只会取前两个参数
  return parseInt(args[0], args[1])
}
'1 2 3'.replace(/\d/g, fn)
// parseInt 迭代过程相当于如下
// parseInt('1', 0) => 1
// parseInt('2', 2) => NaN
// parseInt('3', 4) => 3

其实在 mdn 中对 parseInt/map/replace 已经讲解的很详细，期望大家在工作之余不要太过浮躁，别做伸手党，静下心来啃一下文档并多做实践，很多面试题自然会迎刃而解。

现在的标准，有如下特点

UTF-8 就是在互联网上使用最广的一种 Unicode 的实现方式
UTF- 8 就是每次以 8 个位为单位传输数据
而 UTF-16 就是每次 16 个位
UTF-8 最大的一个特点，就是它是一种变长的编码方式
Unicode 一个中文字符占 2 个字节，而 UTF-8 一个中文字符占 3 个字节
UTF-8 是 Unicode 的实现方式之一

在开发时，经常会有一些小图标图片，每一个图片都会有一次 HTTP 请求，由于 浏览器对同一个域名的并发数量有限制，所以我们应该尽可能减少 HTTP 请求个数。

本文主要讲解编码相关，那就只讲解从编码入手如何去减少 HTTP 请求。

在计算机内部，任何信息最终都是使用一系列二进制存储，图片也不例外。

而且在 img 标签的 src 属性后跟上一个 base64 字符，如果该字符有效，那么会正常显示图片。

以下涉及的所有代码均在仓库中，感兴趣的可以自取。

首先准备一个 2.txt 文件。

冯兰兰啊我说今晚月色这么美，你说是的。

case.js 代码

const fs = require('mz/fs')
const path = require('path')

// 读取成 buffer 对象
async function read2JSON () {let ret = await fs.readFile(path.resolve(__dirname, '2.txt'))
   console.log(ret.toJSON())
   return ret.toJSON()}
read2JSON()
// => {type: 'Buffer', data: [ 229, 134, 175, 229...] }

上面的依赖 mz/fs 已经将 fs 都包装成promise，所以我们能写的更像同步。

readFile函数如果第二个参数没有指定会读取成一个 buffer 流，是由一个个 16 进制 数组合在一起的。

buffer.toJSON 可以将一个 buffer 流转为一个 json 对象，十六进制也会被转十进制。如上输出所示。

十进制转为二进制可以通过 Number.toString(2) 方法

// 将 10 进制转为 2 进制
async function data2b () {let data = await read2JSON()
  let ret = []
  data.data.forEach(item => {ret.push(item.toString(2))
  })
  console.log(ret)
  return ret
}
data2b()
// => ['11100101', '10000110', '10101111', '11100101'...]

一个汉字在 UTF-8 规范中由三个字节组成，一个字节由 8 个二进制物理位构成。所以一个汉字实际占用内存 3*8，base64 中我们实际需要 6 个物理位表示一个字节即2**6，所以做重新分割4*6。

async function split () {let data = await data2b()
  let dataStr = data.join('')
  let ret = []

  let splitUnit = 6
  let flag = 0
  while (flag < dataStr.length) {ret.push(dataStr.substr(flag, splitUnit))
    flag = flag + splitUnit
  }
  console.log(ret)
  return ret
}
split()
// => ['111001', '011000', '011010', '101111'...]

二进制转为十进制可以通过 parseInt(string, 2) 方法

async function data20 () {let data = await split()
  let ret = data.map(item => {return parseInt(item, 2)
  })
  console.log(ret)
  return ret
}
data20()
// => [57, 24, 26, 47, 57, 24, 22, 48, 57, 24, 22, 48]

base64中的 64 实际上是根据 2**6 所来，表示则由 大写字母、小写字母、数字、+/构成。

const lowerCases = 'abcdefghijklmnopqrstuvwxyz'
const numbers = '0123456789'
const base64lib = `${lowerCases.toUpperCase()}${lowerCases}${numbers}+/`
console.log(base64lib)
// => ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/

然后我们则可以取到每一个 base64 码

async function main () {let data = await data20()
  let ret = []
  data.forEach(item => {ret.push(base64lib[item])
  })
  console.log(ret.join(''))
  return ret.join()}

main()
// => 5Yav5YWw5YWw5ZWK5oiR6K+05LuK5pma5pyI6Imy6L+Z5LmI576O77yM5L2g6K+05piv55qE44CC

我们可以前往 base64 在线转码解码进行验证。

对以上思路进行代码简化

const CHARTS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
function transfer (str) {let buf = Buffer.from(str)
  let result = ''
  for(let b of buf){result += b.toString(2)
  }
  return result.match(/(\d{6})/g).map(val => parseInt(val, 2)).map(val => CHARTS[val]).join('')
}
let fl = transfer('冯')
console.log(fl) // => 5Yav

如上我们可以实现将中文转为 base64，同理我们也可以转换图片。

async function read2JSON () {// let ret = await fs.readFile(path.resolve(__dirname, '2.txt'))
  // 读取图片
  let ret = await fs.readFile(path.resolve(__dirname, '../assets/encoding-base64-example.png'))
  console.log(ret.toJSON())
  return ret.toJSON()}

特别的： 由于将 2 进制拼一起 3 * 8 然后分隔成 4 *6，原来存储一个汉字需要三个字节，现在需要四个字节存储，所以转换为 base64 后会比之前大3/1。

下面笑脸图片则是由img 的 src 属性展示的，不过本文并没有实现图片转 base64，因为其逻辑较为复杂，但是本文讲解了大致思路，感兴趣的可再做深究。

聊聊编码那些事顺带实现base64

目录

前言

进制间的转换

对任意进制的数进行任意进制转换

将任意进制数转换为十进制数

几道关于 parseInt 的面试题

编码发展历史

ASCII

GBK2312

GBK

GB18030/DBCS

Unicode

UTF-8

base64 编码

为什么需要 base64

如何实现 base64

读取 buffer 转为 json 对象

将 10 进制转为 2 进制

将 2 进制拼一起 3 * 8 然后分隔成 4 *6

然后将 2 进制转成 10 进制

base64 码

取到每一个 base64 码

简化代码

小结