JavaScript Base64 编码出现乱码问题

在使用 JavaScript 进行 Base64 编码时，不少开发者都会遇到乱码问题，这不仅影响开发效率，还可能导致项目出现功能异常。深入了解并解决这一问题，对前端开发至关重要。

要明白乱码产生的根源。JavaScript 中的字符串本质是 UTF - 16 编码，而 Base64 编码通常处理的是字节流。当对包含非 ASCII 字符的字符串进行编码时，如果没有正确处理字符编码转换，就容易出现乱码。

一种常见的情况是在浏览器环境下，直接使用原生的 window.btoa() 方法进行 Base64 编码。这个方法默认使用 UTF - 16 编码来处理字符串，对于包含中文字符等非 ASCII 字符的字符串，就可能编码错误。例如，我们尝试对一个包含中文的字符串进行 btoa() 编码：

const str = "你好，世界";
const encoded = btoa(str);
console.log(encoded); 

此时输出的编码结果在解码时就可能出现乱码。

解决这个问题的一种有效方法是先将字符串转换为字节数组，再进行 Base64 编码。可以利用 TextEncoder 将字符串转换为 UTF - 8 编码的字节数组，然后使用一些第三方库，如 js-base64 来进行编码。示例代码如下：

import { Base64 } from 'js-base64';
const str = "你好，世界";
const encoder = new TextEncoder();
const byteArray = encoder.encode(str);
const encoded = Base64.fromUint8Array(byteArray);
console.log(encoded); 

在解码时，也需要相应的处理。先使用 Base64 库将编码后的字符串转换回字节数组，再通过 TextDecoder 将字节数组转换为字符串：

const decoder = new TextDecoder();
const decodedArray = Base64.toUint8Array(encoded);
const decodedStr = decoder.decode(decodedArray);
console.log(decodedStr); 

另外，在 Node.js 环境中，处理方式略有不同。Node.js 内置了 Buffer 对象，可以方便地处理字节数据。对字符串进行 Base64 编码和解码时，可以这样操作：

const str = "你好，世界";
const buffer = Buffer.from(str, 'utf8');
const encoded = buffer.toString('base64');
const decoded = Buffer.from(encoded, 'base64').toString('utf8');
console.log(encoded); 
console.log(decoded); 

在 JavaScript 中处理 Base64 编码的乱码问题，关键在于正确处理字符编码的转换，根据不同的运行环境（浏览器或 Node.js）选择合适的方法，确保编码和解码过程的一致性。