❌

普通视图

发现新文章，点击刷新页面。
昨天以前首页

理解 Base64 编码原理及其 JavaScript 实现

✇掘金 前端
作者 red润
2025年1月17日 09:30

理解 Base64 编码原理及其 JavaScript 实现

image.png

注意：这里没有处理中文base64编码情况

什么是 Base64 编码？

Base64 编码是一种将二进制数据转换为可打印字符的编码方式。它将每三个字节（24 位）的二进制数据转换为四个字符，每个字符由64个字符集合中的一个表示。这使得数据可以通过文本协议传输（如电子邮件、HTTP 请求等），而不会出现二进制数据引起的字符编码问题。

Base64 编码的基本原理

Base64 的基本思想是将输入数据（通常是二进制数据）以特定的方式转换成字符。具体地，它将输入数据分为每三字节（24 位），然后将每个三字节块拆分成四个 6 位的块（因为每个 Base64 编码字符对应 6 位二进制数据）。这些 6 位的块通过查表得到对应的 Base64 字符。

Base64 字符集

Base64 的字符集包含 64 个字符，包括：

  • 大写字母：A-Z（26 个字符）
  • 小写字母：a-z（26 个字符）
  • 数字：0-9（10 个字符）
  • 特殊字符：+ 和 /（2 个字符）

这个字符集是标准的 Base64 编码字符集。

编码过程

  1. 将输入数据按 3 字节分组：每三个字节组成一个 24 位的二进制数据块。
  2. 将 24 位数据分成四个 6 位的数据块。
  3. 查找字符集中的对应字符：每 6 位对应字符集中的一个字符。
  4. 处理剩余的字节：如果输入数据的字节数不是 3 的倍数，那么需要在末尾添加 = 作为填充。

示例：

假设我们要对字符串 "Man" 进行 Base64 编码：

  1. 将 "Man" 转换为二进制数据：

    M -> 01001101
a -> 01100001
n -> 01101110

  2. 将这三个字符的二进制数据拼接起来，得到 24 位：

    010011010110000101101110

  3. 将这 24 位数据分成四个 6 位的数据块：

    010011 010110 000101 101110

  4. 查找字符集中的对应字符：

    010011 -> 19 -> T
010110 -> 22 -> W
000101 -> 5 -> F
101110 -> 46 -> u

  5. 最终结果就是 TWFu。

使用 JavaScript 实现 Base64 编码

现在，让我们用 JavaScript 来实现 Base64 编码的过程。JavaScript 提供了内置的 btoa() 和 atob() 函数，但这里我们将手动实现 Base64 编码和解码过程，以便更深入地理解其背后的原理。

Base64 编码实现

function base64Encode(input) {
    const base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
    
    // 将输入字符串转换为二进制字符串
    let binaryString = '';
    for (let i = 0; i < input.length; i++) {
        binaryString += input.charCodeAt(i).toString(2).padStart(8, '0'); // 每个字符转为8位二进制
    }

    // 按 6 位一组拆分
    const chunks = [];
    for (let i = 0; i < binaryString.length; i += 6) {
        chunks.push(binaryString.slice(i, i + 6));
    }

    // 如果最后一组少于 6 位，进行填充
    if (chunks[chunks.length - 1].length < 6) {
        chunks[chunks.length - 1] = chunks[chunks.length - 1].padEnd(6, '0');
    }

    // 查找对应的 Base64 字符
    let base64Encoded = chunks.map(chunk => {
        const index = parseInt(chunk, 2); // 将二进制转换为数字
        return base64Chars.charAt(index);
    }).join('');

    // 添加填充字符
    while (base64Encoded.length % 4 !== 0) {
        base64Encoded += '=';
    }

    return base64Encoded;
}

// 示例
const input = 'redrun base64';
const encoded = base64Encode(input);
console.log('Encoded:', encoded);// Encoded: cmVkcnVuIGJhc2U2NA==

Base64 解码实现

Base64 解码的过程与编码类似，只不过是将 Base64 字符转换回二进制数据，然后再转换为原始字符串。

function base64Decode(input) {
    const base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
    
    // 去除填充字符 '='
    input = input.replace(/=/g, '');

    // 将每个 Base64 字符转换为 6 位二进制
    let binaryString = '';
    for (let i = 0; i < input.length; i++) {
        const index = base64Chars.indexOf(input.charAt(i)); // 查找字符的位置
        binaryString += index.toString(2).padStart(6, '0'); // 将位置转换为 6 位二进制
    }

    // 每 8 位一个字节，转换为字符
    let decodedString = '';
    for (let i = 0; i < binaryString.length; i += 8) {
        const byte = binaryString.slice(i, i + 8);
        decodedString += String.fromCharCode(parseInt(byte, 2)); // 将二进制转为字符
    }

    return decodedString;
}

// 示例
const decoded = base64Decode(encoded);
console.log('Decoded:', decoded);// Decoded: redrun base64

完整的 Base64 编码解码演示

// 示例
const input = 'redrun base64';
const encoded = base64Encode(input);
console.log('Encoded:', encoded);// Encoded: cmVkcnVuIGJhc2U2NA==

// 示例
const decoded = base64Decode(encoded);
console.log('Decoded:', decoded);// Decoded: redrun base64

总结

  • Base64 编码 是一种常见的数据编码方式，广泛用于数据传输，尤其是在 HTTP 请求、电子邮件等场景中。
  • Base64 将每 3 个字节的二进制数据编码为 4 个字符，编码后的数据仅包含可打印字符，便于传输。
  • 在 JavaScript 中，可以通过自定义函数实现 Base64 编码和解码，了解其中的原理有助于更深入地掌握数据处理和编码技术。
❌
❌