JavaScript JSON對象轉字符串

一、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對象轉字符串的原理和應用。