浅谈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 相关文章推荐
JavaScript入门教程(3) js面向对象
Jan 31 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
vue使用websocket的方法实例分析
Jun 22 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
JavaScript cookie原理及使用实例
May 08 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
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
PHPEXCEL 使用小记
2013/01/06 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
angularjs指令之绑定策略(@、=、&)
2017/04/13 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
python实现文件路径和url相互转换的方法
2015/07/06 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
详解Python中的Lock和Rlock
2021/01/26 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
师范生的个人求职信范文
2014/01/04 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
单位作风建设自查报告
2014/10/23 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
人力资源部岗位职责
2015/02/11 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
Python中Selenium对Cookie的操作方法
2021/07/09 Python