JavaScript处理中文字符串的Base64编码与解码的两种方法

 更新时间:2025年01月17日 10:20:15   作者:red润  
这篇文章主要介绍了在 JavaScript 中处理中文字符串的 Base64 编码与解码,解释了 Base64 编码与中文字符冲突的原因,分别阐述了手动实现和使用TextEncoder和TextDecoder API 两种方法,包括编码和解码的具体实现及示例,最后总结了两种方法的适用场景

在 Web 开发中,Base64 编码是一种常见的数据转换方式。它通过将二进制数据转换为文本数据,便于在 HTTP 请求、URL 中传输或存储。然而,处理中文字符时,Base64 编码会面临一些特殊的挑战,因为中文字符通常占用多个字节,而 Base64 编码是基于字节的。在本文中,我们将介绍两种方法来处理中文字符串的 Base64 编码与解码。

为什么 Base64 编码会与中文字符发生冲突?

Base64 编码是一种将二进制数据转换为 ASCII 字符串格式的方式。每个字符占用 6 位,而 Base64 编码本身的原理是将输入数据按照每 6 位拆分,并映射到对应的 Base64 字符上。

然而,中文字符在 UTF-8 编码下通常需要多个字节(通常是 3 个字节)。因此,如果我们直接对中文字符进行 Base64 编码而没有正确处理字符编码,可能会导致编码错误或者解码时出现乱码。为了避免这个问题,我们需要先将中文字符转换为 UTF-8 字节,然后再进行 Base64 编码。

在本文中,我们将介绍两种不同的方式来解决这个问题,分别是手动实现 Base64 编码和解码的方式,以及使用 TextEncoderTextDecoder API 来处理编码和解码。

方法一:手动实现 Base64 编码与解码

在这个方法中,我们手动处理每个字节,并将字节转化为二进制字符串。然后,我们将二进制字符串按每 6 位进行拆分,映射为 Base64 字符。解码时,我们通过反向操作将 Base64 字符还原为二进制数据,然后恢复为原始的 UTF-8 字符串。

(1) 中文字符串的 Base64 编码

function base64Encode(input) {
    const base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
​
    // 将字符串转换为 UTF-8 字节
    let utf8Bytes = new TextEncoder().encode(input);
​
    // 将每个字节转换为二进制字符串
    let binaryString = '';
    for (let i = 0; i < utf8Bytes.length; i++) {
        binaryString += utf8Bytes[i].toString(2).padStart(8, '0');
    }
​
    // 按 6 位拆分
    const chunks = [];
    for (let i = 0; i < binaryString.length; i += 6) {
        chunks.push(binaryString.slice(i, i + 6));
    }
​
    // 如果最后一组少于 6 位,进行填充
    if (chunks[chunks.length - 1].length < 6) {
        chunks[chunks.length - 1] = chunks[chunks.length - 1].padEnd(6, '0');
    }
​
    // 查找对应的 Base64 字符
    let base64Encoded = chunks.map(chunk => {
        const index = parseInt(chunk, 2); // 将二进制转换为数字
        return base64Chars.charAt(index);
    }).join('');
​
    // 添加填充字符
    while (base64Encoded.length % 4 !== 0) {
        base64Encoded += '=';
    }
​
    return base64Encoded;
}
​
// 示例
const input = '你好润,Base64!';
const encoded = base64Encode(input);
console.log('Encoded:', encoded);// Encoded: 5L2g5aW95ram77yMQmFzZTY077yB

解释:

  • UTF-8 编码:通过 TextEncoder().encode(input) 方法,我们将输入的中文字符串转换为 UTF-8 字节。每个字节在 UTF-8 编码中通常会占用多个字节(例如中文字符通常占用 3 个字节)。
  • 二进制转换:我们将每个字节转为二进制字符串,并将它们合并成一个长的二进制串。
  • Base64 编码:通过按每 6 位将二进制字符串拆分,我们将每一组 6 位的二进制数转换为对应的 Base64 字符。
  • 填充字符:Base64 编码要求输出的字符数必须是 4 的倍数,因此我们在末尾添加 = 字符进行填充。

(2) 中文字符串的 Base64 解码

function base64Decode(input) {
    const base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
​
    // 去除填充字符 '='
    input = input.replace(/=/g, '');
​
    // 将每个 Base64 字符转换为 6 位二进制
    let binaryString = '';
    for (let i = 0; i < input.length; i++) {
        const index = base64Chars.indexOf(input.charAt(i)); // 查找字符的位置
        binaryString += index.toString(2).padStart(6, '0'); // 将位置转换为 6 位二进制
    }
​
    // 每 8 位一个字节,转换为字节
    let decodedBytes = [];
    for (let i = 0; i < binaryString.length; i += 8) {
        const byte = binaryString.slice(i, i + 8);
        decodedBytes.push(parseInt(byte, 2)); // 将二进制转为字节
    }
​
    // 将字节数组转换为 UTF-8 字符串
    let decodedString = new TextDecoder().decode(new Uint8Array(decodedBytes));
​
    return decodedString;
}
​
// 示例
const decoded = base64Decode(encoded);
console.log('Decoded:', decoded);//Decoded: 你好润,Base64!

解释:

  • Base64 解码:首先将 Base64 字符串转换为 6 位二进制字符串。然后每 8 位恢复为一个字节。
  • 还原字符:通过 TextDecoder 将解码后的字节数组还原为 UTF-8 字符串。

