什么是文件的BOM头，及BOM头有哪些坑？

Posted 2020-10-21 Macchiato

1.什么是BOM？

BOM是用来判断文本文件是哪一种Unicode编码的标记，其本身是一个Unicode字符（"\uFEFF"），位于文本文件头部。

在不同的Unicode编码中，对应的bom的二进制字节如下：

Bytes Encoding

FE FF UTF16BE
FF FE UTF16LE
EF BB BF UTF8

所以我们可以根据文件头部的几个字节和上面的表格对应来判断该文件是哪种编码形式。

2. 如何查看你文件的BOM字符？

BOM头在记事本中是看不到的

以UTF8为例，新建一个1.txt文件，然后打开文件 输入 hello world 然后另存为 此时更改文件的编码格式 由默认的ANSI 即GB2312(国标2312)编码改成UTF8

然后通过下面的node代码，来打印该文本文件的buffer 就可以看到我们所说的BOM头字符

let fs = require(‘fs‘);

fs.readFile(‘./1.txt‘,function(err,data){
    console.log(data)
})

// <Buffer ef bb bf 68 65 6c 6c 6f 20 77 6f 72 6c 64>
// 前三个字节就是对应的我们UTF8编码的文本的BOM头字符

3.存在的问题？

虽然BOM字符起到了标记文件编码的作用但是他并不属于文件的内容部分，所以会产生一些问题：

1.在某些使用场景下就会有问题。例如我们把几个JS文件合并成一个文件后，如果文件中间含有BOM字符，就会导致浏览器JS语法错误。

2.php就不能识别bom头，PHP并不会忽略BOM，所以在读取、包含或者引用这些文件时，会把BOM作为该文件开头正文的一部分。根据嵌入式语言的特点，这串字符将被直接执行（显示）出来。由此造成即使页面的 top padding 设置为0，也无法让整个网页紧贴浏览器顶部，因为在html一开头有这3个字符呢！

4.如何去掉UTF8编码的记事本文件的BOM头

方法一：在文件另存为的时候选择无BOM头的UTF8编码

方法二：使用node中的文件模块获取文件的buffer数据并去掉前三个字节，代码如下：

function deleteUtf8BomHead(path) {
    let buf = fs.readFileSync(path);
    if (buf[0] == 0xef && buf[1] == 0xbb && buf[2] == 0xbf) {
        buf = buf.slice(3)
    }
    return buf
}

console.log(deleteUtf8BomHead(‘./1.txt‘));// <Buffer 68 65 6c 6c 6f 20 77 6f 72 6c 64>