JavaScript 初學者教學：條件控制結構

更新日期： 2025 年 7 月 4 日

在撰寫程式時，程式碼的執行流程往往不是單純的直線順序執行。

為了根據不同情況採取不同的行動，我們需要「條件控制結構」來讓程式具備判斷能力與分支邏輯。

JavaScript 提供了強大的 if、else if 與 else 關鍵字，讓我們能根據條件執行不同的程式碼。

本文將帶你從基礎理解條件控制結構，並提供範例與說明，讓你能輕鬆掌握。

什麼是條件控制結構？

在程式設計中，大多數程式會按照撰寫的順序逐行執行，這種方式稱為「直線執行流程」。

然而，現實世界中的需求往往更複雜，我們經常希望程式能根據不同情況做出不同的反應。

例如根據使用者的輸入、系統的狀態或某個變數的值，決定接下來要執行哪段程式碼。

這時候，就需要「條件控制結構」來幫助我們。

條件控制結構的概念

條件控制結構就像是程式碼中的交通指揮官或十字路口。

當程式執行到某個條件判斷時，它會根據判斷結果選擇不同的路徑繼續執行。

例如：

• 如果使用者輸入的是數字，就顯示該數字的平方。
• 如果使用者輸入的是文字，就提醒使用者「請輸入數字」。
• 如果帳號密碼正確，就讓使用者登入；否則顯示「帳號或密碼錯誤」。

在這樣的情境中，條件控制結構讓程式有了「判斷能力」，根據不同情況決定接下來的執行方向。

為什麼條件控制結構重要？

如果沒有條件控制結構，程式只能從上到下一行一行執行，無法根據不同情況做出適當的反應。

這會讓程式變得非常死板、缺乏靈活性，也無法處理現實世界中千變萬化的需求。

條件控制結構正是讓程式擁有「智慧」的基礎工具，讓它在執行過程中能夠做判斷、走不同的路線，甚至重複或跳過某些動作。

常見的條件控制工具

在 JavaScript 及多數程式語言中，條件控制結構主要包含：

• if：當條件成立時執行某段程式碼。
• else：當條件不成立時執行另一段程式碼。
• else if：當有多個條件需要判斷時，用來建立多條分支。

使用 if 建立條件控制

條件控制結構的基礎就是 if，它能讓程式在條件成立時執行指定程式碼，否則跳過該區塊。這是讓程式具有「判斷能力」的第一步。

基本語法

在 JavaScript 中，if 的語法形式如下：

if (條件表達式) {
  // 當條件為 true 時要執行的程式碼
}

這裡的 條件表達式 是任何會產生布林值（true 或 false）的表達式，例如：

• 比較運算式：x > 0、score === 100
• 邏輯運算式：a && b、!isNaN(x)
• 直接用布林變數：isValid

當條件表達式的結果為 true，程式就會執行大括號 {} 內的程式碼；如果結果是 false，大括號內的程式碼會被跳過，程式會繼續執行後面的程式碼。

⚠ 小提醒：

• 如果大括號內只有一行程式碼，雖然可以省略 {}，但建議初學者養成良好習慣，始終保留大括號，這樣可避免維護程式時發生錯誤。
• 不要忘記條件表達式需要包在小括號 () 裡。

程式流程圖像化理解

程式的執行邏輯可用以下簡單圖示表示：

flowchart TD
    A[開始] --> B{條件表達式?}
    B -->|true| C[執行程式碼]
    B -->|false| D[跳過程式碼]
    C --> E[繼續下一行程式碼]
    D --> E[繼續下一行程式碼]

範例：輸入數字判斷

let theNumber = Number(prompt("Pick a number"));
if (!Number.isNaN(theNumber)) {
  console.log("Your number is the square root of " + theNumber * theNumber);
}

範例步驟解析

1️⃣ 使用 prompt("Pick a number") 顯示輸入框，請使用者輸入資料。
2️⃣ Number(...) 嘗試將輸入的字串轉成數字。
3️⃣ 使用 Number.isNaN(theNumber) 檢查輸入的值是否為 NaN（不是一個有效數字）。
4️⃣ 如果輸入是有效數字（!Number.isNaN(...) 為 true），顯示該數字的平方。

範例執行結果：

• 如果輸入 5 → 顯示：Your number is the square root of 25
• 如果輸入 parrot → 無輸出（條件不成立）

延伸練習：簡單數字範圍檢查

我們可以加入更多條件邏輯，例如：

let theNumber = Number(prompt("Pick a number"));
if (theNumber > 0) {
  console.log("Positive number");
}

這段程式會在輸入數字大於 0 時顯示 Positive number。

常見新手陷阱

✅ 誤用等號
初學者有時會寫成：

