【JS】2026- JavaScript 中的 btoa 和 atob 全局函数

pingan8787

发布于 2024-04-25 16:07:09

1790

发布于 2024-04-25 16:07:09

文章被收录于专栏：前端自习课前端自习课

在 JavaScript 中，btoa 和 atob是两个全局函数，通常用来对「字符串」进行 Base64 「编码和解码」。

Base64 是一种编码方法，可以将二进制数据转换成 ASCII 字符集的文本形式。这种编码方式常用于在不支持二进制数据的系统之间传输数据，比如在 Web 应用中传输图片数据。

1.API 介绍

btoa() 函数

btoa() 方法用于将一个字符串进行 Base64 「编码」。例如，以下代码将字符串 "Hello, world!" 进行 Base64 编码：

const str = "Hello, world!";
const encodedStr = btoa(str);
console.log(encodedStr); // "SGVsbG8sIHdvcmxkIQ=="

「注意」：btoa() 方法只能对 ASCII 字符进行编码，如果字符串中包含非 ASCII 字符，则会抛出一个错误。

浏览器兼容性：

atob() 函数

atob() 方法用于将一个 Base64 编码的字符串进行「解码」。例如：

const encodedStr = "SGVsbG8sIHdvcmxkIQ==";
const decodedStr = atob(encodedStr);
console.log(decodedStr); // "Hello, world!"

「注意」：atob() 方法只能对有效的 Base64 编码的字符串进行解码，如果字符串不是一个有效的 Base64 编码，则会抛出一个错误。

浏览器兼容性：

2.注意事项

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

3.相同点和不同点

atob和btoa有以下相同点和不同点：

相同点：

「编码方式」：两者都使用 Base64 编码方式。
「浏览器兼容性」：仅支持浏览器使用，它们都是 Web 浏览器提供的内置函数。
「文本操作」：btoa()和atob()函数都只能处理纯文本字符串，不能直接处理二进制数据。
「安全性」：由于只是进行内容编码和解码操作，所以「不建议作为加密手段使用」。

不同点：

以表格形式展示btoa()和atob()函数的不同点：

	btoa()	atob()
作用	将文本字符串转换为 Base64 编码	将 Base64 编码的字符串解码为文本
使用场景	编码文本以便在不支持二进制的环境中传输	解码接收到的 Base64 编码的字符串
输出格式	Base64 编码的字符串	解码后的原始文本字符串

4.实际应用

这两个方法的使用场景如下：

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

实际应用中：

在 img 标签使用 Base64 编码的图片

<img
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
  alt="Red dot"
/>

使用 Base64 编码传输文件数据

// 假设我们有一个文件读取函数readFile，返回文件内容的字符串
function readFile(file) {
  // 这里应该是读取文件并返回字符串的逻辑
  // 为了示例，我们假设返回一个字符串
  return "这里是文件内容";
}

// 读取文件并编码
const fileContent = readFile("example.txt");
const base64Encoded = btoa(fileContent);

// 将编码后的数据发送到服务器
// 这里只是一个示意，实际应用中会通过AJAX或Fetch API等发送请求