JSON.stringify()和JSON.parse()

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: JSON.stringify()和JSON.parse()

JSON.stringify()

JSON.stringify() 是 JavaScript 中的一个内置方法,用于将一个 JavaScript 值(对象或值)转换为一个 JSON 字符串。这个方法对于在客户端和服务器之间传输数据特别有用,因为 JSON 是一种轻量级的数据交换格式,它基于文本,并且易于人阅读和编写,同时也易于机器解析和生成。


以下是一些 JSON.stringify() 的基本用法和示例:

基本用法

javascript复制代码
const obj = {  
  name: 'John',  
  age: 30,  
  city: 'New York'  
};  
  
const jsonString = JSON.stringify(obj);  
console.log(jsonString); // 输出: '{"name":"John","age":30,"city":"New York"}'

替换函数

你可以提供一个替换函数(replacer),用于在字符串化过程中过滤或转换数据:

javascript复制代码
 
 
 
function replacer(key, value) {  
  if (typeof value === 'string') {  
    return undefined; // 过滤掉所有字符串  
  }  
  return value;  
}  
  
const obj = {  
  name: 'John',  
  age: 30,  
  city: 'New York'  
};  
  
const jsonString = JSON.stringify(obj, replacer);  
console.log(jsonString); // 输出: '{"age":30}'

缩进和空格

你可以使用第三个参数来指定缩进级别(或空格数):

javascript复制代码
 
 
 
const obj = {  
  name: 'John',  
  age: 30,  
  city: 'New York'  
};  
  
const prettyJsonString = JSON.stringify(obj, null, 2);  
console.log(prettyJsonString);  
// 输出:  
// {  
//   "name": "John",  
//   "age": 30,  
//   "city": "New York"  
// }

在这个例子中,我们传递了 null 作为第二个参数(因为我们不需要替换函数),并传递了 2 作为第三个参数,表示我们希望每个级别缩进两个空格。


注意事项

循环引用(即对象属性直接或间接地引用自己)会导致 JSON.stringify() 抛出一个错误。

函数和 undefined 会被 JSON.stringify() 忽略(在字符串化过程中不会包含它们)。

对象的 getter 方法在字符串化过程中不会被调用。

日期对象会被转换为一个字符串(按照 ISO 8601 格式)。

NaN 和 Infinity 会被替换为 null。

数组和对象会被递归地字符串化。

希望这可以帮助你更好地理解 JSON.stringify() 方法!


JSON.parse()

JSON.parse() 是 JavaScript 中的一个内置方法,用于将一个 JSON 字符串转换回 JavaScript 对象或值。这个方法在处理从服务器接收到的 JSON 数据或在本地解析存储的 JSON 字符串时特别有用。


以下是一些 JSON.parse() 的基本用法和示例:

基本用法

javascript复制代码
 
 
 
const jsonString = '{"name":"John","age":30,"city":"New York"}';  
  
const obj = JSON.parse(jsonString);  
console.log(obj.name); // 输出: John  
console.log(obj.age);  // 输出: 30  
console.log(obj.city); // 输出: New York

处理错误

由于 JSON.parse() 在遇到无效的 JSON 字符串时会抛出一个错误,因此通常建议使用 try...catch 语句来捕获和处理这些错误:

javascript复制代码
 
 
 
const jsonString = 'Invalid JSON string';  
  
try {  
  const obj = JSON.parse(jsonString);  
  console.log(obj);  
} catch (error) {  
  console.error('An error occurred:', error);  
}

使用 reviver 函数

JSON.parse() 还接受一个可选的第二个参数,这是一个转换函数(通常被称为 reviver 函数),该函数可以在返回之前对解析的对象中的每个键值对进行处理:

javascript复制代码
 
 
 
const jsonString = '{"name":"John","age":30,"city":"New York"}';  
  
function reviver(key, value) {  
  if (key === 'age' && typeof value === 'number') {  
    return value + 1; // 将年龄增加 1  
  }  
  return value;  
}  
  
const obj = JSON.parse(jsonString, reviver);  
console.log(obj.name); // 输出: John  
console.log(obj.age);  // 输出: 31  
console.log(obj.city); // 输出: New York

在这个例子中,reviver 函数在解析过程中检查了每个键值对。如果键是 'age' 并且值是数字类型,那么它返回的值将是原值加 1。


注意事项

字符串必须是一个有效的 JSON 格式,否则 JSON.parse() 将抛出一个错误。

