JavaScript | 使用 switch 結構指派變數值 — 初學者完整指南

在寫程式時，我們經常需要根據變數的不同值，執行對應的程式碼區塊。

舉例來說，假如你正在寫一個天氣提示的應用程式，根據天氣類型提供不同的建議，可能會寫出以下的程式碼：

if (x == "rainy") {
  console.log("Remember to bring an umbrella.");
} else if (x == "sunny") {
  console.log("Dress lightly.");
} else if (x == "cloudy") {
  console.log("Go outside.");
} else {
  console.log("Unknown weather type!");
}

這種 if...else if...else 結構 在條件比較少的時候很好用，但當條件變多，或每種情況要執行的程式碼越來越複雜時，就會變得：

✅ 冗長 — 一大串的 if 和 else if，不容易快速理解程式邏輯。
✅ 難維護 — 每當新增一個條件，你可能需要重新檢查每個分支的邏輯。
✅ 易出錯 — 當條件多時，少打了一個 else 或比對錯誤，可能會導致錯誤的程式執行路徑。

這時，switch 結構就成為另一種好選擇。

switch 結構的出現是為了什麼？

switch 的目的是提供一種更直接的語法，用來「比對變數值並指派對應動作」。它的語法非常適合：

✅ 當條件是單純的「等於某值」判斷。
✅ 當條件數量多，想讓程式碼更清楚易讀時。
✅ 當不同條件對應的動作彼此獨立時。

你可以把 switch 想成是「根據變數值選擇要執行哪條路線的交通指揮官」，每個 case 就是一條路，程式會依變數值決定該走哪一條。

switch 的基本語法

switch 結構的設計目的是用更直接的語法來達成「指派」或「選擇」行為。

它讓程式根據一個變數或表達式的值，選擇要執行哪段程式碼。相比一連串的 if...else if...else，switch 的結構更清楚、易讀。

範例程式碼

以下是一個用 switch 實作的範例，根據使用者輸入的天氣類型給出不同的建議：

switch (prompt("What is the weather like?")) {
  case "rainy":
    console.log("Remember to bring an umbrella.");
    break;
  case "sunny":
    console.log("Dress lightly.");
    break;
  case "cloudy":
    console.log("Go outside.");
    break;
  default:
    console.log("Unknown weather type!");
    break;
}

在這段程式中，prompt 會顯示輸入框，要求使用者輸入天氣狀況，例如 "rainy"、"sunny" 或 "cloudy"。

詳細語法說明

switch 結構是用來根據某個表達式的結果值，對應執行不同程式碼區塊。

下面我們更深入地拆解它的每個部分。

switch (表達式)

switch 關鍵字後面接一對小括號，裡面放的是 要被比對的表達式。

程式會先計算出這個表達式的結果，然後拿這個結果去與每個 case 的值做嚴格相等（===）比對。

💡 這個表達式的結果是什麼都可以，只要是簡單值（數字、字串、布林值等），最常見的寫法有：

一個變數

當你已經有一個變數，想根據它的值執行不同邏輯：

let weather = "sunny";

switch (weather) {
  case "rainy":
    console.log("Bring an umbrella.");
    break;
  case "sunny":
    console.log("Wear sunglasses.");
    break;
}

👉 這裡 weather 是表達式，程式會直接用它的值去比對每個 case。

一個函式的回傳值

如果你想當場取得一個值來比對，例如使用者的輸入：

switch (prompt("What is the weather like?")) {
  case "rainy":
    console.log("Bring an umbrella.");
    break;
  case "sunny":
    console.log("Wear sunglasses.");
    break;
}

👉 prompt(...) 的回傳值會直接作為 switch 的表達式結果。

一個運算式

如果你想用運算的結果來比對：

let a = 2;
let b = 3;

switch (a + b) {
  case 4:
    console.log("Sum is 4.");
    break;
  case 5:
    console.log("Sum is 5.");
    break;
}

👉 這裡 a + b 會先被計算，結果是 5，然後比對到 case 5。

小提醒

• 型別要一致！
  switch 用的是嚴格相等比對（===），所以如果表達式的結果是數字，case 的值也必須是數字，不會自動轉型。
