node編碼中的坑

MoTong發表於2019-03-03

在上篇文章Buffer(Buffer(緩衝器))中，聊了關於編碼的問題。但是編碼有很多小坑，今天我們聊聊坑的問題。 第一個就是BOM頭的問題。 我們都知道，NodeJs是不支援gb2312編碼的， 在此之前得先知道，gb2312編碼中，一個漢字是由兩個位元組(16個位)組成。 在我們寫程式碼的時候經常會遇到一個問題，就是我們寫的程式碼是gbk寫的(gb2312)，但NodeJs是不支援的。所以讀取出來的資料，不是我們想要的。

let fs = require('fs');
let path = require('path');
let result = fs.readFileSync(path.join(__dirname,'./1.txt'));//txt的內容是前端開發
console.log(result.toString())；
複製程式碼

輸出的內容是亂碼

node編碼中的坑
用編輯器開啟txt檔案也是亂碼
node編碼中的坑
如果不對結果進行toString，得到的buffer的內容是：
node編碼中的坑
通常，我們遇到不支援gbk的檔案，第一反應都會重新設定編碼為utf8格式。例如對txt的操作：
node編碼中的坑
這時，再去獲取result的值

let fs = require('fs');
let path = require('path');
let result = fs.readFileSync(path.join(__dirname,'./1.txt'));//txt的編碼已經是utf8
console.log(result)；
複製程式碼

結果是

node編碼中的坑
我們都知道uft8格式的檔案，一個漢字3個位元組，此時輸出的結果卻多出3個位元組。因為這是unicode的原因，它會加多3個位元組的字首。這個字首對我們來說是沒有意義的。對result進行toString（）轉譯：

console.log(result.toString())
複製程式碼

輸出結果：

node編碼中的坑
這時我們就要截掉這個BOM頭。

我們看看node原始碼，編譯的時候用了stripBOM的模組，把BOM頭刪掉

// Native extension for .js
Module._extensions['.js'] = function(module, filename) {
  var content = fs.readFileSync(filename, 'utf8');
  module._compile(internalModule.stripBOM(content), filename);
};
複製程式碼

我們再看看原始碼裡stripBOM的方法

/**
 * Remove byte order marker. This catches EF BB BF (the UTF-8 BOM)
 * because the buffer-to-string conversion in `fs.readFileSync()`
 * translates it to FEFF, the UTF-16 BOM.
 */
function stripBOM(content) {
  if (content.charCodeAt(0) === 0xFEFF) {
    content = content.slice(1);
  }
  return content;
}
複製程式碼

stripBOM拿到內容content以後，取它的第0個，判斷它的第0個是不是0xFEFF，0xFEFF就是那3個字首的字元，那3個字元是不要的，所以做了slice處理。 stripBOM方法裡要求content必須得是字串，因為它截了一個，但是我們的buffer是3個位元組，所以我們要對檔案傳utf8的引數：

let fs = require('fs');
let path = require('path');
let result = fs.readFileSync(path.join(__dirname,'./1.txt'),'utf8');
console.log(result);
複製程式碼

此時result的結果就是一個字串了：

node編碼中的坑
取出result的第一個字元等於0xFEFF的話，就要slice掉。

let fs = require('fs');
let path = require('path');
function stripBOM(content) {
    if (content.charCodeAt(0) === 0xFEFF) {
      content = content.slice(1);
    }
    return content;
  }
let result = fs.readFileSync(path.join(__dirname,'./1.txt'),'utf8');
result = stripBOM(result);
console.log(result);
//輸出：前端開發
複製程式碼

一般情況下，我們讀取檔案的時候很少會傳utf8這個引數，如果不傳utf8引數，該怎麼去掉BOM頭？（不傳utf8，得到的就是buffer；傳了utf8，得到的就是字串）

/*
Remove byte order marker. This catches EF BB BF (the UTF-8 BOM)
原始碼已經說明，uft8中，EF BB BF表示3個位元組，那麼只需判斷buffer的前3位是EF BB BF，就可以刪掉
*/
function stripBOM(content){
  if(Buffer.isBuffer(content)){//判斷是不是buffer
    if(content[0]===0xEF&&content[1]===0xBB&&content[2]===0xBF){
      return content.slice(3);
    }
    return content;
  }else{ //是string
    if(content.charCodeAt(0)===0xFEFF){
      return content.slice(1);
    }
    return content;
  }
}
複製程式碼

