JavaScript 小技巧：JSON.stringify()

5 min readDec 31, 2020

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)。

1. 替換參數 (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)，打印出需的內容。

2. 替換參數 (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}"

3. 間隔參數 (Number)

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

Note：'-' 代表空格
console.log(JSON.stringify(person, null, 3));呈現結果
//"{
//---'name': 'Jerry',
//---'age': 29
//}"

4. 間隔參數 (String)

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

console.log(JSON.stringify(person, null, '$$'));呈現結果
//"{
//$$'name': 'Jerry',
//$$'age': 29
//}"

5. 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'"

不是打印整個物件，僅打印出 toJSON function 的結果。