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>

// 将GBK编码的buffer转化成utf8的字符串

// 在这里我们要引入一个库 iconv-lite

let iconv = require('iconv-lite');

fs.readFile('./2.txt',function (err, data) {

console.log(data,'qq');

let str = iconv.decode(data,'gbk');

console.log(str);

})

什么是文件的BOM头,及BOM头有哪些坑?的更多相关文章

  1. C#写UTF8文件时指定是否含BOM头

    BOM的基本概念 在UCS 编码中有一个叫做"ZERO WIDTH NO-BREAK SPACE"的字符,它的编码是FEFF.而FFFE在UCS中是不存在的字符,所以不应该出现在实 ...

  2. PSR-1之PHP代码文件必须以不带BOM的UTF-8编码

    BOM——Byte Order Mark,就是字节序标记 在UCS 编码中有一个叫做”ZERO WIDTH NO-BREAK SPACE“的字符,它的编码是FEFF.而FFFE在UCS中是不存在的字符 ...

  3. 配置apue的头文件apue.h和unp的头文件anp.h

    配置apue的头文件apue.h和unp的头文件anp.h 如果要使用gcc -g 来生成可调试文件一定要修改Make.defines.linux文件中的CFLAGS变量 修改为:CFLAGS=-an ...

  4. Effective Objective-C 2.0 — 第二条:类的头文件中尽量少引入其他头文件

    第二条:类的头文件中尽量少引入其他头文件 使用向前声明(forward declaring) @class EOCEmployer 1, 将引入头文件的实际尽量延后,只在确有需要时才引入,这样就可以减 ...

  5. Oracle EBS-SQL (BOM-19):主BOM与替代BOM互换.sql

    替代BOM与主BOM互相转换 BOM: 1-01-27-211       子件:1-01-27-416  ID:2202 BOM替代项:替代0001   子件: 1-01-26-204   ID:2 ...

  6. Oracle EBS-SQL (BOM-15):检查多层BOM(含common BOM).sql

    select       distinct b.lvl                                                      层次, b.OPERATION_SEQ ...

  7. 于用cocoapods添加第三方库,并且cocoapods添加成功,但是却在任何一个文件上都导入不了头文件

    关于用cocoapods添加第三方库,并且cocoapods添加成功,但是却在任何一个文件上都导入不了头文件,而且根本没有提示,即使手动打#import "xxxx.h"也报错xx ...

  8. 订单BOM、销售BOM、标准BOM

    订单BOM.销售BOM.标准BOM   訂單BOM: 是實際生產時用的BOM, 在標準BOM和銷售BOM基礎上增減物料的BOM銷售BOM: 是為特定客戶設定的BOM, 在主檔數據層次上的BOM, 在生 ...

  9. 在类的头文件里尽量少引入其它头文件 &lt;&lt;Effective Objective-C&gt;&gt;

    与C 和C++ 一样,Objective-C 也使用"头文件"(header file) 与"实现文件"(implementation file)来区隔代码.用 ...

  10. 订单BOM与销售BOM的区别

    訂單BOM: 是實際生產時用的BOM, 在標準BOM和銷售BOM基礎上增減物料的BOM 銷售BOM: 是為特定客戶設定的BOM, 在主檔數據層次上的BOM, 在生產時是帶到訂單BOM中去的. 標準BO ...

随机推荐

  1. 取Cookie值

    string url_Login_Group = "http://ui.ptlogin2.qq.com/cgi-bin/login?appid=549000912&daid=5&am ...

  2. mui下拉上拉(明一)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  3. LNMP环境配置(1)

    安装Nginx.MySQL.PHP 概念 LNMP是Linux Nginx MySQL PHP 的简写,把Nginx.MySQL以及PHP安装在Linux系统上,组成一个环境来运行PHP的脚本语言. ...

  4. Java第三节课总结

    动手动脑1: package ketangceshia;import java.util.Random;public class fuben {    public static void main( ...

  5. 曼孚科技:AI语音交互领域常用的4个术语

    ​语音交互是基于语音输入的新一代交互模式,比较典型的应用场景是各类语音助手. 本文整理了语音交互领域常用的4个术语,希望可以帮助大家更好地理解这门学科. 1. 语音合成标记语言(SSML) 语音合成标 ...

  6. Android_关于自定义view的dialog有黑影的问题

    跟默认选中的主题有关 在build段代码中加入这行代码 dialog.getWindow().setBackgroundDrawableResource(android.R.color.transpa ...

  7. 用texarea存储数据,查询数据库后原样显示在jsp中,包括空格和回车换行

    用texarea存储数据,查询数据库后原样显示在jsp中,包括空格和回车换行

  8. H5-当你想在出现遮罩的时候,锁住用户的滚动行为,你可以这么做。

    <div class="mask"> <div class="content">我是弹框</div> </div> ...

  9. Vue组件库新增的prop属性类型是Object或者Array时默认值的设置

    在Vue开发中提供组件库时常常需要添加相关属性,用来接收父组件向子组件传递的数据,通常也会给属性设置默认值,那么当属性的类型是Object或者Array类型时如何设置默认值比较合理呢?下面将揭晓这一过 ...

  10. chrome json接口数据 插件

    chrome json接口数据 插件 JSON-Handle 官网 下载后 地址栏输入 chrome://extensions/ 将下载的文件拖入页面 OK