在 JavaScript 中，当我们使用 Base64 编码用作 URL 参数时，可能会遇到问题。因为 URL 中有一些字符，包括 =，是有特殊意义的

目的

在 JavaScript 中，当我们使用 Base64 编码时，可能会在编码的结果末尾添加一个或多个 = 字符作为填充。这是 Base64 编码的标准做法，用于确保编码的数据长度是 4 的倍数。

但是，当我们将 Base64 编码的字符串用作 URL 参数时，可能会遇到问题。因为 URL 中有一些字符，包括 =，是有特殊意义的，所以它们需要被编码（或称为转义）以避免混淆。例如，= 在 URL 中用作键值对的分隔符。

为了解决这个问题，我们可以使用 encodeURIComponent 函数对 Base64 编码的字符串进行 URL 编码。这样，特殊字符就会被转义，不会影响 URL 的结构。

以下是一个简单的示例，说明如何结合使用 Base64 编码和 encodeURIComponent：

// 对数据进行 Base64 编码
let base64EncodedData = btoa("Hello, World!");

// 对 Base64 编码的数据进行 URL 编码
let urlEncodedData = encodeURIComponent(base64EncodedData);

console.log("Base64 编码:", base64EncodedData);
console.log("URL 编码:", urlEncodedData);

// 解码
let decodedBase64 = decodeURIComponent(urlEncodedData);
let decodedData = atob(decodedBase64);

console.log("解码数据:", decodedData);

这样，当你需要在 URL 中传递 Base64 编码的数据时，可以先进行 URL 编码，然后在接收端再进行解码。这样可以确保数据的完整性和正确性。

使用 js-base64 这个npm包

import {Base64} from 'js-base64'; 可以使用 Base64.encodeURI(str) Base64.decode(str) 进行编码和解码，与上面写法的区别如下：

你提到了两种方法来处理 Base64 编码和解码，特别是当涉及到 URL 编码时。让我们分析一下这两种方法的区别：

  1. 原生方法:

    • 使用 btoa 进行 Base64 编码。
    • 使用 encodeURIComponent 进行 URL 编码。
    • 使用 decodeURIComponent 进行 URL 解码。
    • 使用 atob 进行 Base64 解码。

  2. 使用 js-base64 库:

    • 使用 Base64.encodeURI 进行 Base64 编码并自动进行 URL 安全编码。
    • 使用 Base64.decode 进行 Base64 解码。

区别:

  1. 简洁性: 使用 js-base64 库的方法更简洁，因为它提供了一个专门的方法来处理 URL 安全的 Base64 编码，这意味着你不需要单独进行 URL 编码和解码。
  2. URL 安全: Base64.encodeURI 方法确保生成的 Base64 编码是 URL 安全的。它会替换 Base64 字符串中的 + 和 / 字符，使其适合在 URL 中使用，而不需要额外的 URL 编码。
  3. 依赖: 使用 js-base64 库意味着你的项目有一个额外的依赖。这可能会增加你的项目的大小，尽管这个库相对较小。
  4. 兼容性: 如果你的项目需要在多种环境中运行（例如浏览器和 Node.js），js-base64 库提供了更好的跨环境兼容性。

结论:

如果你只是想在浏览器环境中进行简单的 Base64 编码和解码，并且不想添加额外的依赖，那么原生方法就足够了。但是，如果你想要一个更简洁、更可靠的方法，或者你的项目需要在多种环境中运行，那么使用 js-base64 库可能是一个更好的选择。