FormatArc JSON 格式化器在瀏覽器中將壓縮 JSON 排版為可讀格式的顯示結果FormatArc JSON 格式化器在瀏覽器中將壓縮 JSON 排版為可讀格式的顯示結果
作者: FormatArc 編輯部發布日期: 2026-09-02更新日期: 2026-09-02

JSON 排版線上工具：瀏覽器・jq・JSON.stringify 實務指南

結論先講

  • 瀏覽器中排版：貼到 FormatArc 的 JSON 格式化器 即完成（資料只在瀏覽器內處理）
  • 終端機中排版：echo '{...}' | jq . 或 python3 -m json.tool
  • 程式碼中排版：JavaScript/Node.js 用 JSON.stringify(data, null, 2)

以下依序說明這 3 種方法，並附上常見語法錯誤的處理方式與工具選擇的判斷基準。

JSON 排版（美化）是什麼

JSON（JavaScript Object Notation）是 Web API 回應與應用程式設定檔案中資料交換最廣泛使用的標準格式之一。JSON 語法與資料型別的完整說明詳見 JSON 格式是什麼。

但為了傳輸效率而壓縮（minify）成一行的 JSON，人眼很難一眼看出結構。開發與除錯過程中，需要加上適當的縮排與換行讓資料可讀，這就是排版（pretty-print）或美化（beautify）。

常見 JSON 語法錯誤

JSON 的文法由兩份正式規格定義：RFC 8259（IETF 標準「The JavaScript Object Notation (JSON) Data Interchange Format」）與 ECMA-404（ECMA 標準「The JSON Data Interchange Syntax」）。兩份規格定義的是同一套語法，所以以下規則不是某個排版工具的自訂限制，而是 JSON 規格本身的要求。

1. 尾端逗號（trailing comma）

{
  "name": "example",
  "value": 42,
}

最後一個屬性後面多了逗號就不是合法的 JSON。一般 JavaScript 物件允許，但標準 JSON 規格明確定義為不允許。

2. 單引號

{'name': 'example'}

JSON 中只有雙引號 " 有效，單引號 ' 不合法。

3. 鍵名漏加引號

{name: "example"}

JSON 中每個物件的鍵（key）都必須用雙引號包起來。

JSON 語法錯誤修正對照表

以下表格對應常見語法錯誤與 RFC 8259 / ECMA-404 要求的修正方式。

錯誤型別錯誤範例修正方法
尾端逗號{"a": 1,}刪除最後值後的逗號：{"a": 1}
單引號{'a': 'b'}改用雙引號：{"a": "b"}
鍵名未加引號{a: 1}所有鍵加雙引號：{"a": 1}
註解{"a": 1} // noteJSON 沒有註解語法，刪除註解
前導零{"a": 01}數字前不能加 0：{"a": 1}
正號{"a": +1}去掉數字前的 +：{"a": 1}
十六進位 / 八進位{"a": 0x1F}只允許十進位：{"a": 31}
NaN / Infinity{"a": NaN}不是合法的 JSON 值，用數字或 null
undefined 值{"a": undefined}undefined 不是 JSON 值，用 null
未逸出的控制字元"..." 中的換行字串內用 \n 逸出
未逸出的斜線{"a": "C:\path"}逸出斜線：{"a": "C:\\path"}
值的單引號{"key": 'value'}字串值也要雙引號：{"key": "value"}

用 JSON.stringify() 做 JSON 排版

在 JavaScript 或 Node.js 中，JSON.stringify() 的第三個參數指定縮排空格數，就能得到排版好的 JSON 輸出。

const data = { name: "Alice", age: 30, roles: ["admin", "editor"] };

// 用 2 格空格縮排排版
console.log(JSON.stringify(data, null, 2));

輸出結果：

{
  "name": "Alice",
  "age": 30,
  "roles": [
    "admin",
    "editor"
  ]
}

第二個參數是 replacer 函數或陣列，用來過濾或轉換特定屬性。要保留所有屬性就傳 null。

要用 Tab 字元縮排的話：

JSON.stringify(data, null, "\t");

JavaScript 排版時要注意的陷阱

JSON.stringify() 對簡單物件很方便，但在生產程式或複雜物件中常會遇到以下例外情況。

循環參考（Circular Reference）

物件中有屬性指回自己或父物件時，JSON.stringify 會丟出 TypeError: Converting circular structure to JSON。標準解法是傳入一個 replacer 函數，追蹤已序列化的物件並替換重複引用。

function safeStringify(value, space = 2) {
  const ancestors = [];
  return JSON.stringify(value, function (_key, val) {
    if (typeof val !== "object" || val === null) return val;
    while (ancestors.length && ancestors[ancestors.length - 1] !== this) {
      ancestors.pop();
    }
    if (ancestors.includes(val)) return "[Circular]";
    ancestors.push(val);
    return val;
  }, space);
}

DOM 樹狀結構、狀態管理函式庫的 store、或是 log 記錄中重新引用 request 物件時，這是最常發生的執行時錯誤。

用 toJSON() 控制輸出格式

JSON.stringify 會檢查每個值是否有 toJSON() 方法，有的話就用它的回傳值。Date 型別預設就有 toJSON()，回傳 ISO 8601 字串，自己的類別也可以照同樣方式定義序列化格式。

class Money {
  constructor(amount, currency) {
    this.amount = amount;
    this.currency = currency;
  }
  toJSON() {
    return `${this.amount.toFixed(2)} ${this.currency}`;
  }
}
JSON.stringify({ price: new Money(19.9, "USD") }, null, 2);
// → { "price": "19.90 USD" }