if (x = 5) { ... } // 錯誤，這是賦值，不是比較

正確比較是：

if (x === 5) { ... }

✅ 條件表達式不夠嚴謹
例如直接用：

if (theNumber) { ... }

若輸入 0，雖然是數字但條件判斷會是 false，可能不是你要的邏輯。

搭配 else 處理替代路徑

在撰寫程式時，我們常常希望程式除了在條件成立時執行某段程式碼之外，當條件 不成立 時也能執行另一段對應的程式碼。這就是 else 的用途。

當 if 條件判斷結果是 false，程式就會直接執行 else 裡的大括號 {} 所包含的程式碼區塊。這讓程式具備「雙向反應能力」，無論條件是否成立都能處理對應情況。

基本語法

if (條件表達式) {
  // 條件表達式為 true 時執行這裡的程式碼
} else {
  // 條件表達式為 false 時執行這裡的程式碼
}

程式會先評估條件表達式：

• 如果結果是 true，執行 if 區塊內的程式碼。
• 如果結果是 false，跳過 if 區塊，執行 else 區塊的程式碼。

範例：輸入數字判斷並提示錯誤

let theNumber = Number(prompt("Pick a number"));
if (!Number.isNaN(theNumber)) {
  console.log("Your number is the square root of " + theNumber * theNumber);
} else {
  console.log("Hey. Why didn't you give me a number?");
}

範例執行邏輯

1️⃣ 顯示輸入框，請使用者輸入內容。
2️⃣ 嘗試將輸入的值轉成數字。
3️⃣ 檢查輸入的值是否是有效數字：

• 如果是數字：顯示「Your number is the square root of …」並計算平方。
• 如果不是數字：顯示「Hey. Why didn’t you give me a number?」。

執行流程圖

flowchart TD
    A[開始] --> B[輸入值並轉數字]
    B --> C{條件：輸入是有效數字?}
    C -->|是 true| D[顯示平方]
    C -->|否 false| E[顯示錯誤訊息]
    D --> F[繼續後續程式]
    E --> F[繼續後續程式]

這樣的流程讓程式可以完整處理所有情況，避免因未輸入數字而什麼都不做，提升使用者體驗。

生活比喻

想像你去餐廳點餐：

• 如果菜單上有你要的餐點，你點餐並用餐（if）。
• 如果菜單上沒有你要的餐點，服務員會告訴你「不好意思，沒有這道菜」（else）。

程式中的 else 就是扮演這種「預備應對方案」的角色。

注意事項與新手常見錯誤

✅ 條件語法配對正確
else 必須緊跟在 if 或 else if 後面，不能單獨存在。否則會報錯。

✅ else 只執行一次
當條件不成立時，else 的程式碼只會執行一次，不會重複。

✅ 注意邏輯判斷的準確性
例如：

if (theNumber) {
  // 0 會被視為 false，可能不是你預期的行為
} else {
  // 這裡會處理 0、null、undefined、NaN 等情況
}

建議明確判斷數值或型別，像是 Number.isNaN。

延伸範例：更多輸入檢查

let input = prompt("Type something");
if (input === "") {
  console.log("You didn't type anything!");
} else {
  console.log("You typed: " + input);
}

這段程式會根據是否輸入空字串顯示不同訊息。

多條件選擇：if/else if/else 結構

在實際程式開發中，我們經常會遇到一種情況：根據輸入的不同條件，程式需要選擇不同的處理方式。如果條件不只一個，單純的 if 和 else 已經無法滿足需求。此時，我們就可以使用 if / else if / else 結構 來實現多條件判斷與選擇。

語法結構

if (條件1) {
  // 當條件1為 true 時執行的程式碼
} else if (條件2) {
  // 當條件1為 false 且條件2為 true 時執行的程式碼
} else if (條件3) {
  // 當前面條件都不成立，條件3為 true 時執行的程式碼
} else {
  // 當以上條件都不成立時執行的程式碼
}

程式會依序檢查每個條件表達式：
✅ 一旦有某個條件符合（結果為 true），就執行該區塊的程式碼，並跳過後面所有條件。
✅ 如果前面條件都不成立，最後會執行 else 區塊（若有的話）。

範例：數字大小判斷

let num = Number(prompt("Pick a number"));

if (num < 10) {
  console.log("Small");
} else if (num < 100) {
  console.log("Medium");
} else {
  console.log("Large");
}

程式執行邏輯說明

1️⃣ 請使用者輸入一個數字並轉成數值型態。
2️⃣ 程式先檢查 num < 10：

• 如果為真（true），顯示 Small，並跳過其他判斷。

3️⃣ 如果第一個條件不成立（false），程式檢查 num < 100：

• 如果為真（true），顯示 Medium。

