在瀏覽器JavaScript環(huán)境中，可以使用TextEncoder和TextDecoder API 來(lái)進(jìn)行 GBK 編碼和解碼。也可以使用 encodeURIComponent 函數(shù)對(duì)字符串進(jìn)行編碼。最好使用第三方庫(kù)，比如iconv-lite來(lái)實(shí)現(xiàn)。

前言

charCodeAt() 方法

charCodeAt() 方法可返回指定位置的字符的 Unicode 編碼，返回值是 0 - 65535 之間的整數(shù)，表示給定索引處的 UTF-16 代碼單元。

字符串中第一個(gè)字符的位置為 0， 第二個(gè)字符位置為 1，以此類推。

示例：

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

fromCharCode() 方法

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

注意：該方法是 String 的靜態(tài)方法，字符串中的每個(gè)字符都由單獨(dú)的 Unicode 數(shù)字編碼指定。使用語(yǔ)法： String.fromCharCode()。

示例：

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

iconv庫(kù)

由于在實(shí)現(xiàn)中使用了iconv庫(kù)對(duì)編解碼進(jìn)行了轉(zhuǎn)換，所以需要先安裝該庫(kù)。即

npm install iconv-lite

然后在使用前引入庫(kù)：

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

可以在瀏覽器端全局引入iconv-lite.js來(lái)使用。

字符集概念

1）字符與字節(jié)（Character）

字符是各種文字和符號(hào)的總稱，包括亂碼；一個(gè)字符對(duì)應(yīng)1~n個(gè)字節(jié)，一字節(jié)對(duì)應(yīng)8位，每位用0或1表示。

2）字符集（Character Set）

字符集是多個(gè)字符的集合，每個(gè)字符集包含的字符個(gè)數(shù)不同，常見(jiàn)字符集名稱：ASCII字符集、GB2312字符集、Unicode字符集等。

3）字符集編碼（Character Encoding）

字符集編碼就是將符號(hào)轉(zhuǎn)換為計(jì)算機(jī)可讀的二進(jìn)制，解碼就是把二進(jìn)制轉(zhuǎn)換為人類可讀的符號(hào)。

字符集大多對(duì)應(yīng)一種編碼方式（例如GBK對(duì)應(yīng)GBK編碼），但Unicode編碼有多種，包括UTF-8、UTF-16、UTF-32和UTF-7。

目前網(wǎng)頁(yè)用的最多的就是“UTF-8”，UTF-8使用一至四個(gè)字節(jié)為每個(gè)字符編碼，是ASCII的一個(gè)超集，所以現(xiàn)存的ASCII文本不需要轉(zhuǎn)換

瀏覽器進(jìn)制概念

1）HTML屬性中使用十進(jìn)制和十六進(jìn)制

十進(jìn)制在HTML中可使用“8”，十六進(jìn)制，則使用“Z”，比十進(jìn)制多了個(gè)x，進(jìn)制碼中也多了a～f這6個(gè)字符來(lái)表示10~15。

2）CSS屬性中使用十進(jìn)制和十六進(jìn)制

CSS兼容HTML的進(jìn)制形式，除此之外，十六進(jìn)制還可以使用“\6c”的形式來(lái)表示。

3）JavaScript編碼封裝

可以直接通過(guò)eval執(zhí)行字符串八進(jìn)制和十六進(jìn)制兩種編碼方式，其中八進(jìn)制用“\56”表示，十六進(jìn)制用“\x5c”表示。

如果代碼中應(yīng)用了漢字并且需要進(jìn)行進(jìn)制編碼，那么只能進(jìn)行十六進(jìn)制Unicode編碼，其表示形式為：“\u4ee3\u7801”。

在“Web前端黑客技術(shù)揭秘”中經(jīng)封裝了兩個(gè)方法來(lái)做編碼和解碼，主要用到了下面兩個(gè)方法，具體代碼可查看此處。

核心代碼是：“str.charCodeAt(char).toString(進(jìn)制)”與“String.fromCharCode(parseInt(code,進(jìn)制))”

charCodeAt() 方法返回0到65535之間的整數(shù)，表示給定索引處的UTF-16代碼單元

