JavaScript 小技巧：JSON.stringify()

JavaScript Tricks 筆記。

做為 JavaScipt 開發人員，我們經常會用到 console.log() 來進行 debug，但有時候 console.log() 會沒打印出預期的結果：

// 呈現結果
[object Object]

因為從物件到字符串的默認轉換是 [object Object]，這時候可以利用 JavaScipt 內建的方法 JSON.stringify() 來幫忙，將物件或值轉變為 JSON 字串：

const person = { name : "Jerry", age : 29 }

console.log(JSON.stringify(person));

// 呈現結果
"{ "name" : "Jerry", "age" : 29 }"

除了使用 stringify() 的 function 來幫助我們開發，JSON.stringify() 還可以額外帶入兩個可選的參數，第一個是替換參數（replacer），第二個則是間隔參數（space）。

替換參數（Array）

一個物件 food，當我們想知道 food 的名稱，於是將其打印如下：

console.log(JSON.stringify(food));

// 呈現結果
"{'id':1,'type':'donut','name':'Cake','ppu':0.55,'batters':{'id':1,'type':'donut','name':'apple','ppu':0.55,'batters':{'batter':[{'id':2001,'type':'candy'},{'id':2002,'type':'Chocolate'},{'id':2003,'type':'Blueberry'},{'id':2004,'type':'Devil’s Food'}]},'topping':[{'id':3001,'type':'None'},{'id':3002,'type':'Glazed'},{'id':3003,'type':'Chocolate'},{'id':3004,'type':'Maple'}]}}"

Console 的結果出現大量無用的信息，很不容易找出關鍵的 key（name），這種情況在物件結構越龐大時越明顯，這時將替換參數加入 JSON.stringify()：

console.log(JSON.stringify(food,['type', 'name']));

// 呈現結果
"{'type':'donut','name':'Cake'}"

將所需的 key 值作為陣列傳遞給第二個參數 (replacer)，打印出需的內容。

替換參數（Function）

Replacer 也可以把 function 作為參數傳遞。Function 可以帶入兩個參數，key 和 value，其中編寫的邏輯用於過濾內容，如果返回 undefined，則不會回傳對應的 key-value：

function replacer(key, value) {
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}

const person = { name : "Jerry", age : 29 }

console.log(JSON.stringify(person, replacer));

// 呈現結果
"{'age':29}"

間隔參數（Number）

Space 控制結果字符串裡面的間距，如果參數是數字，則字符串化中的每個級別都將以此數量的空格字符縮進，數字的話最多可以 10，大於 10 也會取 10，最小 1：

// Note：'-' 代表空格
console.log(JSON.stringify(person, null, 3));

// 呈現結果
// "{
// ---'name': 'Jerry',
// ---'age': 29
// }"

間隔參數（String）

如果 space 是字串，上面顯示的空格會被替換掉，一樣最多可以十個字：

console.log(JSON.stringify(person, null, '$$'));

//呈現結果
// "{
// $$'name': 'Jerry',
// $$'age': 29
// }"

`toJSON()` 方法

一個物件擁有 toJSON 的屬性，那麼該 toJSON() 方法就會覆蓋該對象默認的 stringify 行為，JSON.stringify() 返回 toJSON() 的結果並將其字符串化，而不是將整個物件轉換為字符串：

const person = {
  name : "Jerry",
  age : 29,
  toJSON () {
    return `Now I am '${this.name}' and age is ${this.age}`;
  }
}

console.log(JSON.stringify(person));

//呈現結果
"'Now I am 'Jerry' and age is 29'"