JavaScript 解析 JSON 对象与字符串的方法

码头散步

发布时间：2026-10-14| 6人浏览过

原创

在 JavaScript 开发中，解析和处理 JSON 数据是常见需求。本文将详细介绍如何利用 JSON 对象和原生方法将字符串转换为可操作的对象，以及如何通过代码实例演示数据的读取、修改与序列化过程。

目标

掌握在浏览器环境中读取、转换和处理 JSON 格式数据的核心技术，实现从数据源到应用逻辑的无缝衔接。

准备条件

现代 Web 浏览器（如 Chrome, Firefox, Edge）。
具备基础的 JavaScript 语法知识。

第1步：访问原生 JSON 对象数据

目的：展示如何直接在 JavaScript 中定义并读取 JSON 格式的嵌套数据。

入口：浏览器控制台或任何 JS 运行环境。

动作：创建一个包含各种数据类型（字符串、数字、对象、数组）的 JSON 对象。

const user = {
    "username": "tom",
    "age": 20,
    "info": {"tel": "123456", "cellphone": "98765"},
    "address": [
        {"city": "shanghai", "postcode": "201203"},
        {"city": "suzhou", "postcode": "200000"}
    ]
};

重要参数：user.address[0] 用于访问第一个地址元素。

完成状态：可通过 user.username 等方式获取对应数值或对象引用。

第2步：修改 JSON 对象属性

目的：演示如何在内存中动态更新 JSON 数据。

入口：上述已创建的 user 对象。

动作：直接通过点符号或方括号语法覆盖属性值。

user.username = "jerry";

完成状态：再次访问 user.username 时将返回新值 "jerry"。

第3步：将 JSON 字符串转换为对象（推荐方式）

目的：安全地将来自网络 API 或其他来源的 JSON 文本解析为 JavaScript 对象。

入口：一个符合 JSON 规范的字符串变量。

动作：使用全局 JSON 对象的 parse() 方法。

function myParse() {
    var str = '{"name":"Violet","occupation":"character"}';
    // 注意：应使用 JSON.parse(str) 而非 eval()
    var obj = JSON.parse(str);
    console.log(obj.name); // 输出: Violet
}

重要参数：输入必须是标准的 JSON 格式字符串。

完成状态：obj 变为可交互的 JavaScript 对象。

第4步：将 JSON 对象转换为字符串

目的：如需将内存中的对象序列化为文本以便传输或存储。

入口：上一步获得的 obj 对象。

动作：调用 JSON.stringify() 方法。

var jsonString = JSON.stringify(obj);

完成状态：jsonString 内容为 '{"name":"Violet","occupation":"character"}'。

第5步：使用 eval() 进行转换（不推荐）

目的：了解历史上存在的 JSON 解析方式，主要用于兼容极老旧的代码库。

入口：JSON 字符串。

动作：利用 eval() 执行拼接后的 JavaScript 表达式。

function myEval() {
    var str = '{"name":"Violet","occupation":"character"}';
    // 风险：eval 会执行任意代码，存在安全风险
    var bj = eval('(' + str + ')');
    console.log(bj.name);
}

风险提醒：eval() 可能执行恶意脚本，生产环境中应始终使用 JSON.parse()。

排错与建议

SyntaxError: 如果 JSON 格式不正确（如缺少引号、尾部逗号），JSON.parse() 将抛出错误。确保字符串严格遵循 JSON 标准。
安全性：避免在前端直接使用用户输入的字符串配合 eval() 进行解析，以防止 XSS 攻击。
兼容性：所有主流现代浏览器均支持 JSON.parse() 和 JSON.stringify()，无需额外下载第三方库。