4️⃣ 如果以上條件都不成立，最後執行 else：

• 顯示 Large。

範例輸入輸出

程式邏輯流程圖

程式的執行邏輯就像以下的分支流程：

flowchart TD
    A[開始] --> B[輸入數字]
    B --> C{條件：num < 10?}
    C -->|是| D[顯示 Small]
    C -->|否| E{條件：num < 100?}
    E -->|是| F[顯示 Medium]
    E -->|否| G[顯示 Large]

程式會依序檢查條件，一旦符合就執行對應區塊，結束該次條件判斷。

應用情境舉例

這種結構非常適合用在：

• 分級系統（例如成績等級、數字大小、會員等級）
• 多種狀態判斷（例如溫度範圍、金額範圍、年齡層分群）
• 根據使用者選擇提供不同功能或提示

例如：

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

注意事項

✅ 條件的順序很重要
條件應該由「最嚴格」或「最先判斷的」條件開始，否則可能導致邏輯錯誤。例如：

if (num < 100) {
  console.log("Medium");
} else if (num < 10) {
  console.log("Small");  // 這樣永遠不會被執行到
}

因為數字小於 10 一定也小於 100，第一個條件就會被捕捉，後面永遠不會跑。

✅ 善用大括號
即使 if 或 else if 裡面只有一行，也建議保留大括號 {}，程式可讀性與維護性較高。

實務小技巧與補充

在學會基本的條件控制結構後，若能掌握一些小技巧與好習慣，將有助於寫出更清晰、穩健、易維護的程式碼。以下是幾個常見實務重點與建議。

條件表達式

在 if 或 else if 的括號裡，我們必須放入「可以被評估為布林值」的表達式，因為條件控制的核心就在於布林結果（true 或 false）。

常見的條件表達式包括：

• 比較運算式
  例如：x > 0、score === 100、age <= 18
  這些表達式會根據變數的值產生布林結果。
• 邏輯運算式
  例如：a > 0 && b < 10、isMember || isAdmin
  可以組合多個條件，讓邏輯更完整。
• 直接使用布林變數
  如果變數本身是布林型別，例如：if (isLoggedIn)，代表「如果使用者已登入」。

⚠ 小提醒：
在 JavaScript 中，以下值會被視為 false（稱為 falsy 值）：
false、0、""（空字串）、null、undefined、NaN
其他值大多被視為 true（truthy 值）。

大括號的省略

當 if 或 else 條件下只需要執行一行程式碼時，JavaScript 語法上允許省略大括號 {}，例如：

if (x > 0) console.log("Positive number");

雖然看似簡潔，但對初學者強烈建議：
👉 始終保留大括號，即使只有一行。

原因是：

• 可讀性更高，一眼看出範圍。
• 將來維護程式、加新程式碼時較不易出錯。
• 減少因縮排或邏輯誤判造成的 bug。

對比範例（容易出錯的寫法）：

if (x > 0)
  console.log("Positive number");
  console.log("Done checking");

上面程式碼其實會在條件外也印出 Done checking，但乍看像是屬於 if 區塊。

數值轉換

在處理使用者輸入時，尤其來自表單或 prompt，資料型別通常是字串。這時，我們經常會使用：

let num = Number(prompt("Enter a number"));

此寫法會嘗試將輸入字串轉成數字。

⚠ 陷阱：
如果輸入無法轉為數字，例如輸入 abc、hello，Number() 的結果會是 NaN（Not a Number）。

因此，務必要檢查：

if (!Number.isNaN(num)) {
  // 安全處理數字
} else {
  console.log("請輸入有效數字");
}

這樣可以避免程式因意外輸入而出錯或計算錯誤。

巢狀條件

條件控制是可以巢狀使用的，也就是在 if 區塊內再寫一個 if，例如：

if (age > 0) {
  if (age < 18) {
    console.log("未成年");
  } else {
    console.log("成年人");
  }
} else {
  console.log("請輸入有效年齡");
}

巢狀條件讓我們能處理更細緻的邏輯，但也有潛在問題：
⚠ 巢層過深會讓程式變難讀
當巢狀超過 2-3 層時，程式會變得像「樓梯」，不易維護，容易出現邏輯錯誤。

💡 改善建議：

• 考慮使用邏輯運算式合併條件。
• 使用 return 或 break 早點中斷流程，減少巢狀層數。
• 若邏輯複雜，改寫成函式分工。

小結

條件控制結構是程式設計的基礎之一，它賦予程式「思考」與「決策」的能力。

透過 if、else if、else 的組合，我們可以讓程式根據不同條件走向不同的執行路徑。

建議讀者多加練習，試著撰寫屬於自己的條件邏輯程式碼，進一步熟悉這個重要概念。