通过小实例讲解 base64 原理

最新推荐文章于 2024-06-02 01:48:03 发布

傲娇的koala

最新推荐文章于 2024-06-02 01:48:03 发布

阅读量223

点赞数

分类专栏：前端文章标签： js base64

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/xgangzai/article/details/115410239

版权

本文通过小实例详细解析Base64编码原理，从字符'鹅'出发，介绍编码过程，包括正常情况和异常处理（不足三字节的情况）。同时探讨了在JavaScript中使用Node的Buffer进行Base64编解码，并解释了为何阅读第三方库代码时可能会感到困惑，涉及Unicode到UTF-8的转换。最后推荐了相关参考资料以深入理解。

摘要由CSDN通过智能技术生成

作者：黄鹂

详解 base64 原理

案例：'鹅' --> 经过base64编码 --> 6bmF

那它怎么编码的呢?

以 '鹅' 字为例

base64 对应的编码表：

字符串转base64的转码规则：

第一步，将每三个字节作为一组，一共是24个二进制位。

第二步，将这24个二进制位分为四组，每个组有6个二进制位。

第三步，在每组前面加两个00，扩展成32个二进制位，即四个字节。

第四步，根据上表，得到扩展后的每个字节的对应符号，这就是Base64的编码值。

异常情况处理(如果字节不足三的情况)

二个字节的情况：将这二个字节的一共16个二进制位，按照上面的规则，转成三组，最后一组除了前面加两个0以外，后面也要加两个0。这样得到一个三位的Base64编码，再在末尾补上一个"="号。
一个字节的情况：将这一个字节的8个二进制位，按照上面的规则转成二组，最后一组除了前面加二个0以外，后面再加4个0。这样得到一个二位的Base64编码，再在末尾补上两个"="号。

使用 node 的 buffer 进行处理：

demo1.js

 const CHARTS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
 function encode(str) {
   let buf = Buffer.from(str);
   let result = '';
   let suffix = '';
   for (let b of buf) {
     result += b.toString(2).padStart(8, 0)
   }
   if ((result.length % 6) === 4) { // 一个字节的情况
     suffix = '=';
     result += '00';
   }
   if ((result.length % 6) === 2) { // 剩余两个字节的情况
     suffix = '==';
     result += '0000';
   }
   return result.match(/(\d{6})/g).map(val => parseI