Json5怎一个爽字了得-技术圈

关注公众号 前端人，回复“加群”

添加无广告优质学习群

SON 格式可以说是目前最流行的数据传输格式了，被广泛应用于前后端通信，尤其是在 SPA 应用中，JSON 数据通过 HTTP 协议进行传输，具有体积小、易序列化、可读性好等优点。

（当然，这些优点是相对的，例如体积小是相对于 XML 而言的，如果跟 protobuf 比，那体积就大多了。） JSON 虽好，但是仍有两大痛点让开发者苦恼不已：

不能添加注释（这个不能忍）
序列化之后的 key 被加上了双引号（体积变大了）

如何添加注释

目前的标准是不能添加注释，如果想添加的话，只能曲线救国了，例如我是这么干的：

{
  "----------base----------": "通用模块变量定义",
  "common": {
    "object_not_exit": "对象 ${id} 不存在！",
    "invalid_username_or_password": "用户名或密码错误！"
  },
  "----------sms----------": "短信模块相关变量",
  "sms": {
    "template_missing_parameters": "模板缺少变量！",
    "param_length_limit": "参数超出长度限制！"
  }
}

总结下来一般有下面三种方法：

1.使用约定的 key 作为注释字段：

如以 //， _comment，#####，—--— (# 或 - 的个数自定) 作为注释的 key 等。

2.使用重名 key 作为注释：

即每个 key，使用两次，第1次做注释，第2次做实际属性。

3.使用字段 key 加前缀做注释 key：常用的前缀有 #, _ 等。

能否去掉 key 中的双引号

const obj = { name: 'keliq', age: 12 }
console.log(JSON.stringify(obj))
// {"name":"keliq","age":12}

仔细观察可以发现，对象的 key 是没有双引号的，但是序列化之后，两边都被加上了引号，导致字符数量变多了，那问题就来了：

为什么要给 key 加双引号？
能不能去掉 key 里面的双引号？

这里先说一个历史背景：

在 ECMAScript 3 中，保留字是不能作为对象的 key 的，例如：

{function: 0} // 语法错误
{if: 0} // 语法错误
{true: 0} // 语法错误

只能给 key 添加双引号或单引号：

{"function": 0} // Ok
{"if": 0} // Ok
{"true": 0} // Ok

但是在 ES5 之后，保留字也是可以作为 key 的了，因此在不考虑向后兼容的情况下，如果能把 JSON 对象表示成跟 JavaScript 对象一模一样，只是把中间的空格、换行等删掉该多好呀！

强大的 JSON5

你想要的，它都有！这就是 JSON5 标准，它有以下特性：

对象

对象的 key 可以跟 JavaScript 中对象 key 完全一致末尾可以有一个逗号

数组

末尾可以有一个逗号

字符串

字符串可以用单引号
字符串可以用反引号
字符串可以用转义字符

数字

数字可以是 16 进制
数字可以用点开头或结尾
数字可以表示正无穷、负无穷和NaN.
数字可以用加号开头

支持单行和多行注释

空格

允许多余的空格

可以看到，JSON5 比 JSON 强大很多，是 JSON 的超集，就好比 TypeScript 相较于 JavaScript。安装方法为：

npm install json5

或者

yarn add json5

序列化示例：

const JSON5 = require('json5')
const obj = {
  name: 'keliq',
  age: 12,
}
const res = JSON5.stringify(obj)
console.log(res) // {name:'keliq',age:12}

反序列化示例：

const JSON5 = require('json5')
const json5str = `// 单行注释
{
  name:'keliq', // 这是姓名
  age:12, /*这是年龄*/
}`
console.log(JSON5.parse(json5str))

看到这里，不禁感叹，这才是 JSON 应该有的样子！你说呢？

总结

JSON 是很严格的，主键必须在引号中，字符串必须用双引号，对象和数组不能有逗号结尾，不能有注释。这些在过去都是必须的，但是随着支持 ECMAScript 5 的浏览器引擎的出现，例如 V8，这些限制就显得很臃肿。

JSON5 和 JSON 的关系就像 ECMAScript 5 和 ECMAScript 3 的关系。JSON5 同样是 ECMAScript 5 的严格的子集。

juejin.cn/post/6904473733067440142

1.如果看到这里，说明你喜欢这篇文章，请 转发、点赞、在看

2.关注公众号前端人，回复资料包领取我整理的前端进阶资料包

3.回复加群，加入前端进阶群，和小伙伴一起学习讨论!

Json5怎一个爽字了得