JavaScript 如何获取 JSON 字符串内容:从解析到数据提取
在 Web 开发中,JSON(JavaScript Object Notation)作为一种轻量级的数据交换格式,被广泛应用于前后端数据交互,很多时候,服务器返回的数据或本地存储的信息都是以 JSON 字符串的形式存在,而 JavaScript 需要解析这些字符串才能提取其中的具体内容,本文将详细介绍 JavaScript 中获取 JSON 字符串内容的完整流程,包括解析方法、数据提取技巧及常见注意事项。
核心步骤:将 JSON 字符串解析为 JavaScript 对象/数组
要获取 JSON 字符串的内容,首先需要将其转换为 JavaScript 可直接操作的对象(Object)或数组(Array),这一过程通常通过 JSON.parse() 方法实现。
什么是 JSON 字符串?
JSON 字符串是指符合 JSON 格式规范的字符串,它以 开始、以 结束(对象格式),或以 "[" 开始、以 "]" 结束(数组格式)。
const jsonString = '{"name": "张三", "age": 25, "hobbies": ["reading", "coding"]}';
const jsonArrayString = '[{"id": 1, "city": "北京"}, {"id": 2, "city": "上海"}]';
使用 JSON.parse() 解析
JSON.parse() 是 JavaScript 内置的全局方法,用于将 JSON 字符串解析为对应的 JavaScript 对象或数组,其语法为:
const obj = JSON.parse(jsonString);
示例解析:
-
解析 JSON 对象字符串:
const userStr = '{"name": "李四", "age": 30, "isStudent": false}'; const userObj = JSON.parse(userStr); console.log(userObj); // 输出: {name: "李四", age: 30, isStudent: false} console.log(userObj.name); // 输出: "李四"(通过点语法提取属性) console.log(userObj.hobbies[0]); // 输出: "reading"(如果存在嵌套数组) -
解析 JSON 数组字符串:
const citiesStr = '[{"name": "广州", "population": 15000}, {"name": "深圳", "population": 17000}]'; const citiesArr = JSON.parse(citiesStr); console.log(citiesArr); // 输出: [{name: "广州", population: 15000}, {name: "深圳", population: 17000}] console.log(citiesArr[0].name); // 输出: "广州"(通过索引和点语法提取数组元素属性)
JSON.parse() 的注意事项
-
语法错误处理:JSON 字符串格式不正确(如引号缺失、逗号多余等),
JSON.parse()会抛出SyntaxError,建议使用try-catch捕获异常:const invalidJsonStr = "{'name': '王五'}"; // 错误:JSON 要求键名必须用双引号 try { const obj = JSON.parse(invalidJsonStr); console.log(obj); } catch (error) { console.error("JSON 解析失败:", error.message); // 输出: JSON 解析失败: Unexpected token ' in JSON } -
安全性问题:避免直接解析来自不可信源的 JSON 字符串(如用户输入),可能存在代码注入风险,如果必须解析,需先对字符串进行校验或使用安全的解析库。
从解析后的对象/数组中提取具体内容
成功将 JSON 字符串解析为 JavaScript 对象或数组后,即可通过常规的对象/数组操作方法提取所需数据。
提取对象属性值
(1)点语法()
适用于键名为合法标识符(无空格、特殊字符,不以数字开头)的情况:
const productStr = '{"id": 101, "productName": "iPhone 15", "price": 5999}';
const product = JSON.parse(productStr);
console.log(product.productName); // 输出: "iPhone 15"
console.log(product.price); // 输出: 5999
(2)方括号语法([])
适用于键名包含特殊字符、空格,或动态键名的情况:
const userInfoStr = '{"user name": "赵六", "user-age": 28, "1st login": "2023-01-01"}';
const userInfo = JSON.parse(userInfoStr);
console.log(userInfo["user name"]); // 输出: "赵六"(键名有空格,必须用方括号)
console.log(userInfo["user-age"]); // 输出: 28(键名含特殊字符)
console.log(userInfo["1st login"]); // 输出: "2023-01-01"(键名以数字开头)
(3)动态键名提取
当键名存储在变量中时,需结合方括号语法:
const dataStr = '{"a": 1, "b": 2, "c": 3}';
const data = JSON.parse(dataStr);
const key = "b";
console.log(data[key]); // 输出: 2(通过变量 key 动态访问)
提取数组元素
(1)索引访问
通过索引(从 0 开始)直接获取数组元素:
const scoresStr = '[85, 92, 78, 90]'; const scores = JSON.parse(scoresStr); console.log(scores[0]); // 输出: 85(第一个元素) console.log(scores[3]); // 输出: 90(第四个元素)
(2)遍历数组
使用 for、for...of 或数组方法(如 forEach、map)提取所有元素:
const usersStr = '[{"name": "小明", "age": 20}, {"name": "小红", "age": 22}]';
const users = JSON.parse(usersStr);
// for...of 遍历
for (const user of users) {
console.log(user.name, user.age); // 输出: 小明 20 小红 22
}
// map 提取特定属性
const names = users.map(user => user.name);
console.log(names); // 输出: ["小明", "小红"]
嵌套 JSON 数据提取
JSON 数据常存在多层嵌套(对象内嵌套对象或数组),需通过“逐层访问”提取数据:
const nestedStr = '{
"school": "XX大学",
"classes": [
{
"className": "计算机1班",
"students": [
{"name": "张三", "scores": { "math": 90, "english": 85 }},
{"name": "李四", "scores": { "math": 88, "english": 92 }}
]
}
]
}';
const nestedData = JSON.parse(nestedStr);
// 提取第一个学生的数学成绩
const mathScore = nestedData.classes[0].students[0].scores.math;
console.log(mathScore); // 输出: 90
// 提取所有学生的英语成绩
const englishScores = nestedData.classes[0].students.map(student => student.scores.english);
console.log(englishScores); // 输出: [85, 92]
特殊场景处理
解析后为 null 的情况
JSON 字符串为 "null",JSON.parse() 会返回 null:
const nullStr = "null"; const result = JSON.parse(nullStr); console.log(result); // 输出: null console.log(typeof result); // 输出: "object"
处理日期等特殊类型
JSON 原生不支持 Date、Function 等类型,若需传输日期,通常将其转换为字符串(如 ISO 格式),解析后再手动转换:
const dateStr = '{"event": "会议", "time": "2023-10-01T14:30:00"}';
const eventData = JSON.parse(dateStr);
eventData.time = new Date(eventData.time); // 将字符串转换为 Date 对象
console.log(eventData.time); // 输出: 2023-10-01T14:30:00.000Z(Date 对象)
使用 JSON.parse() 的第二个参数( reviver 函数)
JSON.parse() 支持第二个参数 reviver,这是一个函数,可在解析过程中对每个键值对进行预处理,常用于日期转换或数据格式修正:
const userStr = '{"name": "王五", "loginTime": "2023-10-01T09:00:00"}';
const user = JSON.parse(userStr, (key, value) => {


还没有评论,来说两句吧...