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

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

如何添加注釋

目前的標(biāo)準(zhǔn)是不能添加注釋，如果想添加的話，只能曲線救國(guó)了，例如我是這么干的：

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

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

1、使用約定的 key 作為注釋字段：
如以 //， _comment，#####，—--— (# 或 - 的個(gè)數(shù)自定) 作為注釋的 key 等。

2、使用重名 key 作為注釋：
即每個(gè) key，使用兩次，第1次做注釋，第2次做實(shí)際屬性。

3、使用字段 key 加前綴做注釋 key：
常用的前綴有 #, _ 等。

能否去掉 key 中的雙引號(hào)

序列化之后的 key 被加上了雙引號(hào)，例如：

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

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

• 為什么要給 key 加雙引號(hào)？
• 能不能去掉 key 里面的雙引號(hào)？

這里先說一個(gè)歷史背景：

在 ECMAScript 3 中，保留字是不能作為對(duì)象的 key 的，例如：
{function: 0} // 語(yǔ)法錯(cuò)誤
{if: 0} // 語(yǔ)法錯(cuò)誤
{true: 0} // 語(yǔ)法錯(cuò)誤

只能給 key 添加雙引號(hào)或單引號(hào)：
{"function": 0} // Ok
{"if": 0} // Ok
{"true": 0} // Ok

但是在 ES5 之后，保留字也是可以作為 key 的了，因此在不考慮向后兼容的情況下，如果能把 JSON 對(duì)象表示成跟 JavaScript 對(duì)象一模一樣，只是把中間的空格、換行等刪掉該多好呀！

強(qiáng)大的 JSON5

你想要的，它都有！這就是 JSON5 標(biāo)準(zhǔn)，它有以下特性：

對(duì)象

對(duì)象的 key 可以跟 JavaScript 中對(duì)象 key 完全一致
末尾可以有一個(gè)逗號(hào)

數(shù)組

末尾可以有一個(gè)逗號(hào)

字符串

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

數(shù)字

• 數(shù)字可以是 16 進(jìn)制
• 數(shù)字可以用點(diǎn)開頭或結(jié)尾
• 數(shù)字可以表示正無(wú)窮、負(fù)無(wú)窮和NaN.
• 數(shù)字可以用加號(hào)開頭

評(píng)論

支持單行和多行注釋

空格

允許多余的空格

可以看到，JSON5 比 JSON 強(qiáng)大很多，是 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的兩大痛點(diǎn)的文章就介紹到這了,更多相關(guān)JSON5內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論