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


Posted in Javascript onDecember 14, 2020

JSON 格式可以说是目前最流行的数据传输格式了,被广泛应用于前后端通信,尤其是在 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 中的双引号

序列化之后的 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 应该有的样子!你说呢?

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

Javascript 相关文章推荐
免费空间广告万能消除代码
Sep 04 Javascript
jQuery使用手册之一
Mar 24 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
Angular网络请求的封装方法
May 22 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
Vue实现点击当前行变色
Dec 14 #Vue.js
如何在JavaScript中等分数组的实现
Dec 13 #Javascript
使用Mock.js生成前端测试数据
Dec 13 #Javascript
javascript实现滚轮轮播图片
Dec 13 #Javascript
swiper实现导航滚动效果
Dec 13 #Javascript
swiperjs实现导航与tab页的联动
Dec 13 #Javascript
Vue实现简单购物车功能
Dec 13 #Vue.js
You might like
基于mysql的论坛(3)
2006/10/09 PHP
隐性调用php程序的方法
2009/03/09 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
jQuery EasyUI 中文API Layout(Tabs)
2010/04/27 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
javascript实现时钟动画
2020/12/03 Javascript
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
美德好少年事迹材料
2014/01/19 职场文书
八项规定整改方案
2014/02/21 职场文书
开服装店计划书
2014/08/15 职场文书
百家讲坛观后感
2015/06/12 职场文书