JavaScript中字符串GBK与GB2312的编解码示例讲解

在浏览器JavaScript环境中，可以使用TextEncoder和TextDecoder API 来进行 GBK 编码和解码。也可以使用 encodeURIComponent 函数对字符串进行编码。最好使用第三方库，比如iconv-lite来实现。

前言

charCodeAt() 方法

charCodeAt() 方法可返回指定位置的字符的 Unicode 编码，返回值是 0 - 65535 之间的整数，表示给定索引处的 UTF-16 代码单元。

字符串中第一个字符的位置为 0， 第二个字符位置为 1，以此类推。

示例：

let str = "abc"
let unicode = str.charCodeAt(1)
// 98
console.log(unicode);

fromCharCode() 方法

fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。

注意：该方法是 String 的静态方法，字符串中的每个字符都由单独的 Unicode 数字编码指定。使用语法： String.fromCharCode()。

示例：

let result = String.fromCharCode(98)
// b
console.log(result);

iconv库

由于在实现中使用了iconv库对编解码进行了转换，所以需要先安装该库。即

npm install iconv-lite

然后在使用前引入库：

var iconv = require("iconv-lite");

可以在浏览器端全局引入iconv-lite.js来使用。

字符集概念

1）字符与字节（Character）

字符是各种文字和符号的总称，包括乱码；一个字符对应1~n个字节，一字节对应8位，每位用0或1表示。

2）字符集（Character Set）

字符集是多个字符的集合，每个字符集包含的字符个数不同，常见字符集名称：ASCII字符集、GB2312字符集、Unicode字符集等。

3）字符集编码（Character Encoding）

字符集编码就是将符号转换为计算机可读的二进制，解码就是把二进制转换为人类可读的符号。

字符集大多对应一种编码方式（例如GBK对应GBK编码），但Unicode编码有多种，包括UTF-8、UTF-16、UTF-32和UTF-7。

目前网页用的最多的就是“UTF-8”，UTF-8使用一至四个字节为每个字符编码，是ASCII的一个超集，所以现存的ASCII文本不需要转换

浏览器进制概念

1）HTML属性中使用十进制和十六进制

十进制在HTML中可使用“8”，十六进制，则使用“Z”，比十进制多了个x，进制码中也多了a～f这6个字符来表示10~15。

2）CSS属性中使用十进制和十六进制

CSS兼容HTML的进制形式，除此之外，十六进制还可以使用“\6c”的形式来表示。

3）JavaScript编码封装

可以直接通过eval执行字符串八进制和十六进制两种编码方式，其中八进制用“\56”表示，十六进制用“\x5c”表示。

如果代码中应用了汉字并且需要进行进制编码，那么只能进行十六进制Unicode编码，其表示形式为：“\u4ee3\u7801”。

在“Web前端黑客技术揭秘”中经封装了两个方法来做编码和解码，主要用到了下面两个方法，具体代码可查看此处。

核心代码是：“str.charCodeAt(char).toString(进制)”与“String.fromCharCode(parseInt(code,进制))”

charCodeAt() 方法返回0到65535之间的整数，表示给定索引处的UTF-16代码单元

静态String.fromCharCode() 方法返回使用指定的Unicode值序列创建的字符串。

还可以通过一个在线网页进行编码解码“MonyerJS”。

4）HTML自动解码机制

例如在网页中输入16进制的“Hello”，自动就会解码为“hello”。

还有一些比较熟知的空格“ ”也是这种机制。

使用第三方库iconv-lite

可以使用一些第三方库来进行 GBK 编码和解码，例如 iconv-lite。iconv-lite 是一个流行的字符集转换库，可以在 Node.js 和浏览器中使用。

实现字符串GBK编码

首先，我们需要将每个汉字转成其表示的十六进制码，然后将十六进制码转成对应的二进制码，在转换为字节码（即2个16进制数构成的字节）。

下面是一个完整的GBK编码实现的JavaScript函数，并有一个实例：

function gbkEncode(str) {
  var buf = new ArrayBuffer(str.length * 2); // ArrayBuffer是一个字节数组，字节长度为字符串长度的两倍
  var bufView = new Uint8Array(buf); // 把字节数组转换为整型数组

  for (var i = 0, offset = 0, len = str.length; i < len; ++i) {
    var charcode = str.charCodeAt(i);

    if (charcode <= 0x007f) {
      bufView[offset++] = charcode;
    } else {
      var gbchar = iconv.encode(str[i], "gbk"); // 使用iconv库进行编码转换
      bufView[offset++] = gbchar[0];
      bufView[offset++] = gbchar[1];
    }
  }

  return buf;
}

// 示例
gbkEncode("测试"); // ArrayBuffer(6) [196, 227, 186, 195, 192, 178]

实现字符串GBK解码

和编码的过程相反，我们首先需要将字节数组转换成二进制码，再将二进制码转换为十六进制码，最后再将十六进制码转换为对应的汉字。

下面是一个完整的GBK解码实现的JavaScript函数，并有一个实例：

function gbkDecode(bytes) {
  var str = "";
  var pos = 0;
  var len = bytes.length;

  while (pos < len) {
    var byte1 = bytes[pos++];

    if (byte1 < 0x80) {
      str += String.fromCharCode(byte1); // byte1小于0x80就是ASCII
    } else {
      var byte2 = bytes[pos++];

      if (byte1 >= 0xa1 && byte1 <= 0xf7 && byte2 >= 0xa1 && byte2 <= 0xfe) {
        // GBK汉字范围
        str += iconv.decode(new Buffer([byte1, byte2]), "gbk"); // 使用iconv库进行解码转换
      } else {
        str += "?";
        pos--;
      }
    }
  }

  return str;
}

// 示例
gbkDecode(new Uint8Array([196, 227, 186, 195, 192, 178]).buffer); // 测试

使用浏览器原生API

在浏览器环境中，可以使用 TextEncoder 和 TextDecoder API 来进行 GBK 编码和解码。下面是使用 TextEncoder 进行 GBK 编码的代码：

const str = "知乎";
const encoder = new TextEncoder("gbk");
const buf = encoder.encode(str);
console.log(buf); // Uint8Array [ 231, 159, 165, 228, 185,142 ]

const uint8Array = new Uint8Array([231, 159, 165, 228, 185, 142]);
console.log(new TextDecoder().decode(uint8Array)); // 知乎

TextEncoder 和 TextDecoder API 不是所有浏览器都支持。在不支持这些 API 的浏览器中，可以使用第三方库或其他方式实现 GBK 编码和解码。

使用 encodeURIComponent

使用 encodeURIComponent 函数对字符串进行编码。encodeURIComponent 函数可以将字符串中的非 ASCII 字符编码为 URI 可以接受的格式，其中也包括 GBK 编码。如下：

const str = "知乎";
const encodedStr = encodeURIComponent(str);
console.log(encodedStr); // %E7%9F%A5%E4%B9%8E

encodeURIComponent 函数虽然可以对字符串进行 GBK 编码，但它并不是一个专门用于字符集转换的函数。如果需要进行复杂的字符集转换，最好使用专门的字符集转换库或浏览器原生 API。

 总结

到此这篇关于JavaScript中字符串GBK与GB2312的编解码示例讲解的文章就介绍到这了,更多相关JavaScript中字符串GBK与GB2312的编解码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！