靜態(tài)String.fromCharCode() 方法返回使用指定的Unicode值序列創(chuàng)建的字符串。

還可以通過(guò)一個(gè)在線網(wǎng)頁(yè)進(jìn)行編碼解碼“MonyerJS”。

4）HTML自動(dòng)解碼機(jī)制

例如在網(wǎng)頁(yè)中輸入16進(jìn)制的“Hello”，自動(dòng)就會(huì)解碼為“hello”。

還有一些比較熟知的空格“ ”也是這種機(jī)制。

使用第三方庫(kù)iconv-lite

可以使用一些第三方庫(kù)來(lái)進(jìn)行 GBK 編碼和解碼，例如 iconv-lite。iconv-lite 是一個(gè)流行的字符集轉(zhuǎn)換庫(kù)，可以在 Node.js 和瀏覽器中使用。

實(shí)現(xiàn)字符串GBK編碼

首先，我們需要將每個(gè)漢字轉(zhuǎn)成其表示的十六進(jìn)制碼，然后將十六進(jìn)制碼轉(zhuǎn)成對(duì)應(yīng)的二進(jìn)制碼，在轉(zhuǎn)換為字節(jié)碼（即2個(gè)16進(jìn)制數(shù)構(gòu)成的字節(jié)）。

下面是一個(gè)完整的GBK編碼實(shí)現(xiàn)的JavaScript函數(shù)，并有一個(gè)實(shí)例：

function gbkEncode(str) {
  var buf = new ArrayBuffer(str.length * 2); // ArrayBuffer是一個(gè)字節(jié)數(shù)組，字節(jié)長(zhǎng)度為字符串長(zhǎng)度的兩倍
  var bufView = new Uint8Array(buf); // 把字節(jié)數(shù)組轉(zhuǎn)換為整型數(shù)組

  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庫(kù)進(jìn)行編碼轉(zhuǎn)換
      bufView[offset++] = gbchar[0];
      bufView[offset++] = gbchar[1];
    }
  }

  return buf;
}

// 示例
gbkEncode("測(cè)試"); // ArrayBuffer(6) [196, 227, 186, 195, 192, 178]

實(shí)現(xiàn)字符串GBK解碼

和編碼的過(guò)程相反，我們首先需要將字節(jié)數(shù)組轉(zhuǎn)換成二進(jìn)制碼，再將二進(jìn)制碼轉(zhuǎn)換為十六進(jìn)制碼，最后再將十六進(jìn)制碼轉(zhuǎn)換為對(duì)應(yīng)的漢字。

下面是一個(gè)完整的GBK解碼實(shí)現(xiàn)的JavaScript函數(shù)，并有一個(gè)實(shí)例：

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庫(kù)進(jìn)行解碼轉(zhuǎn)換
      } else {
        str += "?";
        pos--;
      }
    }
  }

  return str;
}

// 示例
gbkDecode(new Uint8Array([196, 227, 186, 195, 192, 178]).buffer); // 測(cè)試

使用瀏覽器原生API

在瀏覽器環(huán)境中，可以使用 TextEncoder 和 TextDecoder API 來(lái)進(jìn)行 GBK 編碼和解碼。下面是使用 TextEncoder 進(jìn)行 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 的瀏覽器中，可以使用第三方庫(kù)或其他方式實(shí)現(xiàn) GBK 編碼和解碼。

使用 encodeURIComponent

使用 encodeURIComponent 函數(shù)對(duì)字符串進(jìn)行編碼。encodeURIComponent 函數(shù)可以將字符串中的非 ASCII 字符編碼為 URI 可以接受的格式，其中也包括 GBK 編碼。如下：

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

encodeURIComponent 函數(shù)雖然可以對(duì)字符串進(jìn)行 GBK 編碼，但它并不是一個(gè)專門用于字符集轉(zhuǎn)換的函數(shù)。如果需要進(jìn)行復(fù)雜的字符集轉(zhuǎn)換，最好使用專門的字符集轉(zhuǎn)換庫(kù)或?yàn)g覽器原生 API。

 總結(jié)

到此這篇關(guān)于JavaScript中字符串GBK與GB2312的編解碼示例講解的文章就介紹到這了,更多相關(guān)JavaScript中字符串GBK與GB2312的編解碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論