方法二:使用 TextEncoder 和 TextDecoder API

如果不想手动实现 Base64 编码和解码的过程,现代浏览器提供了 TextEncoderTextDecoder API,可以帮助我们简化编码和解码过程。我们可以直接使用这些 API 来将中文字符串转换为字节数组,再进行 Base64 编码。

(1) 中文字符串的 Base64 编码

function base64EncodeUsingAPI(input) {
    // 使用 TextEncoder 将字符串转换为 UTF-8 字节
    const utf8Bytes = new TextEncoder().encode(input);
​
    // 将字节数组转换为 Base64 字符串
    return btoa(String.fromCharCode.apply(null, utf8Bytes));
}
​
// 示例
const input = '你好red润,Base64!';
const encoded = base64EncodeUsingAPI(input);
console.log('Encoded:', encoded);//Encoded: 5L2g5aW9cmVk5ram77yMQmFzZTY077yB

解释:

  • TextEncoder:通过 TextEncoder 将字符串转换为 UTF-8 字节数组。
  • btoabtoa 是一个内建的 JavaScript 函数,用于将二进制数据转换为 Base64 编码的字符串。需要注意的是,btoa 只能处理 8 位字符,因此我们通过 String.fromCharCode.apply 方法将字节数组转换为字符串,然后进行编码。

(2) 中文字符串的 Base64 解码

function base64DecodeUsingAPI(input) {
    // 使用 atob 解码 Base64 字符串
    const decodedData = atob(input);
​
    // 将解码后的字符串转换为字节数组
    const byteArray = new Uint8Array(decodedData.length);
    for (let i = 0; i < decodedData.length; i++) {
        byteArray[i] = decodedData.charCodeAt(i);
    }
​
    // 使用 TextDecoder 将字节数组转换为原始字符串
    return new TextDecoder().decode(byteArray);
}
​
// 示例
const decoded = base64DecodeUsingAPI(encoded);
console.log('Decoded:', decoded);// Decoded: 你好red润,Base64!

解释:

  • atobatob 函数用于解码 Base64 字符串。解码后的数据是一个原始的二进制字符串。
  • TextDecoder:通过 TextDecoder 将字节数组还原为 UTF-8 字符串。

总结

在处理中文字符串的 Base64 编码与解码时,关键在于如何正确地将字符转换为字节数据。通过手动处理每个字节或使用现代的 TextEncoderTextDecoder API,我们可以确保中文字符能够正确地进行 Base64 编码与解码。

  • 手动实现:适用于那些需要详细控制编码过程的场景。你可以深入理解 Base64 编码的每个细节,并根据需要进行优化。
  • 使用 API:对于大多数情况,TextEncoderTextDecoder API 提供了一种更简洁、直接的方式来处理编码和解码,减少了手动操作的复杂性。

到此这篇关于JavaScript处理中文字符串的Base64编码与解码的两种方法的文章就介绍到这了,更多相关JavaScript处理Base64编码与解码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Javascript 继承实现例子

    Javascript 继承实现例子

    在真正的Web站点和应用程序中,几乎不可能创建名为ClassA和ClassB的类,更可能的是创建表示特定事物(如形状)的类。考虑本章开头所述的形状的例子,Polygon、Triangle和Rectangle类就构成了一组很好的探讨数据。
    2009-08-08
  • 原生js编写2048小游戏

    原生js编写2048小游戏

    本文主要介绍了用原生js编写2048小游戏的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • javascript 运算数的求值顺序

    javascript 运算数的求值顺序

    请注意,这里说的是运算数的求值顺序。而非运算符,运算符的求值顺序我们比较熟悉。
    2011-08-08
  • uniapp获取底部安全距离以及状态栏高度等

    uniapp获取底部安全距离以及状态栏高度等

    最近在用uniapp开发的时候遇到了一些问题,下面这篇文章主要给大家介绍了关于uniapp获取底部安全距离以及状态栏高度等的相关资料,需要的朋友可以参考下
    2022-10-10
  • javascript实现行拖动的方法

    javascript实现行拖动的方法

    这篇文章主要介绍了javascript实现行拖动的方法,涉及javascript鼠标事件及页面元素的相关操作技巧,需要的朋友可以参考下
    2015-05-05
  • Bootstrap基本插件学习笔记之Alert警告框(20)

    Bootstrap基本插件学习笔记之Alert警告框(20)

    这篇文章主要为大家详细介绍了Bootstrap基本插件学习笔记之ALert警告框的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • uniapp中scroll-view基础用法示例代码

    uniapp中scroll-view基础用法示例代码

    我们在项目中往往都能遇到实现左右滑动跟上下滑动的需求,下面这篇文章主要给大家介绍了关于uniapp中scroll-view基础用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • JS数据结构与算法中的队列结构详解

    JS数据结构与算法中的队列结构详解

    队列指的是一种受限的线性表,先进先出,今天通过本文带领大家认识队列及队列的应用,对JS数据结构与算法-队列结构相关知识感兴趣的朋友一起看看吧
    2022-11-11
  • JavaScript实现打地鼠小游戏

    JavaScript实现打地鼠小游戏

    这篇文章主要为大家详细介绍了JavaScript实现打地鼠小游戏的相关代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • touch.js 拖动、缩放、旋转 (鼠标手势)功能代码

    touch.js 拖动、缩放、旋转 (鼠标手势)功能代码

    这篇文章主要介绍了touch.js 拖动、缩放、旋转 (鼠标手势)功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02

最新评论