前端 JavaScript 的 Base 64 编码与解码

先说一下什么是Base 64： Base64是一种基于64个可打印字符来表示二进制数据的表示方法。由于 2⁶=64，所以每6个比特为一个单元，对应某个可打印字符。3个字节有24个比特，对应于4个Base64单元，即3个字节可表示4个可打印字符。在Base64中的可打印字符包括字母A-Z、a-z、数字0-9，这样共有62个字符，此外两个可打印符号在不同的系统中而不同。

在 JavaScript 中，我们可以直接通过 window.btoa() 和 window.atob() 来进行字符串的 Base 64 的编/解码；

• window.btoa(string)：对指定的字符串(string)进行 base-64 编码；其中字符串中的每个字符都被视为一个二进制数据字节；所以如果指定字符串的码位超出 0x00 ~ 0xFF 范围，则会引发 InvalidCharacterError 异常；所以呢，通常要调用 btoa() 函数时先把字符串进行转义(escape)；
• window.atob(encodeData)：对用 base-64 编码过的字符串进行解码；

为了使用时兼容所有的字符，这里将btoa()和atob()封装到两个自定义函数中：

/**
 * 对指定字符串进行 base64 编码
 * @param {string} str 需要编码的源字符串
 */
function base64Encode(str) {
  const encodeStr = encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => String.fromCharCode(`0x${p1}`));

  return btoa(encodeStr);
}
// String.prototype.replace() 方法用来替换字符串的；
// 这里第二个参数是一个函数，参数 match 匹配的是正则匹配的子串，p1指的是匹配的第一个括号内的内容
// String.fromCharCode() 方法返回指定的Unicode值序列创建的字符串

/**
 * 对用 base-64 编码过的字符串进行解码
 * @param {string} str 需要解码的字符串
 */
function base64Decode(str) {
  const toArr = atob(str).split('');
  const resultArr = [];
  toArr.map((c) => {
    const toHex = c.charCodeAt(0).toString(16);
    resultArr.push(`%${('00' + toHex).slice(-2)}`);
  });

  return decodeURIComponent(resultArr.join(''));
}

测试一下：

// 我们先直接用 `btoa()` 测试汉字
> btoa('菜菜杰');
// 控制台直接输出错误啦:
Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

// 意思就是超出了范围，然后换成我们自定义的函数试试：
> base64Encode('菜菜杰');
"6I+c6I+c5p2w"

// 编码成功；那我们再解码试一下：
> base64Decode("6I+c6I+c5p2w");
"菜菜杰"

// OK，解码也成功啦！

• 扩展：

  • String.prototype.replace() 返回一个由替换值替换一些或所有匹配的模式后的新字符串。模式可以是一个字符串或者一个正则表达式, 替换值可以是一个字符串或者一个每次匹配都要调用的函数

• 参考资料：
  MDN Base64的编码与解码
  MDN replace
  维基百科Base 64