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

英文 | https://www.digitalocean.com/community/tutorials/js-json-parse-stringify

翻译 | 杨小爱

介绍

JSON 对象在所有现代浏览器中都可用，它有两种有用的方法来处理 JSON 格式的内容：解析和字符串化。

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

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

还有一个传入空间参数的示例：

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() 方法。

学习更多技能

请点击下方公众号