Free2Box
廣告
返回部落格
tutorials

JSON 格式化與驗證:工程師的日常必備工具

教你如何格式化、驗證、除錯 JSON 資料,解決常見的 JSON 語法錯誤,提升 API 開發效率。

Free2Box Editorial Team發佈於 3/3/20267 min read
JSON格式化API開發工具

本指南由 Free2Box 編輯團隊維護,並按照目前的工具使用體驗進行審閱。 閱讀我們的編輯準則

API 回傳了一坨東西

如果你是工程師,你一定遇過這個場景:打了一支 API,回傳了一大串 JSON,全部擠在同一行,大概長這樣:

{"users":[{"id":1,"name":"Alice","email":"alice@example.com","roles":["admin","editor"],"settings":{"theme":"dark","notifications":true}},{"id":2,"name":"Bob","email":"bob@example.com","roles":["viewer"],"settings":{"theme":"light","notifications":false}}]}

你瞇著眼睛想找某個欄位的值,找了半天找不到。

這時候你需要的就是 JSON 格式化。

JSON 格式化工具
即時格式化、驗證 JSON 資料,支援摺疊展開與語法高亮

JSON 格式化能幫你什麼?

把上面那坨東西丟進格式化工具,一秒鐘變成這樣:

{
  "users": [
    {
      "id": 1,
      "name": "Alice",
      "email": "alice@example.com",
      "roles": ["admin", "editor"],
      "settings": {
        "theme": "dark",
        "notifications": true
      }
    },
    {
      "id": 2,
      "name": "Bob",
      "email": "bob@example.com",
      "roles": ["viewer"],
      "settings": {
        "theme": "light",
        "notifications": false
      }
    }
  ]
}

結構一目了然。巢狀關係、陣列內容、每個物件有哪些欄位,全部看得清清楚楚。

不只是排版漂亮

格式化工具做的不只是加換行和縮排,還有驗證功能。

找出語法錯誤

JSON 的語法規範很嚴格。以下這些錯誤很常見,但肉眼看壓在一行裡根本找不到:

多了尾巴逗號

{
  "name": "Alice",
  "age": 30,
}

最後那個逗號在 JavaScript 沒問題,但在標準 JSON 裡是不合法的。很多 API 會因為這個直接報錯。

用了單引號

{
  'name': 'Alice'
}

JSON 只接受雙引號,單引號是不行的。

忘了加引號

{
  name: "Alice"
}

JSON 的 key 一定要用雙引號包起來。這個寫法在 JavaScript 物件裡合法,但不是合法的 JSON。

多餘的逗號或缺少逗號

物件之間、陣列元素之間少了逗號,或是最後一個元素多了逗號,都是常見的錯誤。

格式化工具會告訴你錯誤在哪一行、哪個位置,比你自己用肉眼找快太多了。

Debug API 的時候,養成習慣:拿到 response 先丟進格式化工具。就算看起來正常,也可以確認 JSON 結構是否合法。有時候 API 回傳的東西有微妙的格式問題,前端 JSON.parse() 直接報錯但錯誤訊息又不清楚。

常見使用場景

API 開發與測試

開發 REST API 的時候,你會不斷地看 request body 和 response body。格式化之後看起來清楚很多,尤其是巢狀很深的資料結構。

我以前用 Postman 測 API 的時候,偶爾會把 response 複製出來放到外部格式化工具看,因為 Postman 內建的格式化對特別大的 JSON 有點卡。

設定檔除錯

很多設定檔用 JSON 格式,比如 package.jsontsconfig.json.eslintrc.json 等等。改了設定檔之後程式跑不起來,先拿去驗證一下格式有沒有問題,往往能省下不少 debug 時間。

資料庫匯出

從 MongoDB 或其他 NoSQL 資料庫匯出的資料通常是 JSON 格式。資料量一大,不格式化根本沒辦法閱讀。

前後端溝通

前端工程師跟後端工程師討論 API 欄位的時候,把格式化好的 JSON 範例丟到 Slack 或文件裡,比口頭描述「response 裡面有一個 users 陣列,每個 user 物件裡面有 settings...」清楚太多。

JSON 跟其他格式

順帶一提幾個相關的資料格式:

YAML:比 JSON 更易讀(用縮排而不是括號),常用在 CI/CD 設定檔(像是 GitHub Actions、Docker Compose)。但容易因為縮排錯誤出問題。

XML:比較老的格式,現在用的比較少但銀行和企業系統還是很多。比 JSON 冗長很多。

TOML:Rust 生態系愛用的設定格式,介於 JSON 和 YAML 之間。

如果你需要在這些格式之間轉換,Free2Box 也有對應的工具可以用。

進階技巧

壓縮 JSON

格式化的反向操作。如果你要把 JSON 塞進 URL 參數或是存到資料庫,壓縮(minify)可以去掉所有多餘的空白和換行,減少資料量。

比對兩份 JSON

改了 API response 之後想看跟之前差在哪裡?可以用 diff 工具比對兩份格式化過的 JSON。先格式化再比對,差異會更清楚。

大型 JSON 處理

如果你的 JSON 檔案很大(幾 MB 以上),瀏覽器的格式化工具可能會卡頓。這種情況建議用 command line 工具如 jq,或是分段處理。

Free2Box 的 JSON 格式化工具在瀏覽器本地執行,你的資料不會上傳到任何伺服器。處理敏感的 API 資料或設定檔時可以放心使用。

結語

JSON 格式化聽起來是很小的事,但它真的是工程師每天都會用到的工具。一個好用的格式化工具加上驗證功能,可以幫你在 debug 的時候省下很多冤枉路。把它加到書籤列吧,你會感謝自己的。

廣告