JSON 基础语法
这篇文章把 JSON 基础语法拆成“规则+示例+解析实操”,你可以直接跟着示例练习。
很多人觉得 JSON 很简单,直到线上报了一个“Unexpected token”才发现自己踩了语法坑。
JSON 的规则其实不多,但非常严格。只要把这些规则吃透,你写配置、接口参数、Mock 数据会稳很多。
1) 六种合法值类型
JSON 里只有对象、数组、字符串、数字、布尔值、null 这六类值。
sample-1.json
1{
2 "object": { "name": "json" },
3 "array": [1, 2, 3],
4 "string": "hello",
5 "number": 3.14,
6 "boolean": true,
7 "nullValue": null
8}
2) 对象(Object)写法
键必须是双引号包裹的字符串;键值用冒号;字段之间用逗号。注意最后一个键值对后面不加逗号。
sample-2.json
1{
2 "id": 1001,
3 "username": "alice",
4 "enabled": true
5}
3) 数组(Array)写法
数组元素用逗号分隔,元素可以是任意合法 JSON 值。
sample-3.json
1[
2 "apple",
3 "banana",
4 "orange"
5]
4) 嵌套结构(对象 + 数组)
接口返回里最常见的结构:外层对象 + 内层数组 + 子对象。
sample-4.json
1{
2 "page": 1,
3 "pageSize": 20,
4 "list": [
5 { "id": 1, "name": "Keyboard" },
6 { "id": 2, "name": "Mouse" }
7 ],
8 "hasMore": false
9}
5) 字符串转义
字符串内含有双引号或单引号,需要在前面加转义符\。特殊符号前也要加转义符\。
sample-5.json
1{
2 "quote": "He said: \"JSON is strict\"",
3 "path": "C:\\work\\demo",
4 "lineBreak": "first line\nsecond line"
5}
6) 数字写法
支持整数、小数、科学计数法;不支持 NaN、Infinity。
sample-6.json
1{
2 "int": 10,
3 "float": 9.99,
4 "negative": -42,
5 "exp": 1.2e3
6}
JSON 字符串如何转成 JSON 对象
重点记住:JSON.parse 的输入必须是字符串,输出才是可直接访问字段的对象。
parse-string.js
1const jsonText = '{"userId":"U1001","active":true,"tags":["new","vip"]}'
2
3const jsonObj = JSON.parse(jsonText)
4
5console.log(jsonObj.userId) // U1001
6console.log(jsonObj.active) // true
7console.log(jsonObj.tags[0]) // new
多层嵌套的 JSON 字符串长什么样
有些系统会把一个 JSON 再塞进另一个 JSON 的字符串字段里,这时需要按层级多次 JSON.parse。
nested-string.json
1{
2 "topic": "order.sync",
3 "payload": "{\"orderId\":\"SO-1001\",\"buyer\":{\"id\":\"U200\"},\"meta\":\"{\\\"traceId\\\":\\\"t-900\\\",\\\"retry\\\":2}\"}"
4}
parse-nested.js
1const outerText = `{
2 "topic": "order.sync",
3 "payload": "{\"orderId\":\"SO-1001\",\"buyer\":{\"id\":\"U200\"},\"meta\":\"{\\\"traceId\\\":\\\"t-900\\\",\\\"retry\\\":2}\"}"
4}`
5
6const level1 = JSON.parse(outerText) // 第一层对象
7const level2 = JSON.parse(level1.payload) // 第二层对象
8const level3 = JSON.parse(level2.meta) // 第三层对象
9
10console.log(level1.topic) // order.sync
11console.log(level2.orderId) // SO-1001
12console.log(level3.traceId) // t-900
- 先 parse 外层,再 parse 内层字符串字段。
- 看到大量 \\" 就说明你在处理“字符串里的 JSON”。
- 如果你可以控制接口设计,优先直接返回对象,尽量避免多层字符串嵌套。
实战:写一个最小可用 API 响应
下面是一段可直接用于接口返回的 JSON。你可以复制到解析器里验证。
api-response.json
1{
2 "code": 0,
3 "message": "ok",
4 "data": {
5 "userId": "U10086",
6 "nickname": "tom",
7 "roles": ["admin", "editor"]
8 },
9 "requestId": "req-20260531-0001"
10}
快速自检:直接用 JSON 解析工具
建议直接在本站“json 在线解析”里验证。步骤比写脚本更快,也更直观。
- 点击下面按钮,打开“json 在线解析”。
- 先粘贴“合法示例”,确认显示 JSON 有效。
- 再粘贴“故意错误示例”,观察报错位置和报错信息。
合法示例(应解析成功)
1{
2 "name": "json",
3 "version": 1,
4 "enabled": true
5}
故意错误示例(应提示报错)
1{
2 "name": "json",
3 "version": 1,
4}
记住一句话:JSON 规则少,但非常严格。
只要坚持“双引号、无尾逗号、无注释、值类型合法”,你就已经超过很多初学者了。