如何美化 JSON String ?

JSON.stringify() 能將 Object Literal 轉成 JSON String，但單純 String 並不容易閱讀，是否能讓 Property 間也有縮排呢 ?

Version

macOS Catalina 10.15.3
VS Code 1.43.1
Quokka 1.0.284
ECMAScript 2015

let obj = {
  firstName: 'Sam',
  lastName: 'Xiao'
}

JSON.stringify(obj) // ?

一般我們只會使用 JSON.stringify() 將 object literal 轉成 JSON string。

json000

這種 string 並不容易閱讀。

let obj = {
  firstName: 'Sam',
  lastName: 'Xiao'
}

JSON.stringify(obj, null, '\t') // ?

事實上 JSON.stringify() 還兩個 argument，第二個參數稱 reducer function，一般用不到，第三個參數稱 space，也就是 property 間該填入什麼 white space，讓可讀性更佳。

將第二個參數填入 \t，表示要以 tab 作為 property 間的分隔。

json001

這種 JSON string 可讀性就很高了。