JSON 中文教學網站 | 香港編程學院

從零開始學會 JSON

JSON（JavaScript Object Notation）是一種常見的資料交換格式，經常用在前端、後端、API、設定檔與資料儲存中。這個教學網站會用繁體中文帶你完整理解 JSON 的基本概念、語法規則、實際應用與常見陷阱。

適合初學者 完整語法整理 實務範例 互動式小測驗
立即開始學習 前往小測驗

你將學到什麼

  • JSON 的基本結構與語法規則
  • 物件、陣列、字串、數字、布林值、null 的用法
  • API 回傳資料與設定檔的實務應用
  • 如何辨認與修正常見 JSON 錯誤

重要提醒

嚴格來說，JSON 不是「程式語言」，而是一種資料格式。不過在開發實務中，它的重要性非常高，所以很多人會把它當成必學的技術基礎。

常見使用場景

Web API、前後端交換資料、應用程式設定檔、NoSQL 文件資料、測試資料與自動化流程。

一、認識 JSON

先建立基礎觀念，知道 JSON 到底是什麼、為什麼這麼常見。

JSON 是什麼

JSON 是一種用文字表示資料結構的格式，外觀容易閱讀，也容易被程式解析。它用鍵值對與陣列來表達資訊，因此非常適合做資料傳遞。

JSON 為什麼重要

現代網站與 App 幾乎都依賴 API 傳遞資料，而 API 最常使用的格式之一就是 JSON。只要你接觸前端、後端、行動應用或雲端服務，就很可能會遇到 JSON。

JSON 的特色

結構清楚、可讀性高、語法相對簡單、跨語言支援度高。JavaScript、Python、Java、PHP、Go、C# 等都能輕鬆讀寫 JSON。

最簡單的 JSON 範例

範例：使用物件描述一位使用者 
{
  "name": "小明",
  "age": 18,
  "student": true
}
上面這段 JSON 表示一個物件，裡面有三個欄位：姓名、年齡與是否為學生。

二、JSON 語法教學

學習 JSON 時，最重要的是熟悉它的結構與限制。

1. JSON 由什麼組成

物件 Object
使用大括號 { } 包住，裡面放鍵值對，例如 "name": "小華"。
陣列 Array
使用中括號 [ ] 包住，裡面放多筆資料。
鍵值對 Key-Value
欄位名稱放在前面，後面接冒號與值，例如 "age": 20。

2. JSON 基本規則

  • 鍵名必須用雙引號 " " 包住
  • 字串值也必須用雙引號
  • 每一組鍵值對之間用逗號分隔
  • 最後一筆資料後面不能多一個逗號
  • JSON 不可直接寫註解
  • 布林值必須是小寫：true、false
  • 空值必須寫成 null

3. 合法 JSON 範例

合法 JSON 
{
  "title": "JSON 入門",
  "price": 299,
  "inStock": true,
  "tags": ["資料格式", "API", "學習"],
  "publisher": {
    "name": "範例出版社",
    "country": "Taiwan"
  }
}

4. 不合法 JSON 範例

錯誤示範 
{
  name: "JSON 入門",   // 鍵名沒有雙引號，而且 JSON 不支援註解
  "price": 299,
}
這段有兩個錯誤：第一，name 沒有用雙引號；第二，最後一行 299, 的逗號會導致 JSON 解析失敗。

5. JSON 與 JavaScript 物件的差異

很多人會把 JSON 與 JavaScript 物件混在一起。它們長得很像，但不完全相同。JavaScript 物件允許更彈性，例如鍵名不一定要加雙引號、有些情況可以放函式；但 JSON 是資料格式，限制更嚴格。

JavaScript 物件
const user = {
  name: "小美",
  age: 25,
  sayHi() {
    console.log("Hello");
  }
};
JSON
{
  "name": "小美",
  "age": 25
}
JSON 裡面不能放函式、不能放註解，也不能隨意省略雙引號。

三、JSON 的資料型別

JSON 常見的值總共有幾種，理解它們是寫 JSON 的核心。

字串 String

必須使用雙引號包住，例如：

字串
{
  "name": "王小明"
}

數字 Number

整數、小數都可以，不需要引號。

