JavaScript－關於 JSON 的秘密

不算秘密的秘密。

簡述

我們平常有 90% 在處理 JSON 資料時都是直接 JSON.stringify 或是 JSON.parse 來轉換格式。

不過你知道 JSON.stringify 除了資料本身以外它還可以傳入其他參數嗎？這篇就是想介紹一下這個奇妙的東西。

首先如果利用 vscode 的懸停功能來查看型別，就會看到以下資訊：

會發現有三個參數，分別為：

• value
• replacer
• space

除了 value 以外應該不多人碰過，所以下面就來介紹一下用法。

替換參數（replacer）

這個有兩種用法，第一種是傳「陣列」，第二種是傳「函式」。

Array 的用法：

const data = {
  id: 1,
  name: 'PeaNu',
  age: 20,
  habit: 'coding',
  gender: 'man',
  isMarry: true
}
// 只希望留下的欄位
const replacer = ['id', 'age', 'name']
// "{'id':1,'age':20,'name':'PeaNu'}"
console.log(JSON.stringify(data, replacer))

Function 的用法：

附註：你可以利用 key & value 來決定要怎麼過濾資訊。

const data = {
  id: 1,
  name: 'PeaNu',
  age: 20,
  habit: 'coding',
  gender: 'man',
  isMarry: true
}
const replacer = (key, value) => {
  // 不想留下的就回傳 undefined
  if (typeof value === 'string') {
    return undefined
  }
  // 想留下的就把值回傳
  return value
}

// "{'id':1,'age':20,'isMarry':true}"
console.log(JSON.stringify(data, replacer))

字串間隔（Space）

可以填的值有兩種，分別為「字串」和「數字」。

數字的話就是「每個 key 到上一個 , 之間的間隔 」：

const data = {
  id: 1,
  name: 'PeaNu',
  age: 20,
  habit: 'coding',
  gender: 'man',
  isMarry: true
}
// 間隔 10
console.log(JSON.stringify(data, null, 10))

// 每個 key 到 , 之間有 10 個空格
{
----------"id": 1,
----------"name": "PeaNu",
----------"age": 20,
----------"habit": "coding",
----------"gender": "man",
----------"isMarry": true
}

字串的話就是直接填入：

const data = {
  id: 1,
  name: 'PeaNu',
  age: 20,
  habit: 'coding',
  gender: 'man',
  isMarry: true
}
// 填入 #
console.log(JSON.stringify(data, null, '#'))

{
#"id": 1,
#"name": "PeaNu",
#"age": 20,
#"habit": "coding",
#"gender": "man",
#"isMarry": true
}

雖然不太知道這個實際會用在哪，不過也許在過濾資料的時候會當作關鍵字來用吧，像是 split 之類的。