JavaScript 條件判斷：if、else if 與 else 用法

條件語法用於不同條件執行不同的動作，是 流程控制 中最常用的一種。

if

當條件成立的時候會執行陳述式裡的程式。

if ( 條件一 ) {
  // 條件一成立時執行
}

if...else

當條件成立的時候會執行 if 陳述式裡的程式，而不成立時則執行另外一個陳述式。

if ( 條件一 ) {
  // 條件一成立時執行
} else {
  // 條件一不成立時執行
}

if...else if...else

當條件成立的時候會執行 if 陳述式裡的程式，而不成立時會再進行另一個條件判斷，若條件成立的時候會執行 else if 陳述式裡的程式，而不成立時則執行另外一個陳述式。

if ( 條件一 ) {
  // 條件一成立時執行
} else if ( 條件二 ) {
  // 條件一不成立、條件二成立時執行
} else {
  // 條件一、條件二都不成立時執行
}

小提醒

分支是 由上往下 判斷，只要有一個成立，後面的就不會再檢查。所以範圍較小、較特殊的條件要寫在前面。

實際例子

const score = 85;

if (score >= 90) {
  console.log('優等');
} else if (score >= 60) {
  console.log('及格');
} else {
  console.log('不及格');
}

搭配 事件 更常見，這是 事件委派 裡的典型寫法：

document.querySelector('#BtnWrap').addEventListener('click', (e) => {
  if (e.target.nodeName !== 'INPUT') return;

  console.log(e.target.value);
});

常用的比較運算子

運算子	說明
===	值與型別都相同
!==	值或型別不同
>、<	大於、小於
>=、<=	大於等於、小於等於

注意

請用 === 而不是 ==。== 會先做型別轉換，'1' == 1 竟然成立，是初學者最容易踩的坑之一。

組合多個條件

運算子	意義	說明
&&	且	兩邊都成立才成立
||	或	任一邊成立就成立
!	非	把結果反過來

const age = 20;
const hasTicket = true;

if (age >= 18 && hasTicket) {
  console.log('可以入場');
}

三元運算子

只是要依條件取兩個值之一，寫成一行更清爽：

const age = 20;

// 成年
const msg = age >= 18 ? '成年' : '未成年';

console.log(msg);

小提醒

三元運算子適合 取值；要執行多個動作或條件很複雜時，還是用 if 好讀。

常見問題

為什麼比較要用三個等號？

兩個等號會先做型別轉換，導致字串 '1' 等於數字 1 這種難以預期的結果。三個等號會連型別一起比對，行為好預測，實務上一律建議使用。

else if 可以寫幾個？

語法上沒有限制，但超過三、四個分支就該考慮改用 switch，或把判斷改成物件對照表，可讀性會好很多。

條件只有一行時可以省略大括號嗎？

語法允許，但不建議。省略大括號後，日後新增第二行程式很容易誤以為它也在條件內，實際上並不是，這是常見的錯誤來源。

三元運算子什麼時候用？

適合依條件取兩個值之一並直接賦值的情況，一行就能寫完。若要執行多個動作或條件複雜，仍請用 if。

怎麼判斷變數有沒有值？

簡單的寫法是直接 if (value)，但 0 與空字串也會被判為不成立。想只排除 null 與 undefined，請寫 value != null 或用空值合併運算子 ??。

延伸閱讀

switchtry...catch流程控制