• 表達式結果應該簡單明確！
  避免把太複雜的邏輯放在表達式裡，否則程式碼會變得不好維護。

很好，你希望這段更詳細、完整，我幫你擴寫得更適合初學者深入理解，並補充背景、邏輯與常見陷阱。

case 值:

在 switch 結構中，每個 case 就像是程式的「檢查站」。

程式會將 switch 表達式計算出的結果，一個一個去比對這些 case 的值。

一旦找到了符合的 case，程式就會 從該 case 開始執行程式碼，直到遇到 break 或到 switch 結尾。

基本範例

case "rainy":
  console.log("Remember to bring an umbrella.");
  break;

當 switch 表達式的結果是 "rainy"，程式就會執行 console.log(...)，然後遇到 break 停止執行 switch 區塊。

case 的值可以是哪些型別？

case 的值必須是可以與 switch 表達式的結果比對的簡單型別，通常是：

• 字串（string）

  case "sunny":

• 數字（number）

  case 1:

• 布林值（boolean）
  雖然少見，但語法允許：

  case true:

❗ 注意：

比對時會用嚴格相等（===），不會自動轉型！

例如：

  switch ("1") {
    case 1:
      console.log("數字 1");
      break;
    default:
      console.log("不是數字 1");
  }

👉 這會輸出「不是數字 1」，因為 "1"（字串）不等於 1（數字）。

多個 case 共用程式碼

有時候不同的 case 條件，執行的動作是一樣的。這時你可以不寫重複程式碼，而是讓多個 case 共用同一區塊：

case "rainy":
case "stormy":
  console.log("Bring an umbrella.");
  break;

👉 不論表達式結果是 "rainy" 還是 "stormy"，都會執行 console.log("Bring an umbrella.")。

💡 這種寫法很常見於條件很多但結果相同的場景，例如簡化選單、分類動作。

break;

break 是用來 中止當前的 case 處理並跳出 switch 結構 的。

如果漏寫 break 會怎樣？

如果在 case 的程式碼區塊最後漏寫 break，程式不會自動停止，而是會繼續執行下一個 case，這種行為稱作 fall-through（貫穿執行）。

例如：

switch ("sunny") {
  case "sunny":
    console.log("It's sunny today.");
  case "cloudy":
    console.log("It might rain.");
    break;
}

👉 這會印出：

It's sunny today.
It might rain.

因為沒有 break，程式跑完 "sunny" 的程式碼後，直接繼續跑 "cloudy" 的程式碼。

使用 fall-through 的正確範例

雖然初學者通常應該避免不小心漏掉 break，但有時 fall-through 是有意為之：

switch (day) {
  case 1:  // Monday
  case 2:  // Tuesday
  case 3:  // Wednesday
  case 4:  // Thursday
  case 5:  // Friday
    console.log("It's a weekday.");
    break;
  case 6:  // Saturday
  case 7:  // Sunday
    console.log("It's the weekend.");
    break;
  default:
    console.log("Invalid day.");
    break;
}

👉 這裡故意讓多個 case 貫穿，以便不同數字都執行同樣的程式碼。

很好，你的要求讓這份教學更完整、更適合初學者。我幫你把 default 的說明寫得更詳細，補充背景、範例變化、常見問題與好習慣，讓讀者一看就懂！

default:

default 是 switch 結構中 最後的保險機制，當 所有 case 的條件都不符合時，程式會執行 default 區塊裡的程式碼。

你可以把它想像成：

• 在 if...else if...else 裡的 else。
• 當所有比對都沒命中時，提供一個「預設行為」或「錯誤處理」。

這讓你的程式在面對不預期的輸入時，也能穩定運作，給使用者明確的回應或處理。

範例

switch (prompt("What is the weather like?")) {
  case "rainy":
    console.log("Remember to bring an umbrella.");
    break;
  case "sunny":
    console.log("Dress lightly.");
    break;
  case "cloudy":
    console.log("Go outside.");
    break;
  default:
    console.log("Unknown weather type!");
    break;
}

👉 在這段程式碼中：

• 如果使用者輸入 "rainy"、"sunny" 或 "cloudy"，程式會執行對應的提示。
• 如果使用者輸入的是其他值（例如 "snowy" 或 "windy"），沒有任何 case 符合，程式就會執行 default：

  Unknown weather type!

