讲师中心 微信公众号

工具推荐

视频效率加速
AniShort
AniShort

AI短剧协同制作平台

剧云
剧云

中文短剧剧本制作平台

updream

一键生成高质量推广成片

立刻MV
立刻MV

低成本歌曲 MV、视频生成

如何操作JSON_JavaScript中JSON.parse和JSON.stringify的作用是什么

陌丽君_6683

陌丽君_6683

发布时间:2026-01-05 20:52:02

|

188人浏览过

|

来源于php中文网

原创

JSON.parse()将JSON字符串转为JavaScript对象,JSON.stringify()将其转回字符串;二者不互逆,Date、NaN等类型会丢失或出错,使用时需校验输入并处理边界情况。

如何操作json_javascript中json.parse和json.stringify的作用是什么

JSON.parse 把字符串转成 JavaScript 对象

当你从接口拿到响应、读取本地存储或解析配置文件时,数据通常是字符串形式的 JSON,比如 "{\"name\":\"Alice\",\"age\":30}"。直接用它会报错,因为 JS 不认识这种格式的字符串。

这时候必须用 JSON.parse() 转成真正的对象才能访问属性:

const str = '{"name":"Alice","age":30}';
const obj = JSON.parse(str);
console.log(obj.name); // "Alice"
  • 如果字符串格式非法(比如多了一个逗号、用了单引号、缺少引号),JSON.parse() 会直接抛出 SyntaxError
  • 它不执行代码,也不解析函数、undefined、Date 对象等非标准 JSON 类型——这些都会被忽略或报错
  • 可以传入第二个参数 reviver 函数,在解析过程中过滤或转换字段值

JSON.stringify 把 JavaScript 值转成 JSON 字符串

向后端发请求、存入 localStorage、记录日志时,往往需要把对象变成字符串。但 toString() 或模板字符串都不行,它们输出的是 JS 表示法,不是标准 JSON。

JSON.stringify() 是唯一安全通用的序列化方式:

Expanso yaml-to-json
Expanso yaml-to-json

使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。

下载

立即学习“Java免费学习笔记(深入)”;

const obj = { name: "Alice", age: 30 };
const str = JSON.stringify(obj);
console.log(str); // '{"name":"Alice","age":30}'
  • 会自动跳过 undefined、函数、Symbol 类型的键值对
  • 遇到循环引用(比如对象 A 的属性指向自身)会直接抛出 TypeError
  • 支持第三个参数控制缩进(如 2 或 " "),方便调试输出
  • 第二个参数可以是数组(指定要保留的键名)或函数(自定义序列化逻辑)

parse 和 stringify 不是互逆的——尤其注意 Date 和 NaN

很多人以为 JSON.parse(JSON.stringify(x)) 总能还原原值,其实不行。最典型的是 Date 对象:

const d = new Date();
const str = JSON.stringify(d); // '"2024-05-12T08:30:45.123Z"'
const parsed = JSON.parse(str); // 字符串,不是 Date 实例
  • new Date(parsed) 可以补救,但得手动做
  • NaN、Infinity、-Infinity 经过 stringify 后变成 null
  • undefined 作为对象属性值会被忽略;作为数组元素则变成 null
  • 正则表达式、Map、Set、Buffer 等原生类型无法被原样序列化

实际开发中容易漏掉的边界情况

线上 bug 很多来自没校验 parse 的输入或没处理 stringify 的失败场景。

  • 别直接 JSON.parse(localStorage.getItem("user")) —— 如果值是 null 或空字符串,会报错。先判断再解析
  • 后端返回的 JSON 可能带 BOM 或不可见控制字符,导致 parse 失败;可以用 str.trim().replace(/^\uFEFF/, '') 预处理
  • 想深拷贝对象?JSON.parse(JSON.stringify(obj)) 最快但有缺陷;需要保类型就用 structuredClone(现代环境)或专门的库
  • 服务端返回 204 No Content 时,响应体为空,JSON.parse("") 必然失败

真正麻烦的从来不是语法,而是那些看似合法、实则含糊的字符串输入,以及你以为“只是临时用一下”的隐式转换。

热门AI工具

更多
Flowith
Flowith Hot

Flowith是一款基于画布和智能体工作流的 AI 协作工作空间。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

函子Zion

一款支持AI搭建、可视化编辑和多端发布的全栈无代码开发平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2295

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3762

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1256

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

4379

2025.09.10

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4916

2023.06.20

正则表达式不包含
正则表达式不包含

正则表达式,又称规则表达式,,是一种文本模式,包括普通字符和特殊字符,是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串,通常被用来检索、替换那些符合某个模式的文本。php中文网给大家带来了有关正则表达式的相关教程以及文章,希望对大家能有所帮助。

3381

2023.07.05

java正则表达式语法
java正则表达式语法

java正则表达式语法是一种模式匹配工具,它非常有用,可以在处理文本和字符串时快速地查找、替换、验证和提取特定的模式和数据。本专题提供java正则表达式语法的相关文章、下载和专题,供大家免费下载体验。

9442

2023.07.05

java正则表达式匹配字符串
java正则表达式匹配字符串

在Java中,我们可以使用正则表达式来匹配字符串。本专题为大家带来java正则表达式匹配字符串的相关内容,帮助大家解决问题。

832

2023.08.11

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

60

2026.11.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn