JS UTF-8编码转换中文|极客笔记

JS UTF-8编码转换中文

在前端开发中，我们经常会遇到需要对字符串进行编码转换的情况，特别是涉及到中文字符的时候。其中最常见的情况就是需要将中文字符转换为UTF-8编码。

在JavaScript中，我们可以通过一些内置方法来实现UTF-8编码的转换。本文将详细介绍如何使用JavaScript对中文字符进行UTF-8编码转换，以及一些常见问题和解决方法。

UTF-8编码介绍

UTF-8是一种可变字长的编码方式，用来表示Unicode字符集中的字符。它可以用1-4个字节来表示一个字符，其中ASCII字符占用1个字节，中文字符通常占用3个字节。

UTF-8编码规则如下：

对于只含有ASCII字符的文本，UTF-8编码与ASCII编码兼容，即ASCII编码的文本可以看做UTF-8编码。
对于其他字符（包括中文字符），UTF-8编码采用多字节表示，不同范围的Unicode字符采用不同长度的字节序列。

JavaScript实现UTF-8编码转换

在JavaScript中，我们通常可以使用encodeURIComponent和decodeURIComponent方法来对字符串进行URL编码和解码。但这两个方法并不完全适用于UTF-8编码转换，特别是对于中文字符的处理并不理想。

下面我们将介绍一种更加通用的方法，通过手动实现UTF-8编码转换来解决这个问题。

UTF-8编码转换函数

function utf8Encode(str) {
    let utf8 = '';
    for (let i = 0; i < str.length; i++) {
        let charCode = str.charCodeAt(i);
        if (charCode < 0x80) {
            utf8 += String.fromCharCode(charCode);
        } else if (charCode < 0x800) {
            utf8 += String.fromCharCode(0xc0 | (charCode >> 6), 0x80 | (charCode & 0x3f));
        } else if (charCode < 0x10000) {
            utf8 += String.fromCharCode(0xe0 | (charCode >> 12), 0x80 | ((charCode >> 6) & 0x3f), 0x80 | (charCode & 0x3f));
        } else {
            utf8 += String.fromCharCode(0xf0 | (charCode >> 18), 0x80 | ((charCode >> 12) & 0x3f), 0x80 | ((charCode >> 6) & 0x3f), 0x80 | (charCode & 0x3f));
        }
    }
    return utf8;
}

function utf8Decode(utf8) {
    let str = '';
    for (let i = 0; i < utf8.length; i++) {
        let charCode = utf8.charCodeAt(i);
        if (charCode < 0x80) {
            str += String.fromCharCode(charCode);
        } else if ((charCode & 0xe0) === 0xc0) {
            charCode = (charCode & 0x1f) << 6 | (utf8.charCodeAt(++i) & 0x3f);
            str += String.fromCharCode(charCode);
        } else if ((charCode & 0xf0) === 0xe0) {
            charCode = (charCode & 0x0f) << 12 | (utf8.charCodeAt(++i) & 0x3f) << 6 | (utf8.charCodeAt(++i) & 0x3f);
            str += String.fromCharCode(charCode);
        } else {
            charCode = (charCode & 0x07) << 18 | (utf8.charCodeAt(++i) & 0x3f) << 12 | (utf8.charCodeAt(++i) & 0x3f) << 6 | (utf8.charCodeAt(++i) & 0x3f);
            str += String.fromCharCode(0xd800 | ((charCode >> 10) & 0x3ff), 0xdc00 | (charCode & 0x3ff));
        }
    }
    return str;
}

// 测试
let chinese = '你好，世界！';
let chineseUtf8 = utf8Encode(chinese);
let chineseDecoded = utf8Decode(chineseUtf8);

console.log(chineseUtf8);
console.log(chineseDecoded);

运行结果

运行上述示例代码，我们可以得到如下运行结果：

ä½ å¥½ï¼ä¸–çï¼
你好，世界！

结语

通过本文的介绍，我们了解了UTF-8编码的基本原理以及如何使用JavaScript手动实现UTF-8编码转换。这种方法可以更加灵活地处理中文字符，适用于前端开发中对字符串编码转换的需求。当我们需要对中文字符进行UTF-8编码转换时，可以使用这种方法来解决问题。

JS UTF-8编码转换中文