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

介绍

所有现代浏览器都提供该JSON对象，它有两种有用的方法来处理 JSON 格式的内容：parse和stringify。

JSON.parse()

JSON.parse()接受 JSON 字符串并将其转换为 JavaScript 对象。

let userStr = '{"name":"Sammy","email":"sammy@example.com","plan":"Pro"}';

let userObj = JSON.parse(userStr);

console.log(userObj);

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

Output
{name: 'Sammy', email: 'sammy@example.com', plan: 'Pro'}
  email: "sammy@example.com"
  name: "Sammy"
  plan: "Pro"

尾随逗号在 JSON 中无效，因此JSON.parse()如果传递给它的字符串有尾随逗号，则会引发错误。

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

这里对象的值在方法返回的对象中被转换为大写parse：

let userStr = '{"name":"Sammy","email":"sammy@example.com","plan":"Pro"}';

let userObj = JSON.parse(userStr, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
});

console.log(userObj);

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

Output
{name: 'SAMMY', email: 'SAMMY@EXAMPLE.COM', plan: 'PRO'}
  email: "SAMMY@EXAMPLE.COM"
  name: "SAMMY"
  plan: "PRO"

这些值已转换为大写字符。

JSON.stringify()

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

let userObj = {
  name: "Sammy",
  email: "sammy@example.com",
  plan: "Pro"
};

let userStr = JSON.stringify(userObj);

console.log(userStr);

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

Output
{"name":"Sammy","email":"sammy@example.com","plan":"Pro"}

JSON.stringify()可以接受两个附加参数。第一个是函数replacer。第二个是用作返回字符串中的String或 的值。Numberspace

replacer 函数可用于过滤值，因为任何返回的值都undefined将不在返回的字符串中：

let userObj = {
  name: "Sammy",
  email: "sammy@example.com",
  plan: "Pro"
};

function replacer(key, value) {
  console.log(typeof value);
  if (key === 'email') {
    return undefined;
  }
  return value;
}

let userStrReplacer = JSON.stringify(userObj, replacer);

console.log(userStrReplacer);

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

Output
{"name":"Sammy","plan":"Pro"}

键值email对已从对象中删除。

space传入参数的示例：

let userObj = {
  name: "Sammy",
  email: "sammy@example.com",
  plan: "Pro"
};

let userStrSpace = JSON.stringify(user, null, '...');

console.log(userStrSpace);

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

Output
{
..."name": "Sammy",
..."email": "sammy@example.com",
..."plan": "Pro"
}

缩进已被替换为...。

结论

在本教程中，您使用了JSON.parse()和JSON.stringify()方法。如果您想了解有关在 JavaScript 中使用 JSON 的更多信息，请查看我们的如何在 JavaScript 中使用 JSON教程。

有关使用 JavaScript 编码的更多信息，请查看我们的“如何使用 JavaScript 编码”系列，或查看我们的 JavaScript 主题页面以了解练习和编程项目。