Node fs.writeFileSync 操作中 UTF-8 格式 BOM 缺失

NodeJS 默认使用 utf8 格式，这点是没错的

瞎逼逼一下，不解释，意会就好：

• 万花丛中过，片叶不沾身
• 常在江边走，哪有不湿鞋

 

o.gif

---

故事由来

后端给我的是 .cshtml 文件，代码粘贴来复制去太恶心了，于是我写了一段脚本：

const ORIGIN_DIR = './origin'; // 源目录
const DESTINATION_DIR = './destination';

let fs = require('fs');

//  遍历目录得到文件信息
function walk(path, callback) {
    let files = fs.readdirSync(path);

    files.forEach(function(file){
        if (fs.statSync(path + '/' + file).isFile()) {
            callback(path, file);
        }
    });
}

function setUp () {
    if ( !fs.existsSync(DESTINATION_DIR) ) {
        fs.mkdirSync(DESTINATION_DIR);
    }

    // 运行
    walk(ORIGIN_DIR, function (path, file) {
        let fileName = file.match(/(\S+)(\.\S+)$/)[1]; // 获得文件名

        let oldPath = path + '/' + file, // 原路径
            newPath = DESTINATION_DIR + '/' + fileName + '.cshtml'; // 新路径

        let html = fs.readFileSync(oldPath);

        fs.writeFileSync(newPath, html);
    });
}

setUp();

然后我扔到后端服务器，中文就乱码了，不开玩笑，哥是认真的。

 

gibberish.png

---

懵逼中

我就纳闷了，文件明明是 UTF-8，为什么就乱码了？~ o(￣￣)o
拿后端的文件，粘代码进去，WTF，居然正常，这不科学 = =

2.0 视力的我发现两个文件字节大小不一样，嗯哼......

怎么看出来的？你猜

使用 Beyond Compare 软件对比一下：

 

missBOM.png

字节顺序标记(ByteOrderMark），好陌生的名词，茫然、懵逼。

---

墙里开花墙外香

纵你搜它上百度，蓦然回首，那人却在，灯火阑珊处。嗯，好诗，好诗，此处应该有掌声 (￣￣)"
chrome 定位到 StackOverflow ，好，找到解决方法：

// UTF-8 doesn't require a bom, but you can add it by yourself of course.
filesys.writeFile('test.txt', '\ufeffThis is an example with accents : é è à ','utf8', function (err) {});

原来开头加 \uFEFF 就好了...大端，不觉明厉

---

测试

修改后脚本（就是加了一行）：

const ORIGIN_DIR = './origin'; // 源目录
const DESTINATION_DIR = './destination';

let fs = require('fs');

//  遍历目录得到文件信息
function walk(path, callback) {
    let files = fs.readdirSync(path);

    files.forEach(function(file){
        if (fs.statSync(path + '/' + file).isFile()) {
            callback(path, file);
        }
    });
}

function setUp () {
    if ( !fs.existsSync(DESTINATION_DIR) ) {
        fs.mkdirSync(DESTINATION_DIR);
    }

    // 运行
    walk(ORIGIN_DIR, function (path, file) {
        let fileName = file.match(/(\S+)(\.\S+)$/)[1]; // 获得文件名

        let oldPath = path + '/' + file, // 原路径
            newPath = DESTINATION_DIR + '/' + fileName + '.cshtml'; // 新路径

        let html = '\uFEFF'; // BOM

        html += fs.readFileSync(oldPath);
        fs.writeFileSync(newPath, html);
    });
}

setUp();

再虐一次，你是否会有感觉：

 

withBOM.png

O yeah ! 完美对称~

上传，上传，上传测试：

 

normal.png

Done !

---

总结

• writeFileSync、writeFile 都会有这个问题，其实之前合并 markdown 文件我就碰见过...
• 不会就搜索，没啥不好 ~

延伸阅读

---

▶ Walkthrough007