背景

在<code>JavaScript中，btoa() 和 atob() 是两个全局函数，它们分别用于一些基本数据类型的 （字符串、数字、布尔），编码为Base64字符串和将 Base64 字符串解码为原始字符串。

不过，需要注意的是，这两个函数并非 JavaScript 标准规范（ECMAScript）的一部分，而是浏览器环境（如 Web API）提供的。

一、btoa()

btoa() 函数用于将字符串、数字，编码为 Base64 格式的 ASCII 字符串。它接受一个 DOMString（即，一个 UTF-8 格式的字符串）作为参数，并返回一个包含原始数据的 Base64 编码的 ASCII 字符串。

const binaryString = "Hello, World!";

const base64String = btoa(binaryString);

console.log(base64String); // 输出：SGVsbG8sIFdvcmxkIQ==

PS：btoa() 只能对 ASCII 字符串进行编码，因此如果你尝试对非 ASCII 字符串（如包含中文字符的字符串）进行编码，可能会得到意外的结果或抛出错误。

二、atob()

atob() 函数用于解码通过 btoa() 编码的 Base64 字符串。它接受一个包含 Base64 编码数据的 ASCII 字符串作为参数，并返回一个包含原始数据的 DOMString。

输入限制：``btoa() 函数要求输入的字符串仅包含ASCII字符（即字符的 Unicode 编码在0到127之间）。如果输入字符串包含任何非ASCII 字符（如中文、日文、表情符号等），btoa() 将抛出一个 InvalidCharacterError 异常。

const base64String = "SGVsbG8sIFdvcmxkIQ==";

const decodedString = atob(base64String);

console.log(decodedString); // 输出：Hello, World!

在使用 btoa() 和 atob() 时，请确保你的代码运行在支持这些函数的环境中（如浏览器）。如果你正在编写跨平台或服务器端 JavaScript 代码，可能需要使用其他库（如 Node.js 中的 Buffer 类）来处理 Base64 编码和解码。

三、优缺点

优点：

方便性：它提供了一种简单的方法来转码数据（如字符串、数字、Blob、ArrayBuffer 等）转换为 Base64编码的字符串，以便在网络中传输或在浏览器中存储。 兼容性：在现代浏览器中，btoa 函数的兼容性相对较好。

缺点：

输入限制：btoa 只能接受 UTF-8 编码的字符串作为输入。如果你尝试使用其他编码的字符串或二进制数据（如 Array Buffer），你需要先将其转换为 UTF-8 编码的字符串。ArrayBuffer：虽然可以使用一些技巧（如 FileReader API）将 Blob 或 ArrayBuffer 转换为Base64 字符串，但 btoa 本身并不直接支持这些类型。安全性：Base64 编码不是一种加密方法，因此它不会增加数据的安全性。它只是将数据转换为一种可在文本中安全传输的格式。

使用场景

数据传输：在不支持二进制的上下文中，如 HTTP 请求的 URL 或 JSON 格式，可以使用 Base64 编码传输数据。图片数据：在 Web 页面中，可以通过 Base64 编码直接在 HTML中嵌入图片，而不需要使用<img>标签的src属性指向一个外部图片文件

注意事项

btoa和atob只能处理基本数据类型，不能用于编码二进制数据。 编码后的 Base64 字符串大小会比原始数据大约 33%。btoa和atob是 Web 浏览器提供的函数，不是 ECMAScript 标准的一部分，因此在非浏览器环境中（如Node.js）不可用。