比在序列化前另外跑一輪轉換步驟更乾淨，縮排也照常生效。

用 replacer 過濾或遮蔽鍵名

第二個參數 replacer 除了循環偵測，也能拿來剔除或遮蔽特定鍵。例如 API 回應要記 log 時把密碼或憑證 token 遮起來：

const redactKeys = new Set(["password", "apiKey", "authorization"]);
JSON.stringify(response, (key, value) => redactKeys.has(key) ? undefined : value, 2);

也可以傳「要保留的鍵名陣列」來取代函數：

JSON.stringify(user, ["id", "email", "createdAt"], 2);

Prettier 與 JSON.stringify 的分工

Prettier 是支援多種語言的 CLI 代碼格式化工具（TypeScript、CSS、Markdown、JSON 等）。如果專案已導入 Prettier，.json 檔案可以用 prettier --write file.json 一鍵排版，符合專案整體的設定。

但除錯輸出、API 回應的一次性確認、記憶體中物件的即時檢查，用 JSON.stringify(data, null, 2) 或 FormatArc 的 JSON 格式化器 更快，不需要安裝任何東西。程式碼庫整體的一致性用 Prettier，一次性排版用 JSON.stringify 或線上工具。

終端機（CLI）中排版 JSON

用 jq

jq 是輕量的命令列 JSON 處理器，用管線（pipe）把 JSON 傳進去就自動排版。

echo '{"name":"Alice","age":30}' | jq .

用 Python 內建模組

有安裝 Python 的環境可以直接用標準函式庫的 json.tool：

echo '{"name":"Alice","age":30}' | python3 -m json.tool

除了 jq 和 Python 內建模組，formatarc npm 也能在終端機中排版 JSON 與轉檔。

搭配 curl 即時排版 API 回應

除錯 REST API 時，curl 接 jq 就能把回應資料排版成可讀格式：

curl -s https://api.example.com/data | jq .

curl 排版 JSON 的更多方法（jq / Python / formatarc / 瀏覽器）詳見 curl JSON 格式化。

瀏覽器中安全排版 JSON

FormatArc 的 JSON 格式化器 讓你在瀏覽器內就能完成 JSON 排版，不用安裝任何軟體。所有處理都在客戶端執行，API key 或內部資料不會傳到外部伺服器。

使用方式

  1. 把要排版的 JSON 貼到輸入欄位
  2. 按「執行」按鈕
  3. 複製排版結果

三步就能得到結構清晰的 JSON 顯示。

FormatArc JSON 格式化器在瀏覽器中將壓縮 JSON 排版為可讀格式的顯示結果FormatArc JSON 格式化器在瀏覽器中將壓縮 JSON 排版為可讀格式的顯示結果

排版前先驗證 JSON

JSON 有語法錯誤時排版會失敗。常見原因是尾端逗號、單引號、鍵名漏引號（見上方對照表）。設定檔案想留註解的話，可以考慮 JSONC 或 JSON5 等替代格式。更多註解方式詳見 JSON 註解方式。大檔案中，parser 報出的字元位置（position）往往很難直接定位到真正的錯誤點。

FormatArc 的 JSON 格式化器 會明確標示出錯的列號，可以快速定位問題位置並修正。常見 JSON 解析錯誤的原因與修法詳見 JSON 解析錯誤。

其他編輯器的 JSON 自動排版

除了上述方法，不少編輯器也內建或可延伸 JSON 排版功能：

  • VS Code：在設定中啟用 editor.formatOnPaste 並指定 JSON 格式化器，貼上即自動排版
  • Notepad++：搭配 Npp2JQ 外掛可格式化 JSON 檔案
  • Sublime Text：安裝 Pretty JSON 套件後用右鍵選單或快捷鍵排版

這些編輯器工具適合在撰寫設定檔案或 JSON 時即時排版，但處理大型檔案或需要快速查看 API 回應時，終端機的 jq 或線上工具更快速。瀏覽器中則有 Chrome JSON 擴充功能 可以即時查看 API 回應。

常見問題

JSON.stringify 的縮排參數可以傳什麼？

JSON.stringify(value, replacer, space) 的第三個參數 space 可以傳縮排空格數（最大 10）或縮排用的字串（如 "\t"）。實務上最常用 2，兼顧可讀性與檔案大小。

有尾端逗號或單引號的 JSON 能直接排版嗎？

標準 JSON parser 遇到語法錯誤會中斷。FormatArc 的 JSON 格式化器 在出錯時提供 "Auto-fix" 功能，可以自動偵測並移除尾端逗號或註解，再排版成標準 JSON 輸出。

終端機沒有 jq 怎麼辦？

有 Python 3 的話直接 python3 -m json.tool，不需要另外安裝。有 Node.js 的話可以用：

node -e 'console.log(JSON.stringify(JSON.parse(process.argv[1]), null, 2))' '{"a":1}'

貼到 FormatArc 的資料會送到伺服器嗎？

不會。FormatArc 的所有資料轉換與排版邏輯都在你的瀏覽器（WebAssembly / JavaScript）中執行，不向任何伺服器傳輸資料，機密資料或 API token 也能安心處理。

總結

  • JSON 排版（美化）是開發與維運中日常需要的基本操作
  • 程式碼中用 JSON.stringify(data, null, 2) 就能快速排版
  • 終端機用 jq . 或 python3 -m json.tool 最方便
  • 最常遇到的錯誤是尾端逗號、單引號、鍵名漏引號
  • 想安全地在瀏覽器中排版，用 JSON 格式化器 不傳資料到伺服器