Logo

新人日誌

首頁關於我部落格

新人日誌

Logo

網站會不定期發佈技術筆記、職場心得相關的內容,歡迎關注本站!

網站
首頁關於我部落格
部落格
分類系列文

© 新人日誌. All rights reserved. 2020-present.

本文為「JS 101:資料型別」系列第 11 篇

JavaScript 邏輯運算子:&&、||、! 和三元運算子完整教學

最後更新:2026年2月23日JavaScript

在前一篇文章中,我們學會了用比較運算子產生布林值——也就是只有 true(真)和 false(假)兩種可能的值。

但在實際寫程式時,判斷條件往往不會只有一個。

例如:「使用者有登入而且是 VIP 會員」才能享有折扣、「密碼錯誤或者帳號不存在」就顯示錯誤訊息。

這些情境需要把多個布林值組合起來,做出更複雜的判斷。

JavaScript 提供了三種邏輯運算子來處理這件事:「和(&&)」、「或(||)」以及「非(!)」。

這篇文章會逐一介紹它們的用法,最後再帶你認識一個特別的三元運算子。

JavaScript 邏輯「和」運算子:&&

&& 運算子表示邏輯上的「和」,屬於二元運算子——放在兩個值之間使用。

這一點跟前一篇介紹的 >、<、== 一樣,都是二元運算子。

但差別在於:>、<、== 是拿兩個數字或字串來比較,然後產生布林值,例如 3 > 2 會得到 true。

而 && 是拿兩個布林值來做邏輯運算,然後產生一個新的布林值,例如 true && false 會得到 false。

它的規則很簡單:只有當兩邊的值都是 true,結果才會是 true。

只要其中一邊是 false,結果就是 false。

先來看第一個例子:

console.log(true && false);
// → false

左邊是 true,右邊是 false,兩邊不是都為 true,所以結果是 false。

console.log(true && true);
// → true

左邊是 true,右邊也是 true,兩邊都為 true,所以結果是 true。

你可以把 && 想成一個很嚴格的檢查:兩個條件都要通過,最終結果才算通過。

JavaScript 邏輯「或」運算子:||

|| 運算子表示邏輯上的「或」,同樣是二元運算子。

它的規則跟 && 相反:只要其中一邊是 true,結果就是 true。

只有當兩邊都是 false 時,結果才會是 false。

console.log(false || true);
// → true

左邊是 false,但右邊是 true,有一邊是 true,所以結果是 true。

console.log(false || false);
// → false

左邊是 false,右邊也是 false,兩邊都不是 true,所以結果是 false。

你可以把 || 想成一個比較寬鬆的檢查:只要有一個條件通過,最終結果就算通過。

JavaScript 邏輯「非」運算子:!

! 運算子表示邏輯上的「非」,跟前面兩個不一樣,它是一元運算子——只需要一個值就能運算。

它的作用很單純:把布林值反轉。

true 變成 false,false 變成 true。

console.log(!true);
// → false

true 前面加上 !,被反轉成 false。

console.log(!false);
// → true

false 前面加上 !,被反轉成 true。

運算子的優先順序

當邏輯運算子、比較運算子和算數運算子混在一起使用時,JavaScript 會按照固定的優先順序來決定先算哪個。

這就像數學裡「先乘除後加減」的概念一樣。

JavaScript 運算子的優先順序,從最先計算到最後計算,大致上是這樣的:

  1. 邏輯「非」(!)
  2. 算數運算子(+、-、*、/ 等)
  3. 比較運算子(>、<、==、!= 等)
  4. 邏輯「和」(&&)
  5. 邏輯「或」(||)

也就是說,! 的優先序最高,會最先被計算;|| 的優先序最低,會最後才被計算。

來看一個例子:

console.log(1 + 1 == 2 && 10 * 10 > 50);
// → true

這一行看起來很長,但 JavaScript 會按照優先順序,一步一步處理:

第一步,先算算數運算子:1 + 1 得到 2,10 * 10 得到 100。

1 + 1 == 2 && 10 * 10 > 50
// 算完後變成:
2 == 2 && 100 > 50

第二步,再算比較運算子:2 == 2 得到 true,100 > 50 得到 true。

2 == 2 && 100 > 50
// 算完後變成:
true && true

第三步,最後算邏輯運算子:true && true 得到 true。

true && true
// 算完後變成:
true

因為有了這套優先順序,我們不需要額外加括號,JavaScript 就能正確地理解這個表達式。

再看一個包含 ! 的例子:

console.log(!false && 3 > 1);
// → true

JavaScript 會按照優先順序處理:

第一步,先算 !:!false 得到 true。

!false && 3 > 1
// 算完後變成:
true && 3 > 1

第二步,再算比較運算子:3 > 1 得到 true。

true && 3 > 1
// 算完後變成:
true && true

第三步,最後算 &&:true && true 得到 true。

true && true
// 算完後變成:
true

JavaScript 三元運算子(條件運算子):? :

前面介紹的運算子,不是一元就是二元。

但 JavaScript 裡還有一個特別的運算子,它需要三個值才能運算,叫做三元運算子(ternary operator),也叫條件運算子。

它的寫法長這樣:

true ? 1 : 2

? 的左邊放一個布林值,? 和 : 之間放第一個選項,: 的右邊放第二個選項。

JavaScript 會根據左邊的布林值來「挑選」後面兩個選項的其中一個。

如果左邊是 true,就選 ? 和 : 之間的值。

如果左邊是 false,就選 : 右邊的值。

來看實際的例子:

console.log(true ? 1 : 2);
// → 1

? 左邊是 true,所以選擇中間的值 1。

console.log(false ? 1 : 2);
// → 2

? 左邊是 false,所以選擇右邊的值 2。

三元運算子常用在需要根據條件「二選一」的情境,用一行就能寫完,不需要寫一整個 if...else 語句。

小結

  • &&(和):兩邊都是 true,結果才是 true。
  • ||(或):只要一邊是 true,結果就是 true。
  • !(非):把布林值反轉,true 變 false,false 變 true。
  • 運算子有優先順序:算數 → 比較 → && → ||。
  • 三元運算子 ? : 根據條件「二選一」,是 JavaScript 中唯一的三元運算子。
上一篇初學者指南:JavaScript 中 undefined 和 not defined 的差異
目前還沒有留言,成為第一個留言的人吧!

發表留言

留言將在審核後顯示。

JavaScript

目錄

  • JavaScript 邏輯「和」運算子:&&
  • JavaScript 邏輯「或」運算子:||
  • JavaScript 邏輯「非」運算子:!
  • 運算子的優先順序
  • JavaScript 三元運算子(條件運算子):? :
  • 小結