在 JavaScript 中，atob 和 btoa 是两个用于Base64 编码和解码的内置函数，分别用于将 Base64 编码的字符串解码为原始字符串，以及将原始字符串编码为 Base64 格式。

首先说一说这两个函数的名称来源吧。

btoa: 表示 "binary to ASCII"（二进制到 ASCII）。

它的作用是将二进制数据（或字符串）编码为 Base64 格式，Base64 是一种用 ASCII 字符表示二进制数据的方式。因此，btoa 的命名反映了将任意二进制数据转换为 ASCII 字符集（A-Z、a-z、0-9、+、/）的过程。

atob: 表示 "ASCII to binary"（ASCII 到二进制）。 

它将 Base64 编码的 ASCII 字符串解码回原始的二进制数据（或字符串）。命名反映了解码过程，即从Base64 的 ASCII 表示还原为原始数据。

需要注意的是，atob 和 btoa 最早出现在 Netscape 网景浏览器中，用于处理 Base64 编码和解码。当时，Base64 常用于将二进制数据嵌入到文本格式（如 HTML、CSS 或 MIME 邮件）中。关于网景浏览器，估计只有年纪稍大的人才会用过。

很多人以为 atob 和 btoa 是某种缩写，但实际上它们不是传统意义上的缩写，而是基于功能描述的命名，源于早期浏览器对 Base64 编码的需求，这一点尤其要注意。

btoa 函数用法：

它接受一个字符串，通常是ASCII 字符或二进制数据。如果输入的字符串包含非 ASCII 字符（如中文），需要使用 encodeURIComponent先将其转换为适合的格式。返回 Base64 编码后的字符串。

const str = "Welcome to Beijing!";const encoded = btoa(str);console.log(encoded); 
const chineseStr = "北京欢迎您！";const encodedChinese = btoa(encodeURIComponent(chineseStr));console.log(encodedChinese);

运行结果：

atob 函数用法：

接受一个 Base64 编码的字符串，如果输入的 Base64 字符串无效，会抛出错误。对于非 ASCII 字符的解码，可能需要结合 decodeURIComponent。返回解码后的原始字符串。

// 解码 Base64 字符串const encoded = "V2VsY29tZSB0byBCZWlqaW5nIQ==";const decoded = atob(encoded);console.log(decoded);
// 解码包含中文的 Base64 字符串const encodedChinese = "JUU1JThDJTk3JUU0JUJBJUFDJUU2JUFDJUEyJUU4JUJGJThFJUU2JTgyJUE4JUVGJUJDJTgx";const decodedChinese = decodeURIComponent(atob(encodedChinese));console.log(decodedChinese);

btoa 和 atob 的局限性：

主要处理 ASCII 字符，对于 Unicode 字符（如中文、表情符号等），需要配合encodeURIComponent 和 decodeURIComponent 使用。

不支持直接处理二进制数据（如文件流）。如果需要处理二进制数据，可以使用 ArrayBuffer 或 TypedArray 结合其他方法。

​

阅读原文：https://mp.weixin.qq.com/s/j1W_brSR0Tr33zG0N4m6_w