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

介绍

The JSON object在所有现代浏览器中都可用，有两种有用的方法来处理 JSON 格式的内容：parse and 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 method:

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 or Number用作的值space在返回的字符串中。

替换函数可用于过滤掉值，因为任何值返回为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"}

The 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() and JSON.stringify()方法。如果您想了解有关在 Javascript 中使用 JSON 的更多信息，请查看我们的如何在 JavaScript 中使用 JSON教程。

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