JSON 格式可以說是目前最流行的數(shù)據(jù)傳輸格式了，被廣泛應(yīng)用于前后端通信，尤其是在 SPA 應(yīng)用中，JSON 數(shù)據(jù)通過 HTTP 協(xié)議進行傳輸，具有體積小、易序列化、可讀性好等優(yōu)點。（當然，這些優(yōu)點是相對的，例如體積小是相對于 XML 而言的，如果跟 protobuf 比，那體積就大多了。）
JSON 雖好，但是仍有兩大痛點讓開發(fā)者苦惱不已：

• 不能添加注釋（這個不能忍）
  
• 序列化之后的 key 被加上了雙引號（體積變大了）

如何添加注釋

目前的標準是不能添加注釋，如果想添加的話，只能曲線救國了，例如我是這么干的：

{
 "----------base----------": "通用模塊變量定義",
 "common": {
 "object_not_exit": "對象 ${id} 不存在！",
 "invalid_username_or_password": "用戶名或密碼錯誤！"
 },
 "----------sms----------": "短信模塊相關(guān)變量",
 "sms": {
 "template_missing_parameters": "模板缺少變量！",
 "param_length_limit": "參數(shù)超出長度限制！"
 }
}

總結(jié)下來一般有下面三種方法：

1、使用約定的 key 作為注釋字段：
如以 //， _comment，#####，—--— (# 或 - 的個數(shù)自定) 作為注釋的 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}

仔細觀察可以發(fā)現(xiàn)，對象的 key 是沒有雙引號的，但是序列化之后，兩邊都被加上了引號，導(dǎo)致字符數(shù)量變多了，那問題就來了：

• 為什么要給 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 完全一致
末尾可以有一個逗號

數(shù)組

末尾可以有一個逗號

字符串

• 字符串可以用單引號
• 字符串可以用反引號
• 字符串可以用轉(zhuǎn)義字符

數(shù)字

• 數(shù)字可以是 16 進制
• 數(shù)字可以用點開頭或結(jié)尾
• 數(shù)字可以表示正無窮、負無窮和NaN.
• 數(shù)字可以用加號開頭

評論

支持單行和多行注釋

空格

允許多余的空格

可以看到，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 應(yīng)該有的樣子！你說呢？

到此這篇關(guān)于淺談JSON5解決了JSON的兩大痛點的文章就介紹到這了,更多相關(guān)JSON5內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論