數字
{
  "age": 20,
  "height": 172.5
}

布林值 Boolean

只有 true 與 false，而且必須小寫。

布林值
{
  "passed": true
}

空值 null

代表目前沒有值或尚未設定。

null
{
  "nickname": null
}

物件 Object

可用來描述一筆具名資料。

物件
{
  "user": {
    "name": "阿哲",
    "role": "admin"
  }
}

陣列 Array

可放多個值，也可以放物件。

陣列
{
  "skills": ["HTML", "CSS", "JavaScript"]
}

四、範例應用例子

以下用實際情境讓你知道 JSON 在開發中怎麼用。

範例 1：使用者資料

常見於會員系統、個人資料頁面、帳號管理。

使用者 JSON 
{
  "id": 1001,
  "username": "ming_01",
  "email": "[email protected]",
  "isActive": true,
  "profile": {
    "nickname": "小明",
    "city": "台北"
  }
}

範例 2：商品清單

電商網站常會用陣列表示多個商品。

商品清單 JSON 
{
  "products": [
    {
      "id": 1,
      "name": "機械鍵盤",
      "price": 2490
    },
    {
      "id": 2,
      "name": "無線滑鼠",
      "price": 990
    }
  ]
}

範例 3：API 回應格式

伺服器回傳資料時，常用 JSON 包含狀態與內容。

API Response 
{
  "success": true,
  "message": "查詢成功",
  "data": {
    "name": "林小美",
    "score": 92
  }
}

範例 4：設定檔

系統或應用程式的環境設定也常使用 JSON。

設定檔 JSON 
{
  "appName": "MyApp",
  "version": "1.0.0",
  "debug": false,
  "theme": "dark",
  "language": "zh-TW"
}

JSON 在 JavaScript 中的常見操作

把 JSON 字串轉成 JavaScript 物件：

JSON.parse()
const jsonText = '{"name":"小安","age":22}';
const obj = JSON.parse(jsonText);
console.log(obj.name); // 小安

把 JavaScript 物件轉成 JSON 字串：

JSON.stringify()
const user = {
  name: "小安",
  age: 22
};

const jsonText = JSON.stringify(user, null, 2);
console.log(jsonText);
JSON.parse() 用來解析 JSON 字串；JSON.stringify() 用來把物件轉回 JSON 文字。

五、常見錯誤與陷阱

初學者最容易在這些地方出錯，學會後能大幅減少除錯時間。

常見錯誤整理

  • 鍵名沒有加雙引號
  • 最後一個欄位後面多了逗號
  • 用單引號包字串
  • 把 True、False 寫成大寫
  • 加入註解導致無法解析
  • 括號沒有成對出現

錯誤示範與修正

錯誤
{
  'name': '小美',
  "age": 18,
}
修正後
{
  "name": "小美",
  "age": 18
}

除錯建議

當 JSON 無法解析時，先檢查是否有雙引號、括號、逗號與大小寫問題。接著可以使用下方的 JSON 驗證工具，快速看出錯誤位置。

六、JSON 驗證與格式化練習工具

你可以直接在這裡貼上 JSON，測試它是否合法，並進行格式化。

輸入區

輸出結果

驗證結果會顯示在這裡...

七、小測驗

完成以下題目，看看你是否真的掌握 JSON。

1. JSON 中的鍵名應該使用哪一種符號包住？

2. 下列哪一個是合法的 JSON 布林值？

3. JSON 中可用哪一組符號表示陣列？

4. 下列哪一項不是 JSON 合法內容？

5. JSON 最後一個欄位後面可以多一個逗號嗎？

6. 哪個方法可把 JSON 字串轉成 JavaScript 物件？

7. 下列哪段 JSON 是合法的？

8. JSON 中表示空值要用哪個字？

學習總結

你現在應該已經知道 JSON 是一種資料格式，而不是一般意義上的程式語言。它的核心重點包括：使用雙引號、遵守括號結構、避免多餘逗號、理解物件與陣列，並能在實務中應用到 API、設定檔與資料交換。

如果你接下來要進一步學習，建議可以延伸到 JavaScript 的 fetch()、後端 API 設計、NoSQL 資料庫、以及前後端資料串接。