JSON 字符串中的属性名称必须用双引号(")括起来。使用单引号(')或没有引号都将导致解析错误。

如果 JSON 字符串包含注释或尾随逗号,那么 JSON.parse() 将无法正确解析它,因为这些特性不是 JSON 标准的一部分。

JSON.parse() 只能解析 JSON 字符串,不能解析 JavaScript 对象字面量或表达式。例如,它不能解析 eval() 可以处理的代码字符串。

补充

当您尝试使用 JSON.parse() 解析一个无效的 JSON 字符串时,JavaScript 会抛出一个 SyntaxError。无效的 JSON 字符串可能包含以下常见问题:


字符串未用双引号括起来:在 JSON 中,所有的字符串必须使用双引号(")括起来,而不是单引号(')或没有引号。

json复制代码
 
 
 
// 无效的 JSON  
{ name: 'John' }  
  
// 有效的 JSON  
{ "name": "John" }
  1. 使用了 JavaScript 注释:JSON 不支持注释。
json复制代码
 
 
 
// 无效的 JSON  
{  
  // 这是一个注释  
  "name": "John"  
}  
  
// 有效的 JSON(没有注释)  
{  
  "name": "John"  
}
  1. 尾随逗号:JSON 对象或数组的最后一个元素后不应有逗号。
// 无效的 JSON  
{  
  "name": "John",  
  "age": 30,  
}  
  
// 有效的 JSON  
{  
  "name": "John",  
  "age": 30  
}
  1. 使用了 JavaScript 类型的标识符,如 true、false 或 null,但拼写错误或格式错误。
json复制代码
 
 
 
// 无效的 JSON  
{  
  "active": True  
}  
  
// 有效的 JSON  
{  
  "active": true  
}
  1. 数字格式错误,如使用逗号作为千位分隔符或包含非法字符。
json复制代码
 
 
 
// 无效的 JSON  
{  
  "price": 1,000.50  
}  
  
// 有效的 JSON  
{  
  "price": 1000.5  
}
  1. 使用了 JavaScript 的特殊值,如 undefined、function 或 NaN,这些都是 JSON 不支持的。
json复制代码
 
 
 
// 无效的 JSON(尝试包含 JavaScript 类型的值)  
{  
  "value": undefined  
}  
  
// 有效的 JSON(使用 null 表示空值)  
{  
  "value": null  
}
  1. 对象或数组的键名不是有效的字符串。
json复制代码
 
 
 
// 无效的 JSON(键名不是字符串)  
{  
  age: 30  
}  
  
// 有效的 JSON(键名是字符串)  
{  
  "age": 30  
}

如果您尝试解析一个无效的 JSON 字符串,您应该使用 try...catch 语句来捕获 SyntaxError 并适当地处理它。例如:

const jsonString = '{ name: "John" }'; // 无效的 JSON  
  
try {  
  const obj = JSON.parse(jsonString);  
  console.log(obj);  
} catch (error) {  
  console.error('JSON 解析错误:', error);  
}

在上面的示例中,因为 jsonString 是一个无效的 JSON 字符串,所以 JSON.parse() 会抛出一个 SyntaxError,该错误会被 catch 语句捕获并打印到控制台。

目录
相关文章
|
7月前
|
JSON 自然语言处理 前端开发
【面试题】JSON.stringify 和fast-json-stringify有什么区别
【面试题】JSON.stringify 和fast-json-stringify有什么区别
103 1
|
7月前
|
JSON 前端开发 Java
【面试题】对 JSON.stringify()与JSON.parse() 理解
【面试题】对 JSON.stringify()与JSON.parse() 理解
|
7月前
|
JSON API 数据格式
JSON.stringify()与JSON.parse()没有你想的那样简单
JSON.stringify()与JSON.parse()没有你想的那样简单
|
7月前
|
JSON JavaScript 数据格式
JS 将 json 对象转成字符串并保留格式 - JSON.stringify()
JS 将 json 对象转成字符串并保留格式 - JSON.stringify()
231 0
|
6月前
|
JSON 数据格式
Uncaught SyntaxError: JSON.parse: expected property name or '}' at line 1 column 14 of the JSON data问题如何处理
【6月更文挑战第15天】Uncaught SyntaxError: JSON.parse: expected property name or '}' at line 1 column 14 of the JSON data问题如何处理
253 5
|
2月前
|
JSON JavaScript 前端开发
JSON.parse()和JSON.stringify()用法
JSON.parse()和JSON.stringify()用法
70 1
|
7月前
|
JSON 数据格式
Uncaught SyntaxError: JSON.parse: expected property name or '}' at line 1 column 14 of the JSON data问题处理
【5月更文挑战第14天】Uncaught SyntaxError: JSON.parse: expected property name or '}' at line 1 column 14 of the JSON data问题处理
232 0
|
5月前
|
JavaScript
js【详解】深拷贝 (含 JSON.parse(JSON.stringify(obj)) 的缺陷,5种手写深拷贝)
js【详解】深拷贝 (含 JSON.parse(JSON.stringify(obj)) 的缺陷,5种手写深拷贝)
181 0
|
JSON JavaScript 数据格式
JS 将 json 对象转成字符串并保留格式 - JSON.stringify()
JS 将 json 对象转成字符串并保留格式 - JSON.stringify()
191 0
|
7月前
|
存储 JSON 前端开发
让你的对象变得拗口:JSON.stringify(),我把对象夹进了 JSON 魔法帽!
在 JavaScript 中,JSON.stringify() 是一个内置函数,用于将 JavaScript 对象转换为 JSON 字符串。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,广泛用于前后端数据传输和存储。本文将详细介绍 JSON.stringify() 的属性、应用场景,并提供一个完整而优雅的实现,处理循环引用、特殊类型(如日期和正则表达式)以及性能相关的问题。同时,我们还将讨论注意事项和相关引用资料。