在 JavaScript 中的 if 語句中指定多個條件

在 JavaScript 中，將每個條件放在 if 陳述式的括號內。所有條件都必須成立時，用 && 連接；至少一個條件成立即可時，用 || 連接。混合邏輯時可加上括號，讓條件分組一目了然；若不同條件要執行不同動作，則使用 if...else if 鏈。

在 JavaScript 的 if 陳述式中使用 && 和 || 組合條件

在 if 條件中，&& 要求兩個運算元都是真值，而 || 則要求至少一個運算元是真值。JavaScript 的邏輯運算子會回傳其中一個運算元的值，不一定是布林值；接著，if 陳述式會檢查該結果的真假值。例如，age >= 18 && hasTicket 只會在當事人已成年且持有票券時允許執行動作。只要其中一個條件是假值，組合後的條件就是假值。

例如，isAdmin || isOwner 會在使用者是管理員或項目擁有者時允許執行動作。請依照規則選擇運算子：「以下條件全部成立」使用 &&；「以下條件任一成立」使用 ||。

在這個範例中，第一個檢查只接受已成年且持有票券的人；第二個檢查則接受管理員或項目擁有者。

執行這個範例：

本節中的程式碼以及顯示的標籤或輸出仍為英文。

const visitors = [
  { name: "Ava", age: 20, hasTicket: true, isAdmin: false, isOwner: false },
  { name: "Ben", age: 16, hasTicket: true, isAdmin: false, isOwner: true },
  { name: "Cy", age: 30, hasTicket: false, isAdmin: true, isOwner: false }
];

for (const visitor of visitors) {
  if (visitor.age >= 18 && visitor.hasTicket) {
    console.log(`${visitor.name}: entry allowed`);
  }

  if (visitor.isAdmin || visitor.isOwner) {
    console.log(`${visitor.name}: can manage the item`);
  }
}

Ava: entry allowed
Ben: can manage the item
Cy: can manage the item

條件使用布林屬性與數值比較，因此在運算子組合結果之前，可以先分別理解每個部分。在實際程式中，請將範例值換成應用程式中的值。

使用分組與優先順序安全地組合 && 和 ||

你可以在同一個條件中組合這兩種運算子。JavaScript 會先計算 && 再計算 ||，因此 isMember || hasCoupon && cartTotal >= 50 等同於 isMember || (hasCoupon && cartTotal >= 50)。這表示所有會員都符合條件；非會員則必須持有優惠券，且購物車總額至少為 50。

若規則需要不同的分組方式，或加上括號能讓規則更容易閱讀，就應加入括號。例如，(isMember || hasCoupon) && cartTotal >= 50 要求會員和持有優惠券的人都達到最低消費金額。這兩個運算式的結果並不相同。JavaScript 運算子的優先順序可參閱 MDN 運算子優先順序參考。

比較值是否等於特定數字或字串時，請使用嚴格相等，例如 status === "ready"。這可以避免寬鬆相等（==）進行的型別轉換。邏輯運算子也會短路求值：左側是假值時，&& 不會計算右側；左側是真值時，|| 會略過右側。這適合用於先檢查條件再存取值的情況，例如 user !== null && user !== undefined && user.active。

當不同條件需要執行不同動作時，使用 if…else if

單一 if 條件可組合多個檢查，並用來決定是否執行同一個動作。若要根據某個值從多個不同動作中選擇一個，請使用 if...else if...else 鏈。JavaScript 會依序檢查各分支，執行第一個條件成立的分支，並略過該鏈中其餘分支。最後的 else 是選用的，可處理所有前面條件都不符合的值。

例如，可以用 score >= 90、score >= 70 和 score >= 50 等條件將分數分級。請先檢查最高級距：分數 95 符合這三個比較條件，但這個分支鏈只會執行第一個符合的分支。以下範例會為每個級距指定不同的動作標籤：

本節中的程式碼以及顯示的標籤或輸出仍為英文。

const score = 95;
let action;

if (score >= 90) {
  action = "excellent";
} else if (score >= 70) {
  action = "pass";
} else if (score >= 50) {
  action = "review";
} else {
  action = "retry";
}

當 score 設為 95 時，action 會是 "excellent"。這個範例中的動作標籤維持英文。雖然分數也符合較低的門檻，JavaScript 在第一個條件符合後就會略過其餘分支。若改用彼此獨立的 if 陳述式，同一個分數可能會觸發多個動作。

請確保每個分支的條件與動作相符。例如，因為先檢查較高級距，score >= 70 分支涵蓋從 70 起、未滿 90 的分數。若要直接檢查某個範圍，可用 && 組合比較條件，例如 score >= 70 && score < 90；若要檢查特定值，則使用 ===。