JavaScript 語法基礎：分號與自動分號插入（ASI）

簡介

在 JavaScript 中，分號 (;) 看似微不足道，卻是語句結束的重要標誌。早期的 JavaScript 設計者為了讓程式碼更「友善」給非程式背景的使用者，加入了 自動分號插入 (Automatic Semicolon Insertion, 簡稱 ASI) 機制，使得在多數情況下，開發者可以省略手動寫分號。

然而，ASI 並非萬能，它的規則相當複雜，稍有不慎就會產生難以偵測的錯誤。對於 初學者 來說，了解什麼時候需要自行加分號、什麼時候可以放心依賴 ASI，是寫出穩定、可維護程式碼的關鍵。本文將從概念說明、實作範例、常見陷阱到最佳實踐，完整呈現分號與 ASI 的全貌，協助你在日常開發中做出正確的選擇。

---

核心概念

1. 為什麼需要分號？

在 JavaScript 中，每一條 語句 (Statement) 都應該以分號結束，這樣解析器才能正確辨識語句的邊界。若缺少分號，解析器會嘗試根據 ASI 規則 自動補上，但補上的位置不一定符合開發者的意圖。

例子：
let a = 1
let b = 2
若省略分號，解析器會在每行的換行處插入分號，等同於 let a = 1; let b = 2;，這在大多數情況下是安全的。

2. ASI 的運作原理

ECMAScript 規範將 ASI 的行為定義為：

