浅谈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 相关文章推荐
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
微信小程序实现的图片保存功能示例
Apr 24 Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 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 mysql索引问题
2008/06/07 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
php实现图片压缩处理
2020/09/09 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
Javascript函数的参数
2015/07/16 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
详解Django的CSRF认证实现
2018/10/09 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
什么是.net的Remoting技术
2016/07/08 面试题
自我鉴定范文300字
2013/10/01 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
班委竞选稿范文
2015/11/21 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
详解JAVA的控制语句
2021/11/11 Java/Android