JSON 轉 JavaScript 產生器

如何將 JSON 轉換為 JavaScript – 步驟指南

使用此 JSON 轉 JavaScript 產生器，可從 JSON 範例產生 JSDoc 型別或便於執行期使用的模型，適合 Node.js 與前端應用。

1. 步驟 1 – 貼上 JSON 範例

   • 將具有代表性的 JSON 物件或陣列貼到左側編輯器。
   • 盡量包含巢狀物件、陣列與可為 null 的欄位，方便正確推斷型別。
   • 使用 匯入 從檔案、URL 或示例資料載入 JSON。

2. 步驟 2 – 選擇 JavaScript 輸出選項

   • 決定輸出為一般物件、JSDoc typedef，或帶輔助方法的 class 風格程式碼。
   • 清楚表達可選欄位的處理方式，並在型別/註解中體現。
   • 保持命名與專案一致（camelCase vs snake_case）。

3. 步驟 3 – 檢查產生的程式碼

   • 確認欄位命名、型別推斷，以及陣列/物件的對應方式是否符合預期。
   • 依需求調整 根型別名稱、null 處理策略與可選的框架選項。
   • 若某些欄位推斷不準確，優化 JSON 範例後重新產生。

4. 步驟 4 – 在 JS 專案中使用輸出

   • 將輸出複製到專案中，並在解析 JSON 的地方引用。
   • 若依賴動態型別，請加上執行期驗證以避免髒資料傳播。
   • 可考慮產生 JSON Schema 統一契約與驗證。

5. 步驟 5 – 複製或下載

   • 將輸出複製到專案中，或下載成檔案。
   • 執行格式化/程式碼檢查工具，讓風格與專案一致。
   • 若目標語言需要序列化/解析函式庫，請在專案中加入相依套件。

// JSON 輸入
{
  "id": 123,
  "name": "Maeve Winters",
  "email": "[email protected]",
  "active": true,
  "roles": ["admin", "editor"],
  "metadata": { "plan": "pro" },
  "createdAt": "2024-03-01T10:15:00Z",
  "score": 99.5,
  "notes": null
}

// 產生的 JSDoc 型別（簡化）
/**
 * @typedef {Object} Metadata
 * @property {string} plan
 */

/**
 * @typedef {Object} Root
 * @property {number} id
 * @property {string} name
 * @property {string|null} email
 * @property {boolean} active
 * @property {string[]} roles
 * @property {Metadata} metadata
 * @property {string} createdAt
 * @property {number} score
 * @property {null} notes
 */

相關 JSON 與 JavaScript 工具

探索更多可與本 JSON 轉 JavaScript 產生器搭配使用的 JSON 與 Schema 工具。