JSON5 解决JSON 两大痛点，才是 JSON 应该有的样子！

JSON 格式可以说是目前最流行的数据传输格式了，被广泛应用于前后端通信，尤其是在 SPA 应用中，JSON 数据通过 HTTP 协议进行传输，具有体积小、易序列化、可读性好等优点。（当然，这些优点是相对的，例如体积小是相对于 XML 而言的，如果跟 protobuf 比，那体积就大多了。）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20741.html

JSON 虽好，但是仍有两大痛点让开发者苦恼不已：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20741.html

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

如何添加注释

目前的标准是不能添加注释，如果想添加的话，只能曲线救国了，例如我是这么干的：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20741.html

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

总结下来一般有下面三种方法：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20741.html

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

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

• 使用重名 key 作为注释：

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

• 使用字段 key 加前缀做注释 key：

  常用的前缀有 #, _ 等。

能否去掉 key 中的双引号

序列化之后的 key 被加上了双引号，例如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20741.html

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

仔细观察可以发现，对象的 key 是没有双引号的，但是序列化之后，两边都被加上了引号，导致字符数量变多了，那问题就来了：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20741.html

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

这里先说一个历史背景：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20741.html

在 ECMAScript 3 中，保留字是不能作为对象的 key 的，例如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20741.html

{function: 0} // 语法错误
{if: 0} // 语法错误
{true: 0} // 语法错误
复制代码

只能给 key 添加双引号或单引号：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20741.html

{"function": 0} // Ok
{"if": 0} // Ok
{"true": 0} // Ok
复制代码

但是在 ES5 之后，保留字也是可以作为 key 的了，因此在不考虑向后兼容的情况下，如果能把 JSON 对象表示成跟 JavaScript 对象一模一样，只是把中间的空格、换行等删掉该多好呀！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20741.html

强大的 JSON5

你想要的，它都有！这就是 JSON5 标准，它有以下特性：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20741.html

对象

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

数组

• 末尾可以有一个逗号

字符串

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

数字

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

评论

• 支持单行和多行注释

空格

• 允许多余的空格

可以看到，JSON5 比 JSON 强大很多，是 JSON 的超集，就好比 TypeScript 相较于 JavaScript。安装方法为：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20741.html

npm install json5
# 或者 yarn add json5
复制代码

序列化示例：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20741.html

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

反序列化示例：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20741.html

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