JavaScript JSON对象转字符串

发布时间：2023-05-20

一、JSON对象简介

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它基于JavaScript语法，但与之不同，它可以被解析为一种独立于语言的数据类型。 JSON由两种结构组成：键值对和数组。键值对由属性名称和属性值组成，用冒号分隔；数组由一组值组成，用逗号分隔。属性名必须是字符串，属性值可以是字符串、数字、对象、数组、布尔值或者null。

二、JSON对象转字符串的常用方法

1. JSON.stringify()

JSON.stringify()是将JSON对象转为字符串的主要方法，它可以接收三个参数：要转换的对象、转换函数以及每个属性对应的缩进。

let obj = {name: "Tom", age: 18};
let str1 = JSON.stringify(obj);
// str1: {"name":"Tom","age":18}
let str2 = JSON.stringify(obj, ["name"]);
// str2: {"name":"Tom"}
let str3 = JSON.stringify(obj, null, 2);
// str3: {
//     "name": "Tom",
//     "age": 18
// }

第一个参数是要转换的对象；第二个参数是转换函数或数组；第三个参数表示对缩进进行定义，它可以设置为数字或字符串，代表缩进的空格数或其他字符。

2. JSON.parse()

JSON.parse()是将JSON字符串转为对象的主要方法，它只接收一个参数，即要转换的JSON字符串。

let str = '{"name":"Tom","age":18}';
let obj = JSON.parse(str);
// obj: {name: "Tom", age: 18}

需要注意的是，JSON字符串必须符合语法规范，否则将会抛出语法错误。

3. 组合使用 JSON.stringify() 和 JSON.parse()

有时候，我们需要将一个对象先转成JSON字符串，然后再将JSON字符串转回对象，这个时候我们就可以使用JSON.stringify()和JSON.parse()组合使用。

let obj = {name: "Tom", age: 18};
let str = JSON.stringify(obj);
// str: {"name":"Tom","age":18}
let newObj = JSON.parse(str);
// newObj: {name: "Tom", age: 18}

三、JSON字符串转义

在JSON字符串中，有一些字符需要进行转义，例如双引号、反斜杠等。JSON.stringify()方法可以自动进行转义，而JSON.parse()方法会自动将转义字符还原。

let obj = {
  name: "Tom",
  description: "He said, \"I'm happy.\"",
  path: "C:\\Program Files\\",
  date: new Date()
};
let str = JSON.stringify(obj);
// str: {"name":"Tom","description":"He said, \"I'm happy.\"","path":"C:\\\\Program Files\\\\"}
let newObj = JSON.parse(str);
// newObj: {name: "Tom", description: "He said, "I'm happy."", path: "C:\Program Files\", date: "2021-08-03T09:02:41.414Z"}

四、JSON字符串格式化

当JSON字符串比较长或者嵌套层数比较深时，阅读起来会比较困难。这个时候，我们可以对JSON字符串进行格式化，使其更加易读。

let obj = {
  name: "Tom",
  age: 18,
  friend: {
    name: "Jerry",
    age: 20
  },
  skills: ["JavaScript", "HTML", "CSS"]
};
let str = JSON.stringify(obj, null, 2);
console.log(str);
// {
//   "name": "Tom",
//   "age": 18,
//   "friend": {
//     "name": "Jerry",
//     "age": 20
//   },
//   "skills": [
//     "JavaScript",
//     "HTML",
//     "CSS"
//   ]
// }

第二个参数设置为2，表示缩进两个空格。

五、JSON对象转字符串——常见问题

1. 循环引用问题

JSON.stringify()方法在遇到循环引用时会报错，如下所示：

let obj = {name: "Tom", age: 18};
obj.friend = obj;
let str = JSON.stringify(obj); // 报错

我们可以通过手动移除循环引用或者添加 toJSON() 方法来解决循环引用问题。

// 手动移除循环引用
let obj = {name: "Tom", age: 18};
let friend = {name: "Jerry", age: 20};
obj.friend = friend;
friend.friend = obj;
friend.friend = undefined;
let str = JSON.stringify(obj); // 正常
// 添加toJSON()方法
let obj = {name: "Tom", age: 18};
obj.friend = obj;
obj.toJSON = function() {
  let newObj = Object.assign({}, this);
  newObj.friend = undefined;
  return newObj;
}
let str = JSON.stringify(obj); // 正常

2. 对象属性顺序问题

JSON.stringify()方法默认情况下会按照属性名称的字母顺序进行排列。如果希望按照自己设置的顺序进行排列，可以传入一个数组。

let obj = {name: "Tom", age: 18};
let str = JSON.stringify(obj, ["age", "name"]);
// str: {"age":18,"name":"Tom"}

3. NaN 和 Infinity 问题

JSON.stringify()方法不能正确处理NaN和Infinity这两个特殊值。可以通过定义 toJSON() 方法来解决这个问题。

let obj = {name: "Tom", age: NaN, height: Infinity};
obj.toJSON = function() {
  let newObj = Object.assign({}, this);
  for (let prop in obj) {
    if (isNaN(obj[prop])) {
      newObj[prop] = null;
    }
    if (obj[prop] === Infinity) {
      newObj[prop] = "Infinity";
    }
    if (obj[prop] === -Infinity) {
      newObj[prop] = "-Infinity";
    }
  }
  return newObj;
}
let str = JSON.stringify(obj);
// str: {"name":"Tom","age":null,"height":"Infinity"}

六、结语

本文主要介绍了JSON对象转字符串的常用方法，以及JSON字符串的转义和格式化问题，同时还对JSON对象转字符串过程中常见问题进行了分析和解决。 读者可以通过实践，更加深入地理解JSON对象转字符串的原理和应用。

推荐文章