深入理解Base64编码原理

缄戈 · 3 天前

前言

上篇文章有涉及到Base64编码的内容，今天我们再来详细了解一下Base64的编码原理以及应用场景。
通过这篇文章你能够学习到：

什么是Base64？

Base64是一种用于传输8bit字节数据的编码方式，Base64 的字符集包含 64 个字符（A-Z、a-z、0-9、+、/）以及补位的=

⚠️需要注意的是它只是一种编码方式，并不是加密方式！！！因为对于Base64来讲，它没有密钥的概念，这意味着任何人都能轻松地将Base64编码的数据还原为原始字符。
尽管如此，不少人仍误将其当作加密工具来使用，这在具备基本技术知识的人眼中，无异于未加密处理...
为什么需要Base64编码？

Base64编码最初主要应用于邮件传输协议中，由于这些协议仅支持ASCII字符的传递，导致直接传输二进制文件（如图片、视频等）成为不可能。为了解决这一问题，Base64被设计出来，它能够将二进制文件内容转换成仅包含ASCII字符的编码形式，从而实现在邮件传输协议中安全、有效地传递二进制数据。

编码原理

Base64 编码的核心原理是将输入数据（多为二进制形式）转换成特定字符序列。具体步骤为：首先将输入数据分割成每三个字节（共24位）一组，接着将这24位分割为四个6位的块（因为Base64中每个字符代表6位二进制数据）。最后，通过查找表将这些6位块映射为相应的Base64字符。

base64字符集

上面我们提到标准的Base64一般包含64个字符再加一个补位的=

编码步骤

怎么理解这些步骤？
以南玖的南拼音为例
首先将字符对应的二进制位表示出来

刚好nan是3个字节，它们的二进制位正好组成了一个24位的二进制块
接着把这个二进制块分割成4个6位的数据块

最后通过查找Base64编码对照表，找到每个6位数据块对应的字符

最终nan编码为bmFu
由于nan的字节数正好是3的倍数，所以它不需要补位，编码后也就不会出现=
补位

如果字节数不是3的倍数，那么余数可能是1或2，所以补位也需要分两种情况。

比如宋的拼音song，余数为1

在这基础上最后还得补上2个=，最终song编码为c29uZw==

比如ab，余数为2

最终ab编码为YWI=
验证
在javaScript中可以调用btoa来进行base64编码

动手实现一下Base64编解码

base64编码

// 自定义base64编码
const customEncrypt = (str: string) => {
// base64字符集
const base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
// 将字符串转中的每个字符转换成8位二进制
const binaryStr = str.split('').map(char => {
const binary = char.charCodeAt(0).toString(2)
return binary.padStart(8, '0')
}).join('')
// 将二进制字符串按6位分割
const binaryArr = binaryStr.match(/.{1,6}/g) || []
// 如果最后一组不是6位的倍数，后面补0
const last = binaryArr[binaryArr.length - 1]
if(last?.length % 6 !== 0) {
binaryArr[binaryArr.length - 1] = last.padEnd(6, '0')
}
// 将6位的二进制转换成10进制
const decimalArr = binaryArr.map(binary => parseInt(binary, 2))
// 根据10进制的值获取base64字符
let base64Str = decimalArr.map(decimal => base64Chars[decimal]).join('')
// 补位
while(base64Str.length % 4 !== 0) {
base64Str += '='
}
return base64Str
}

复制代码

基本按照上面的编码步骤实现即可
验证

复制代码

base64解码

解码的过程基本就是与编码反过来

// 自定义base64解码
const customDecrypt = (str: string) => {
// base64字符集
const base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
// 将base64字符转换成10进制
const decimalArr = str.split('').map(char => base64Chars.indexOf(char))
// 将10进制转换成6位二进制
const binaryArr = decimalArr.map(decimal => decimal.toString(2).padStart(6, '0'))
// 将6位的二进制拼接
const binaryStr = binaryArr.join('')
// 将8位的二进制转换成字符
const charArr = binaryStr.match(/.{1,8}/g) || []
return charArr.map(binary => String.fromCharCode(parseInt(binary, 2))).join('')
}

复制代码

验证

复制代码

思考
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册