在 JavaScript
中,btoa
和 atob
是两个处理 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。如果字符串不是一个有效的 Base64 编码,则会抛出一个错误。
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 编码的字符串作为输入。如果你尝试使用其他编码的字符串或二进制数据(如
ArrayBuffer),你需要先将其转换为 UTF-8 编码的字符串。 不支持二进制 Blob 或 - 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)不可用。