如何使用 JSON.parse() 和 JSON.stringify()

介绍

在所有现代浏览器中可用的JSON对象(LINK0)有两个有用的方法来处理JSON格式化的内容:parse和stringify。

「JSON.PARSE()」

‘JSON.parse()’ 将 JSON 字符串转换为 JavaScript 对象。

1let userStr = '{"name":"Sammy","email":"[email protected]","plan":"Pro"}';
2
3let userObj = JSON.parse(userStr);
4
5console.log(userObj);

执行此代码将产生以下输出:

1[secondary_label Output]
2{name: 'Sammy', email: '[email protected]', plan: 'Pro'}
3  email: "[email protected]"
4  name: "Sammy"
5  plan: "Pro"

跟踪字符串在 JSON 中是不有效的,因此如果传递的字符串有跟踪字符串,则JSON.parse()会引出错误。

JSON.parse() 可以将函数作为第二个参数,在返回对象值之前可以转换对象值。

在这里,对象的值被转换为parse方法的返回对象中的 uppercase:

 1let userStr = '{"name":"Sammy","email":"[email protected]","plan":"Pro"}';
 2
 3let userObj = JSON.parse(userStr, (key, value) => {
 4  if (typeof value === 'string') {
 5    return value.toUpperCase();
 6  }
 7  return value;
 8});
 9
10console.log(userObj);

执行此代码将产生以下输出:

1[secondary_label Output]
2{name: 'SAMMY', email: '[email protected]', plan: 'PRO'}
3  email: "[email protected]"
4  name: "SAMMY"
5  plan: "PRO"

价值观已经被转化为高级字符。

「JSON.stringify()」

JSON.stringify() 将 JavaScript 对象转换为 JSON 字符串。

1let userObj = {
2  name: "Sammy",
3  email: "[email protected]",
4  plan: "Pro"
5};
6
7let userStr = JSON.stringify(userObj);
8
9console.log(userStr);

执行此代码将产生以下输出:

1[secondary_label Output]
2{"name":"Sammy","email":"[email protected]","plan":"Pro"}

JSON.stringify() 可以使用两个额外的参数. 第一个参数是‘代替’函数,第二个参数是‘字符串’或‘数字’值,可作为返回字符串的‘空间’使用。

可以使用替换函数来过滤值,因为任何作为未定义返回的值将不在返回的字符串中:

 1let userObj = {
 2  name: "Sammy",
 3  email: "[email protected]",
 4  plan: "Pro"
 5};
 6
 7function replacer(key, value) {
 8  console.log(typeof value);
 9  if (key === 'email') {
10    return undefined;
11  }
12  return value;
13}
14
15let userStrReplacer = JSON.stringify(userObj, replacer);
16
17console.log(userStrReplacer);

执行此代码将产生以下输出:

1[secondary_label Output]
2{"name":"Sammy","plan":"Pro"}

电子邮件密钥值对已从对象中删除。

还有一个带有空间论点的例子:

1let userObj = {
2  name: "Sammy",
3  email: "[email protected]",
4  plan: "Pro"
5};
6
7let userStrSpace = JSON.stringify(user, null, '...');
8
9console.log(userStrSpace);

执行此代码将产生以下输出:

1[secondary_label Output]
2{
3..."name": "Sammy",
4..."email": "[email protected]",
5..."plan": "Pro"
6}

标签已被......所取代。

结论

在本教程中,您使用了JSON.parse()和JSON.stringify()方法. 如果您想了解更多关于在JavaScript中使用JSON的信息,请参阅我们的如何在JavaScript中使用JSON(LINK0)教程。

有关 JavaScript 编码的更多信息,请参阅我们的 How To Code in JavaScript系列,或查看我们的 JavaScript 主题页面的练习和编程项目。