iconv-lite：讓node支援gb2312

我們用nodejs爬取gb2312網頁的時候，會出現亂碼的情況。可以用iconv-lite把gbk轉化成utf8，它是第三方模組，所以需要安裝包。這個包的目的就是幫助我們轉化編碼。 如何呼叫：

let iconv = require('iconv-lite');
let fs = require('fs');
let path = require('path'); 
//iconv.decode(希望解碼的目標，希望按什麼方式解碼)
let result = fs.readFileSync(path.join(__dirname,'./2.txt'));
result = iconv.decode(result,'gbk')
console.log(result.toString())
複製程式碼

所以，如果只想要Buffer，我們一般不傳編碼；如果想看這個結果是個字串，我們就傳utf8

string_decoder

string_decoder模組用於將Buffer轉成對應的字串。使用者通過呼叫stringDecoder.write(buffer)，可以獲得buffer對應的字串。

它的特殊之處在於，當傳入的buffer不完整（比如三個位元組的字元，只傳入了兩個），內部會維護一個internal buffer將不完整的位元組cache住，等到使用者再次呼叫stringDecoder.write(buffer)傳入剩餘的位元組，來拼成完整的字元。

這樣可以有效避免buffer不完整帶來的錯誤，對於很多場景，比如網路請求中的包體解析等，非常有用。

入門例子

這節分別演示了decode.write(buffer)、decode.end([buffer])兩個主要API的用法。

例子一：

decoder.write(buffer)呼叫傳入了Buffer物件，相應的返回了對應的字串你;

const StringDecoder = require('string_decoder').StringDecoder;
const decoder = new StringDecoder('utf8');

// Buffer.from('你') => <Buffer e4 bd a0>
const str = decoder.write(Buffer.from([0xe4, 0xbd, 0xa0]));
console.log(str);  // 你
複製程式碼

例子二：

當decoder.end([buffer])被呼叫時，內部剩餘的buffer會被一次性返回。如果此時帶上buffer引數，那麼相當於同時呼叫decoder.write(buffer)和decoder.end()。

const StringDecoder = require('string_decoder').StringDecoder;
const decoder = new StringDecoder('utf8');

// Buffer.from('你好') => <Buffer e4 bd a0 e5 a5 bd>
let str = decoder.write(Buffer.from([0xe4, 0xbd, 0xa0, 0xe5, 0xa5]));
console.log(str);  // 你

str = decoder.end(Buffer.from([0xbd]));
console.log(str);  // 好
複製程式碼
例子：分多次寫入多個位元組

下面的例子，演示了分多次寫入多個位元組時，string_decoder模組是怎麼處理的。

首先，傳入了，好還差1個位元組，此時，decoder.write(xx)返回你。

然後，再次呼叫decoder.write(Buffer.from([0xbd]))，將剩餘的1個位元組傳入，成功返回好。

const StringDecoder = require('string_decoder').StringDecoder;
const decoder = new StringDecoder('utf8');

// Buffer.from('你好') => <Buffer e4 bd a0 e5 a5 bd>
let str = decoder.write(Buffer.from([0xe4, 0xbd, 0xa0, 0xe5, 0xa5]));
console.log(str);  // 你

str = decoder.write(Buffer.from([0xbd]));
console.log(str);  // 好
複製程式碼
let buffer = Buffer.from('前端開發');
let buff1 = buffer.slice(0,5);
let buff2 = buffer.slice(5);
let {StringDecoder} = require('string_decoder');
let sd = new StringDecoder();
console.log(sd.write(buff1).toString());
console.log(sd.write(buff2).toString());
複製程式碼
例子：decoder.end()時，位元組數不完整的處理

decoder.end(buffer)時，僅傳入了好的第1個位元組，此時呼叫decoder.end()，返回了�，對應的buffer為。

const StringDecoder = require('string_decoder').StringDecoder;

// Buffer.from('好') => <Buffer e5 a5 bd>
let decoder = new StringDecoder('utf8');
let str = decoder.end( Buffer.from([0xe5]) );
console.log(str);  // �
console.log(Buffer.from(str));  // <Buffer ef bf bd>
複製程式碼

參考文件：

string_decoder - 字串解碼器

你應該記住的一個UTF-8字元「EF BF BD」

巧用string_decoder將buffer轉成string

相關文章