default 的位置

雖然大多數程式都把 default 寫在最後，這樣看起來邏輯更直觀，但實際上：

✅ default 可以放在 switch 裡的任何位置！

程式並不會因為 default 的位置不同而改變它的作用。只要沒有符合的 case，default 都會被執行。

👉 範例：

switch (value) {
  default:
    console.log("No match found");
    break;
  case 1:
    console.log("One");
    break;
  case 2:
    console.log("Two");
    break;
}

如果 value 是 1，程式還是會直接跳到 case 1，不會先跑 default。

如果 value 不是 1 或 2，才會執行 default。

💡 建議： 為了程式碼可讀性，還是把 default 放在最後，讓邏輯更直觀易懂。

default 是否需要 break？

✅ 技術上，default 可以不用 break，因為它通常放在最後，不會有後續的程式碼可貫穿。

但實務上，建議即使在 default 最後還是寫上 break：

default:
  console.log("Unknown weather type!");
  break;

原因：

• 一致性：每個區塊的結尾看起來都一樣，方便維護。
• 未來修改安全：如果以後有人在 default 後面加了新的 case，沒有 break 可能會造成 fall-through 錯誤。

常見用途

在寫 switch 時，default 的常見應用包括：

• 顯示錯誤或警告訊息，提醒輸入值不合法。
• 設定一個預設的動作或回傳值。
• 記錄日誌方便除錯。

完整執行流程

當程式執行到 switch 結構時，會經歷以下步驟：

1️⃣ 先計算 switch 裡表達式的結果。
2️⃣ 從上到下比對每個 case 的值，找出第一個符合的。
3️⃣ 執行該 case 下的程式碼。
4️⃣ 執行到 break 或 switch 結構結束為止。
5️⃣ 如果沒有任何 case 符合，執行 default（如果有的話）。

flowchart TD
    A[開始] --> B[計算表達式值]
    B --> C{檢查 case 1}
    C -->|符合| D[執行 case 1]
    C -->|不符合| E{檢查 case 2}
    E -->|符合| F[執行 case 2]
    E -->|不符合| G{檢查 case 3}
    G -->|符合| H[執行 case 3]
    G -->|不符合| I{有 default?}

    D --> J{有 break?}
    F --> K{有 break?}
    H --> L{有 break?}

    J -->|是| M[結束]
    J -->|否| F
    K -->|是| M
    K -->|否| H
    L -->|是| M
    L -->|否| N[繼續執行]

    I -->|是| O[執行 default]
    I -->|否| M
    O --> M
    N --> M

    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style M fill:#e8f5e8

switch 與 if...else 的比較

在程式設計中，switch 和 if...else 都可以用來根據條件執行不同程式碼區塊，但它們適合的場景與優缺點不同。以下是兩者的詳細比較：

適用場景比較

使用 switch 的好時機：

✅ 當條件是單一變數的相等比對，例如：

switch (command) {
  case "start":
  case "stop":
  case "pause":
    // 對應指令的動作
}

✅ 當條件值明確、數量多，想讓程式碼更整齊時。

✅ 當不同條件對應獨立動作，且邏輯彼此無關。

使用 if...else 的好時機：

✅ 當條件是範圍、邏輯運算：

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
}

✅ 當需要比對多重條件（例如兩個變數的組合）：

if (x > 0 && y > 0) {
  console.log("第一象限");
}

✅ 當條件間有順序性或互斥邏輯，需要一層層檢查時。

小提醒

💡 switch 和 if...else 可以互補使用。

有時在主要邏輯用 switch，在某些分支內用 if 判斷更細的情況，也是常見寫法。

💡 選擇適合的語法，讓程式更清楚、可維護，遠比硬套其中一種來得重要。

結語

switch 是一種適合在變數值範圍明確、條件固定的情況下使用的語法結構。它可以讓程式碼更簡潔、可讀性更高。

不過，也要特別留意 break 的使用，避免程式執行了不希望執行的區塊。

當你熟練掌握 switch，將能更靈活地選擇何時該用 switch，何時該用 if...else，寫出更清楚易懂的程式碼。