如何在JavaScript中使用Base64编码和解码字符串

介绍

在 JavaScript 中，可以使用 Base64 对字符串进行编码和解码。

在本文中，您将了解现代 Web 浏览器中可用的 btoa 和 atob JavaScript 函数。

先决条件

要阅读本文，您将需要：

了解 JavaScript 中的字符串。您可以参考如何在 JavaScript 中使用字符串了解更多信息。
了解使用 Window 或 WorkerGlobalScope 可用的函数。
了解开发者控制台。您可以参考【X16X】如何使用 JavaScript 开发者控制台【X63X】了解更多。

使用 Base64 编码和解码字符串

btoa() 和 atob() 是两个 Base64 辅助函数，它们是 HTML 规范的核心部分，可在所有现代浏览器中使用。

注意： 这些函数的命名参考了旧的Unix命令，用于将二进制转换为ASCII（btoa）和ASCII到二进制（atob）。然而，“这些函数的输入和输出都是Unicode字符串”。

btoa() 接受一个字符串并将其编码为 Base64。

假设您有一个字符串 "Hello World!"，并希望将其编码为 Base64。在浏览器的 Web 开发者控制台中，定义字符串，对其进行编码，然后显示编码后的字符串：

// Define the string
var decodedStringBtoA = 'Hello World!';

// Encode the String
var encodedStringBtoA = btoa(decodedStringBtoA);

console.log(encodedStringBtoA);

此代码的输出是包含字母和数字的字符串：

OutputSGVsbG8gV29ybGQh

atob() 获取一个字符串并从 Base64 解码。

让我们从前面的 'SGVsbG8gV29ybGQh' 中获取编码字符串，并从 Base64 解码它。在浏览器的 Web 开发人员控制台中，定义字符串，对其进行解码，然后显示解码后的字符串：

// Define the string
var encodedStringAtoB = 'SGVsbG8gV29ybGQh';

// Decode the String
var decodedStringAtoB = atob(encodedStringAtoB);

console.log(decodedStringAtoB);

此代码的输出显示字符串已转换回其原始消息：

OutputHello World!

现在，您有两个用于编码和解码 Base64 的工具。

探索 Base64 的常见用例

您还可以使用 Base64 以与 HTML、JavaScript 和 CSS 兼容的方式表示二进制数据。例如，您可以使用 Base64 将图像内嵌到 CSS 或 JavaScript 文件中。

可以使用 Base64 将输入（如表单数据或 JSON）转换为具有 URL 安全的简化字符集的字符串。但是，由于某些服务器可能会解释加号 (+) 和正斜杠 (/) 字符，建议使用 encodeURIComponent 代替。

了解 Base64 的局限性

Base64 绝不意味着是一种安全的加密方法。

Base64 也不是一种压缩方法。将字符串编码为 Base64 通常会产生 33% longer 输出。

结论

在本文中，向您介绍了 btoa 和 atob 来编码和解码 Base64 字符串。

笔记： 我可以用吗 documents the known issue for 处理 UTF-8 and provides a polyfill for older browsers.

如果您想了解有关 JavaScript 的更多信息，请查看我们的 JavaScript 主题页面以获取练习和编程项目。