gpt4 book ai didi

浅谈JSON5解决了JSON的两大痛点

转载 作者:qq735679552 更新时间:2022-09-27 22:32:09 33 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章浅谈JSON5解决了JSON的两大痛点由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

JSON 格式可以说是目前最流行的数据传输格式了,被广泛应用于前后端通信,尤其是在 SPA 应用中,JSON 数据通过 HTTP 协议进行传输,具有体积小、易序列化、可读性好等优点。(当然,这些优点是相对的,例如体积小是相对于 XML 而言的,如果跟 protobuf 比,那体积就大多了。) JSON 虽好,但是仍有两大痛点让开发者苦恼不已:

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

如何添加注释

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

?
1
2
3
4
5
6
7
8
9
10
11
12
{
  "----------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 中的双引号

序列化之后的 key 被加上了双引号,例如:

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

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

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

这里先说一个历史背景:

?
1
2
3
4
5
6
7
8
9
在 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。安装方法为:

?
1
2
npm install json5
# 或者 yarn add json5

序列化示例:

?
1
2
3
4
5
6
7
const JSON5 = require( 'json5' )
const obj = {
  name: 'keliq' ,
  age: 12,
}
const res = JSON5.stringify(obj)
console.log(res) // {name:'keliq',age:12}

反序列化示例:

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

看到这里,不禁感叹,这才是 JSON 应该有的样子!你说呢?

到此这篇关于浅谈JSON5解决了JSON的两大痛点的文章就介绍到这了,更多相关JSON5内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我! 。

原文链接:https://juejin.cn/post/6904473733067440142 。

最后此篇关于浅谈JSON5解决了JSON的两大痛点的文章就讲到这里了,如果你想了解更多关于浅谈JSON5解决了JSON的两大痛点的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com