1. 換行或檔案結尾：當解析器在 換行符號 或 檔案結尾 前，遇到 不能構成完整語句 的情況時，會自動插入分號。
2. 特定語法限制：在某些語法結構（如 return、break、continue、throw）之後，若換行緊跟著 不是合法的表達式，則會插入分號。
3. 括號、方括號、大括號：若下一行以 (、[、{ 開頭，且前一行的語句可以與之組合成合法的表達式，則 不會 插入分號。

重點：ASI 並不是「在每個換行處都插入分號」，而是「在需要的地方插入」，這讓它在某些情況下會產生意外的解析結果。

3. 常見的 ASI 失效情境

以下列出幾個最常見、最容易讓開發者踩雷的情況：

情境	會發生什麼	可能的錯誤
return 後直接換行	解析器會在 return 後插入分號	return 只會回傳 undefined，後面的表達式不會被執行
物件字面量緊跟在換行的變數宣告後	解析器會把 {} 當作程式區塊	變數實際上被賦值為 undefined，而不是物件
以 (、[、{ 開頭的行被視為前一行的延續	解析器會把兩行合併成一條語句	產生意外的運算或語法錯誤
throw 後換行	會在 throw 後插入分號，導致拋出 undefined	程式碼不會拋出預期的錯誤物件

---

程式碼範例

範例 1：基本的分號省略與 ASI 正常運作

let x = 10
let y = 20
let sum = x + y
console.log(sum)   // 30

說明

• 每一行結尾都有換行，且後面的語句不會與前一行組合成合法的表達式。
• 解析器在每行換行處自動插入分號，等同於手動寫 ;。

---

範例 2：return 後換行導致意外回傳 undefined

function getValue() {
    return
    {
        success: true
    }
}
console.log(getValue())   // undefined

說明

• return 後立即換行，ASI 會在 return 後插入分號，等同於 return;。
• 接下來的 {} 被視為獨立的程式區塊，而非回傳值。
• 正確寫法應該把物件放在同一行或使用括號包住：

function getValue() {
    return {
        success: true
    }
}
// 或
function getValue() {
    return (
        {
            success: true
        }
    )
}

---

範例 3：物件字面量與變數宣告的衝突

let config = 
{
    apiUrl: 'https://api.example.com',
    timeout: 5000
}
console.log(config)   // { apiUrl: 'https://api.example.com', timeout: 5000 }

說明

• 這裡看起來正常，但如果 前一行是 let config = 且 換行後直接是 {，ASI 不會 插入分號，因為 {} 可以被視為 物件字面量 的延續。
• 若不小心在 let config = 後面加入了分號，則會變成 let config =;（語法錯誤）。
• 為避免混淆，建議 在物件字面量前加上括號 或 把 { 放在同一行：

let config = {
    apiUrl: 'https://api.example.com',
    timeout: 5000
}

---

範例 4：使用 ( 開頭的行被視為前一行的延續

let result = a + b
(c + d).toString()

說明

• 解析器會把兩行合併成 let result = a + b(c + d).toString();，導致語法錯誤或執行結果不符預期。
• 正確做法是 在前一行結尾加分號，或 在新行前加上 ;：

let result = a + b;
(c + d).toString();   // 正確

---

範例 5：throw 後換行的危險

function raiseError() {
    throw
    new Error('Something went wrong')
}
raiseError()   // Uncaught undefined

說明

• throw 後換行，ASI 會在 throw 後插入分號，等同於 throw;，拋出 undefined。
• 正確寫法：

function raiseError() {
    throw new Error('Something went wrong')
}

或使用括號：

function raiseError() {
    throw (
        new Error('Something went wrong')
    )
}

---

常見陷阱與最佳實踐

1. 永遠在可能產生歧義的語句後加分號

• return、break、continue、throw：在這些關鍵字之後務必直接寫上要回傳或拋出的表達式，或在行尾手動加上分號。
• 函式呼叫、算術運算、物件/陣列字面量：如果下一行以 (、[、{ 開頭，請在前一行結尾加分號。

2. 使用「分號自動化工具」時要小心

許多程式碼格式化工具（如 Prettier、ESLint）提供「自動加分號」或「移除分號」的設定。若選擇 移除分號，務必配合 eslint 的 semi 規則，並在 .eslintrc 中加入 semi: ["error", "never"]，同時檢查可能的 ASI 失效情況。

3. 在大型專案中統一風格

• 團隊共識：決定是否強制使用分號，並在程式碼審查（code review）時檢查違規情況。
• 設定 Lint 規則：eslint 的 semi、no-unexpected-multiline、no-extra-semi 等規則可以幫助捕捉因 ASI 產生的隱藏錯誤。

4. 避免在單行 if、for、while 等語句後省略分號

if (condition) doSomething()
[1,2,3].forEach(console.log)   // 可能被視為陣列索引

在上述情況下，建議使用大括號或手動加分號：

if (condition) doSomething();
[1,2,3].forEach(console.log);

5. 使用 IIFE（Immediately Invoked Function Expression）時特別注意

let result = (function() {
    return 42
})()

若前面有其他語句，務必確保在結尾加分號，否則可能與後續程式碼拼接：

let a = 1
;(function(){ console.log('IIFE') })()

---

實際應用場景

1. 前端框架的模組化程式碼

在 React、Vue、Angular 等框架中，常見的 ES6 模組（import / export）本身已經要求分號結尾。若你在模組內部使用 函式式程式設計（如高階函式、鏈式呼叫），建議 保持分號，避免因 ASI 產生的錯誤。

import { map, filter } from 'lodash'

export const processData = data =>
    map(filter(data, item => item.active), item => item.value)

在這裡，箭頭函式的返回值是一條完整的表達式，不需要在行尾加分號；但如果在同一檔案內還有其他語句，則需要在 export 前加分號以避免拼接。

2. Node.js 後端服務

Node.js 常使用 CommonJS（module.exports）或 ESM（export）語法，且在 異步程式（async/await）中，return 後的換行同樣會觸發 ASI。以下是一個常見的錯誤：

async function getUser(id) {
    return
    await db.findUser(id)
}

正確寫法：

async function getUser(id) {
    return await db.findUser(id)
    // 或
    return (
        await db.findUser(id)
    )
}

3. 測試框架（Jest、Mocha）

測試案例的 斷言（assertion）往往寫在同一行，若不小心在 expect 後換行，會導致斷言失效：

test('adds numbers', () => {
    expect(add(1, 2))
    .toBe(3)   // 這裡會因為 ASI 在換行處插入分號，變成 expect(add(1,2));
})

解決方法：

test('adds numbers', () => {
    expect(add(1, 2))
        .toBe(3)   // 使用縮排或在前一行加分號
})

---

總結

• 分號是語句的明確終結符，雖然 JavaScript 提供了 ASI 讓開發者可以省略它，但 ASI 並非萬能，在特定語法（如 return、throw、物件字面量）前後容易產生意外的解析結果。
• 了解 ASI 的規則、常見失效情境，以及 在何處必須手動加分號，是撰寫安全、可維護程式碼的基礎。
• 最佳實踐：在團隊中統一風格、使用 Lint 工具檢查分號、在可能產生歧義的語句後明確加分號，能有效避免因 ASI 造成的 bug。
• 在 前端框架、Node.js 後端、測試程式 等實務情境中，正確處理分號與 ASI 能提升程式碼的可讀性與穩定性。

掌握了這些概念後，你就能在日常開發中自信地決定「什麼時候可以省略分號，什麼時候必須加上」，讓 JavaScript 程式碼更乾淨、更不易出錯。祝你寫程式愉快，碼上無憂！