JavaScript switch 用法：case、break 與 default

把 switch 表達式中的值與每個 case 的值進行比對。如果匹配有相符的狀況，則會執行該 case 中的陳述式。它與 條件判斷 同屬 流程控制，差別在於它專門處理 同一個值比對多個固定選項 的情況。

switch (expression) {
  case value1:
    // 要執行的陳述式
    break;
  case value2:
    // 要執行的陳述式
    break;
  case value3:
    // 要執行的陳述式
    break;
  default:
    // 如果上述的 case 都沒有符合，就會執行此行程式碼
    break;
}

break

如果遇到 break 這個關鍵字，會跳出 switch 的程式碼區域。也就是說如果能儘早找到匹配的狀況，便能盡早完成任務並執行至 break 以節省大量成本。

注意

忘記寫 break 時，程式會繼續往下執行後面 case 的內容，這個現象叫 貫穿（fall through）：

const type = 'a';

switch (type) {
  case 'a':
    console.log('a');
  case 'b':
    // 也會被印出來
    console.log('b');
    break;
}

刻意共用同一段程式

貫穿也可以是故意的，讓多個 case 共用同一段程式：

const day = 'Sat';

switch (day) {
  case 'Sat':
  case 'Sun':
    console.log('週末');
    break;
  default:
    console.log('上班日');
    break;
}

default

當 case 無法匹配時，就會採用 default 要執行的陳述式。慣例上寫在最後面，用來接住所有預期外的值。

實際例子

const city = document.querySelector('#Select').value;

switch (city) {
  case '台北市':
    console.log('北部');
    break;
  case '台中市':
    console.log('中部');
    break;
  case '高雄市':
    console.log('南部');
    break;
  default:
    console.log('尚未分類');
    break;
}

小提醒

switch 用的是 嚴格比對（===），所以型別要一致。從 表單取到的值 一律是字串，拿去比對數字的 case 永遠不會成立。

與 if...else 的比較

情境	建議
同一個值比對多個固定選項	switch
判斷範圍，例如：分數級距	if...else
多個不同條件的組合	if...else
選項非常多且只是取值	改用物件對照表

選項很多又只是要取一個值時，物件對照表往往比 switch 更短：

const areaMap = {
  台北市: '北部',
  台中市: '中部',
  高雄市: '南部',
};

console.log(areaMap['台中市'] ?? '尚未分類');

常見問題

忘記寫 break 會怎樣？

程式會繼續執行下一個 case 的內容，直到遇到 break 或整個 switch 結束，這叫 貫穿（fall through）。多數情況是 bug，但也可用來讓多個 case 共用同一段程式。

switch 的比對是嚴格比對嗎？

是。switch 使用嚴格相等比對，值與型別都要相同。因此字串 '1' 不會匹配到數字 1 的 case。

default 一定要寫嗎？

語法上不必，但建議寫。它負責處理所有預期外的值，能避免程式在遇到未知狀況時毫無反應而難以排查。

switch 與 if...else 該用哪一個？

針對同一個值比對多個固定選項用 switch；要判斷範圍或多個不同條件的組合，用 if...else 才表達得出來。

default 可以寫在中間嗎？

語法允許，但慣例是寫在最後。寫在中間時仍然只有所有 case 都不符合才會執行，但閱讀者容易誤判執行順序。

延伸閱讀

條件try...catch流程控制