JavaScript 變數與資料型別 ── 布林值（Boolean）

簡介

在程式語言的世界裡，布林值是最基本的判斷單位，只有兩種可能：true（真）或 false（假）。在 JavaScript 中，幾乎所有的條件判斷、迴圈控制、函式回傳值，都離不開布林值的運算。掌握布林值的行為，不僅能寫出正確的程式邏輯，也能避免常見的錯誤與效能問題。

本章節將從概念說明、實作範例、常見陷阱與最佳實踐，帶你一步步深入了解 Boolean 在 JavaScript 中的運作方式，並透過實務案例說明它在前端開發、資料驗證與流程控制中的應用。

核心概念

1. Boolean 的基本型別

JavaScript 內建兩個布林常值：

true   // 真
false  // 假

使用 typeof 可以檢查其資料型別：

console.log(typeof true);   // "boolean"
console.log(typeof false);  // "boolean"

注意：Boolean（首字母大寫）是 建構子，用來將其他類型轉成布林值；而 boolean（全小寫）則是資料型別的名稱。

2. Boolean() 建構子與型別轉換

Boolean() 可以把任意值「強制」轉成布林值，稱為 真值（truthy） 或 偽值（falsy）。

偽值 (falsy)	說明
`false`	原始布林值
`0`、`-0`、`0n`	數值 0
`""`、````	空字串
`null`	空值
`undefined`	未定義
`NaN`	非數值

除上述之外的所有值，都屬於 真值（truthy）。

console.log(Boolean(0));          // false
console.log(Boolean(""));         // false
console.log(Boolean([]));         // true   <-- 陣列即使空也是 truthy
console.log(Boolean({}));         // true   <-- 物件也是 truthy

小技巧：在條件式中直接使用變數即可，JavaScript 會自動做隱式轉換。

3. 常見的布林運算子

運算子	說明	範例
`!`	邏輯 NOT，將 `true` 變 `false`，反之亦然	`!true // false`
`&&`	邏輯 AND，兩側皆為 true 才回傳 true	`true && false // false`
`		`
`===`、`!==`	嚴格相等/不等，會同時比較型別	`1 === "1" // false`

範例 1：利用 `&&` 進行條件賦值

// 若 user.isAdmin 為 true，才給予 admin 權限
const canEdit = user.isAdmin && true;
console.log(canEdit); // true 或 false

範例 2：使用 `||` 設定預設值

// 若傳入的參數為 falsy，使用預設值 10
function getLimit(limit) {
  return limit || 10;
}
console.log(getLimit(0));   // 10   <-- 0 為 falsy
console.log(getLimit(5));   // 5

範例 3：結合 `!` 與 `===` 判斷空字串

function isEmpty(str) {
  return !str || str === "";
}
console.log(isEmpty(""));      // true
console.log(isEmpty("Hello")); // false

範例 4：三元運算子與布林值

const isOnline = true;
const status = isOnline ? "上線" : "離線";
console.log(status); // "上線"

範例 5：布林值在陣列過濾中的應用

const numbers = [0, 1, 2, 3, 4, 5];
const truthyNumbers = numbers.filter(Boolean); // 移除 0
console.log(truthyNumbers); // [1, 2, 3, 4, 5]

常見陷阱與最佳實踐

1. 混淆 `==` 與 `===`

== 會在比較前自動做型別轉換，可能得到意外結果：

console.log(false == 0);   // true  <-- 會自動轉型別
console.log(false === 0);  // false <-- 嚴格比較

最佳實踐：除非確定需求，盡量使用 === 與 !==。

2. 不小心把物件或陣列當作 falsy

if ({}) { console.log("永遠會執行"); } // true
if ([]) { console.log("永遠會執行"); } // true

即使是空物件或空陣列，也屬於 truthy。若要判斷「是否為空」需自行檢查長度或屬性。

3. 使用 `Boolean()` 轉換時的意外結果

const value = "0";
console.log(Boolean(value)); // true，因為字串 "0" 不是 falsy

如果想要判斷「字串是否真的為 0」應該先轉成數字再比較。

4. 短路運算的副作用

let count = 0;
function inc() { count++; return true; }

false && inc(); // inc 不會被呼叫
true && inc();  // inc 會被呼叫

短路運算 (&&、||) 會根據左側結果決定右側是否執行，利用這點可以寫出簡潔的條件執行，但也要注意不要把重要的副作用隱藏在右側。

5. 不要把 `Boolean` 物件當作原始布林值

const b = new Boolean(false);
if (b) {
  console.log("這裡仍會執行"); // 因為 b 是物件，永遠為 truthy
}

最佳實踐：直接使用原始布林值 true/false，避免 new Boolean()。

實際應用場景

1. 表單驗證

在前端表單驗證時，常以布林值表示每個欄位是否通過檢查，最後再以 && 合併判斷整體是否可以送出。

function validate(form) {
  const isNameOk   = !!form.name.trim();
  const isEmailOk  = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email);
  const isAgreeOk  = form.agree === true;

  return isNameOk && isEmailOk && isAgreeOk;
}

2. 功能開關（Feature Flag）

大型專案常用布林值控制功能是否啟用，配合環境變數或遠端設定。

const FEATURES = {
  darkMode: true,
  betaChat: false,
};

if (FEATURES.darkMode) {
  enableDarkTheme();
}

3. API 回傳狀態

後端常以 success: true/false 來告訴前端操作是否成功，前端可直接根據布林值決定 UI 呈現。

fetch('/api/login', { method: 'POST', body: JSON.stringify(data) })
  .then(res => res.json())
  .then(({ success, message }) => {
    if (success) {
      redirectToDashboard();
    } else {
      alert(`登入失敗：${message}`);
    }
  });

4. 條件式渲染（React/Vue）

在框架中，布林值常用於決定是否渲染某個元件。

// React 範例
{isLoading && <Spinner />}
{!isLoading && <Content />}

總結

布林值是 JavaScript 條件判斷的核心，從 真值 / 偽值、運算子 到 短路行為，每一個細節都直接影響程式的正確性與可讀性。掌握以下要點，即可在開發中更自信地使用 Boolean：

嚴格比較 (===、!==) 取代寬鬆比較。
明確認識 falsy 與 truthy，避免把空物件、空陣列誤當 false。
利用 短路運算 實現簡潔的條件執行，但要留意副作用。
在 表單驗證、功能開關、API 回傳、框架渲染 等實務情境中，以布林值作為判斷依據，可提升程式的可維護性與可測試性。

只要熟練上述概念，你就能在 JavaScript 的任何專案裡，寫出既安全又易讀的條件邏輯，為程式的穩定性與效能奠定堅實基礎。祝你在 JavaScript 的學習之路上，布林值永遠是你的好幫手！