JavaScript 控制流程：條件判斷（if / else / switch）

簡介

在程式設計中，條件判斷是讓程式根據不同情況執行不同程式碼路徑的核心機制。沒有條件判斷，我們的程式只能一味地直線執行，無法因應使用者輸入、資料狀態或外部環境的變化。

JavaScript 作為前端與後端皆廣泛使用的語言，提供了 if…else 與 switch 兩套語法來實作條件分支。掌握這些語法不只能寫出正確的程式，更能提升程式的可讀性、維護性，並減少錯誤的發生。本文將從概念說明、實作範例、常見陷阱到最佳實踐，逐步帶領讀者掌握 if / else / switch 的用法，並展示它們在真實專案中的應用。

核心概念

1. `if` 與 `else` 的基本語法

if 會先評估一個布林表達式（true 或 false），若結果為 true，則執行緊接在其後的大括號內的程式碼；若為 false，則可以透過 else 或 else if 指定其他分支。

// 判斷年齡是否符合投票資格
const age = 20;

if (age >= 18) {
  console.log('您已符合投票年齡！');
} else {
  console.log('抱歉，您尚未滿 18 歲。');
}

小技巧：如果只有單一行程式碼，大括號可以省略，但為了可讀性建議仍保留。

2. 多重分支：`else if`

當有超過兩種可能時，可使用 else if 形成多條分支。條件會依次自上而下評估，第一個符合的分支即被執行，之後的條件將不再檢查。

// 判斷成績等級
const score = 85;
let grade;

if (score >= 90) {
  grade = 'A';
} else if (score >= 80) {
  grade = 'B';
} else if (score >= 70) {
  grade = 'C';
} else {
  grade = 'D';
}
console.log(`您的等級是 ${grade}`);

3. 條件運算子（三元運算子）

對於簡單的二元判斷，三元運算子 (condition ? expr1 : expr2) 能讓程式更精簡。

// 判斷是否為偶數
const num = 7;
const result = (num % 2 === 0) ? '偶數' : '奇數';
console.log(`${num} 是 ${result}`);

4. `switch` 語句：多值比對的好幫手

當需要根據同一個變數的多個不同值執行不同程式碼時，switch 比起連續的 if…else if 更具可讀性。case 後面接要比對的值，break 用來阻止「fall‑through」的行為。

// 依照星期顯示不同的問候語
const day = new Date().getDay(); // 0: 星期日, 1: 星期一, ...

let greeting;
switch (day) {
  case 0:
    greeting = '週末快樂！';
    break;
  case 1:
    greeting = '新的一週，加油！';
    break;
  case 2:
    greeting = '星期二，持續前進！';
    break;
  case 3:
    greeting = '星期三，已過半！';
    break;
  case 4:
    greeting = '星期四，快到週末了！';
    break;
  case 5:
  case 6:
    greeting = '週末好好放鬆！';
    break;
  default:
    greeting = '未知的日期！';
}
console.log(greeting);

4.1 `switch` 中的 fall‑through

如果忘記在 case 後加 break，程式會繼續執行下一個 case，這在某些情況下是刻意設計的（如上例的 5、6 共享同一段程式），但若不小心則會造成錯誤。

5. 條件判斷的「真值」與「偽值」

在 JavaScript 中，以下值會被視為偽值 (false)：

偽值	說明
`false`	布林值 false
`0`、`-0`、`0n`	數值零
`""`、`''`、````	空字串
`null`、`undefined`	空或未定義
`NaN`	非數值

其他任何值皆為真值 (true)。了解這點能避免在 if (value) 時產生意外的判斷結果。

// 判斷使用者是否提供了名字
function greet(name) {
  if (name) {
    console.log(`哈囉，${name}！`);
  } else {
    console.log('哈囉，陌生人！');
  }
}
greet('');      // → 哈囉，陌生人！
greet('Alice'); // → 哈囉，Alice！

常見陷阱與最佳實踐

陷阱	說明	建議的做法
忘記 `break`	`switch` 中缺少 `break` 會導致 fall‑through，造成不預期的執行。	每個 `case` 後都加上 `break`，除非明確需要共享程式碼，並在註解說明。
比較運算子寫錯	使用 `=`（賦值）而非 `===`（相等）會改變變數值，導致判斷永遠為 `true`。	永遠使用嚴格相等 `===`（或 `!==`）比較，除非有特殊需求。
偽值混淆	直接判斷 `if (value)`，若 `value` 為 `0`、`""`、`null` 等偽值，可能不是想要的結果。	明確檢查類型或使用 `value != null`（檢查 `null`、`undefined`），或使用 `Number.isNaN`、`String.prototype.trim()` 等方法。
過度巢狀	多層 `if…else` 會讓程式難以閱讀。	使用早期返回（early return）或 switch、物件映射（object map）取代深層巢狀。
未處理 `default`	`switch` 沒有 `default`，當所有 `case` 都不符合時會什麼都不做，容易忽略錯誤情況。	加入 `default` 分支，並在開發階段拋出錯誤或記錄警告。

最佳實踐小結

使用嚴格相等 (===)，避免隱式類型轉換。
保持每個分支的職責單一，盡量讓條件表達式簡潔。
加上 default（或 else）處理未預期的情況，提升程式韌性。
利用三元運算子 處理簡單的二元判斷，讓程式更精簡。
適時使用 switch 取代長串的 else if，提升可讀性。

實際應用場景

場景	可能使用的語法	範例說明
表單驗證	`if…else if…else`	檢查使用者輸入的 Email、密碼長度、是否勾選同意條款等。
根據使用者角色顯示不同功能	`switch`	依 `role`（admin、editor、viewer）決定導覽列顯示哪些選單。
多語系切換	物件映射 + `switch` 或 `if`	根據 `locale`（`zh-TW`、`en-US`）載入對應的文字字典。
API 回傳狀態碼處理	`switch`	依 HTTP 狀態碼（200、401、404、500）執行不同的錯誤處理或重試機制。
遊戲分數等級	`if…else if`	依玩家得分區間給予不同的稱號或獎勵。

範例：根據 API 回傳的 HTTP 狀態碼顯示訊息

function handleResponse(status) {
  switch (status) {
    case 200:
      console.log('請求成功！');
      break;
    case 201:
      console.log('資源已建立！');
      break;
    case 400:
      console.warn('錯誤的請求，請檢查參數。');
      break;
    case 401:
      console.error('未授權，請先登入。');
      break;
    case 404:
      console.error('找不到資源！');
      break;
    case 500:
      console.error('伺服器錯誤，稍後再試。');
      break;
    default:
      console.log(`未處理的狀態碼：${status}`);
  }
}

// 模擬不同回傳
[200, 401, 404, 999].forEach(handleResponse);

總結

條件判斷是 控制流程 中最常見、也是最基礎的技巧。透過 if…else、else if、三元運算子以及 switch，我們可以讓程式根據不同的輸入或環境狀態作出相對應的反應。
在實作時，記得：

使用嚴格相等 (===) 防止隱式類型轉換。
避免過度巢狀，適時使用早期返回或物件映射。
加上 break 或 default，確保 switch 的行為可預期。
了解偽值，避免因空字串、0、null 等意外進入錯誤分支。

掌握這些概念與最佳實踐後，你就能在前端表單驗證、後端 API 錯誤處理、遊戲邏輯、甚至多語系切換等各種情境中，寫出可讀、可維護且可靠的程式碼。祝你在 JavaScript 的控制流程世界裡玩得開心、寫得順手！