极客笔记JavaScript 中的 Base64 编码
什么是 Base64 编码？
Base64 是一种常用的编码方式，用于将数据转换成纯文本的形式，使之能够在不可靠的网络环境中以可靠的方式传输。Base64 编码的输出内容由大小写字母、数字和”+”, “/”, “=” 等符号组成。Base64 编码的字符集包含一些特殊字符，其中包括被用作 URL 或文件名的保留字符。
Base64 编码的原理是将原始数据按照固定长度的块进行分割，每个块包含 6 位二进制数。然后，将这些 6 位二进制数转化为对应的 Base64 字符。
在 JavaScript 中使用 Base64 编码
在 JavaScript 中，我们可以使用内置函数 btoa 和 atob 来进行 Base64 编码和解码。
btoa 函数
btoa 函数用于将字符串进行 Base64 编码。它接受一个字符串作为参数，并返回一个 Base64 编码后的字符串结果。
示例代码如下：
const originalString = "Hello, World!";
const base64EncodedString = btoa(originalString);
console.log(base64EncodedString); // 输出 "SGVsbG8sIFdvcmxkIQ=="
atob 函数
atob 函数用于将 Base64 编码的字符串进行解码，还原成原始的字符串。它接受一个 Base64 编码后的字符串作为参数，并返回解码后的字符串结果。
示例代码如下：
const base64EncodedString = "SGVsbG8sIFdvcmxkIQ==";
const originalString = atob(base64EncodedString);
console.log(originalString); // 输出 "Hello, World!"
在 HTML 中使用 Base64 编码的图像
Base64 编码不仅可以应用于纯文本数据，还可以应用于图像等二进制数据。在 HTML 中，可以使用 Base64 编码的图像以数据 URL 的形式嵌入到页面中。
示例代码如下：
<img src="data:image/jpeg;base64,/9j/4AAQSk...（base64 编码后的图像数据）...gKw/nHc8UaJQACiiiigD//2Q==" alt="Base64-encoded Image">
需要注意的是，将图像以 Base64 编码的形式嵌入页面中会增加页面的体积，因为 Base64 编码后的数据较原始二进制数据要大约 33% 到 50%。因此，对于较大的图像，最好将其存储在服务器上，通过 URL 引用。
Base64 和 URL 安全性
在使用 Base64 编码时，有一些字符可能会引起 URL 安全性问题。比如 “/” 字符在 URL 中具有特殊含义，会被解析为路径分隔符。为了解决这个问题，可以使用 URL 安全的 Base64 编码。
URL 安全的 Base64 编码方式和标准的 Base64 编码方式唯一的区别在于，将 “+” 替换为 “-“，将 “/” 替换为 “_”。另外，如果编码后的字符串末尾有一个或两个 “=”, 则可以省略。
示例代码如下：
const originalString = "https://example.com/my image.jpg";
const base64EncodedString = btoa(originalString).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
console.log(base64EncodedString); // 输出 "aHR0cHM6Ly9leGFtcGxlLmNvbS9teSBpbWFnZS5qcGVn"
Base64 在数据传输中的应用
Base64 编码在实际应用中，特别是在数据传输中，有一些常见的应用场景。
在 HTTP 请求中传输认证信息
在 HTTP 请求的 Authorization 头中，可以将认证信息以 Base64 编码的形式传输。这种方式常用于 Basic 认证，其中用户名和密码通过 “:” 分隔，然后进行编码。
示例代码如下：
const username = "admin";
const password = "password";
const authHeaderValue = "Basic " + btoa(username + ":" + password);
console.log(authHeaderValue); // 输出 "Basic YWRtaW46cGFzc3dvcmQ="
将二进制数据转换为可打印的字符串
有时候需要将二进制数据转换为可打印的字符串进行传输或存储。这时候可以使用 Base64 编码将二进制转换为可打印字符串。
示例代码如下：
const binaryData = new Uint8Array([72, 101, 108, 108, 111, 44, 32, 87, 111, 114, 108, 100, 33]);
const base64EncodedString = btoa(String.fromCharCode.apply(null, binaryData));
console.log(base64EncodedString); // 输出 "SGVsbG8sIFdvcmxkIQ=="
在数据传输中避免特殊字符的问题
在某些情况下，数据传输过程中可能会遇到特殊字符无法被正确处理的问题。使用 Base64 编码可以将特殊字符转换为 URL 安全的字符，避免这些问题。
示例代码如下：
const jsonData = { "url": "https://example.com/?id=123456" };
const jsonString = JSON.stringify(jsonData);
const base64UrlSafeString = btoa(jsonString).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
console.log(base64UrlSafeString); // 输出 "eyJ1cmwiOiJodHRwczovL2V4YW1wbGUuY29tLz9pZD0xMjM0NTYifQ"
总结
Base64 编码是一种常用的编码方式，可以将数据转换为可打印的字符串形式，使之能够在不可靠的网络环境中以可靠的方式传输。在 JavaScript 中，可以使用内置的 btoa 和 atob 函数进行 Base64 编码和解码。在 HTML 中，可以使用 Base64 编码的图像以数据 URL 的形式嵌入页面。Base64 编码在数据传输中有一些常见的应用场景，比如传输认证信息、转换二进制数据和处理特殊字符等。