一、布爾類型基礎

在 JavaScript 中，布爾類型（Boolean）表示邏輯實體，包含兩個值：true 和 false。布爾值通常用於條件判斷、邏輯運算等場景。

1. 布爾值的定義與賦值

// 直接賦值
let isLoggedIn = true;
let isOffline = false;

// 通過布爾運算
let isOver18 = age >= 18;  // 如果 age 大於或等於 18，則為 true
let isNotEqual = username !== 'admin';  // 如果 username 不等於 'admin'，則為 true

// 通過比較運算符
let isSamePassword = password1 === password2;  // 如果 password1 等於 password2，則為 true
let isGreaterThanZero = balance > 0;  // 如果 balance 大於 0，則為 true

// 通過條件運算符
let hasPermission = isLoggedIn ? 'admin' : 'guest';  // 如果 isLoggedIn 為 true，則 hasPermission 為 'admin'

// 通過 Boolean() 函數轉換
let isTruthy = Boolean(value);  // 將 value 轉換為布爾值

2. 能轉換為 false 的值（假值）

在 JavaScript 中，以下值會被轉換為布爾值 false：

  • null
  • NaN
  • 0（包括 -0）
  • 空字符串（""、'' 或 ``  `）
  • undefined

其他所有值都被視為真值（truthy）。

二、布爾值的使用場景與代碼

1. 條件判斷（if/else）

// 示例 1：判斷用户是否登錄
let isLoggedIn = true;
if (isLoggedIn) {
  console.log('歡迎回來！'); // 輸出: 歡迎回來！
} else {
  console.log('請登錄');
}

// 示例 2：判斷數值是否為正數
let number = -5;
if (number > 0) {
  console.log('這是一個正數');
} else {
  console.log('這不是一個正數'); // 輸出: 這不是一個正數
}

// 示例 3：檢查空字符串
let username = "";
if (username) {
  console.log('用户名已輸入');
} else {
  console.log('請輸入用户名'); // 輸出: 請輸入用户名
}

2. 布爾運算符

// 取反運算符 (!)
console.log(!true);  // false
console.log(!false); // true
console.log(!0);     // true (0 轉換為 false，再取反)
console.log(!"hello"); // false ("hello" 是真值，取反後為 false)

// 且運算符 (&&)
console.log(true && true);  // true
console.log(true && false); // false
console.log(5 > 3 && 2 < 4); // true
console.log(5 > 3 && 2 > 4); // false

// 或運算符 (||)
console.log(true || true);  // true
console.log(true || false); // true
console.log(false || false); // false
console.log(5 > 3 || 2 > 4); // true

// 三元運算符 (? :)
let age = 20;
let canDrive = (age >= 18) ? '可以開車' : '不能開車';
console.log(canDrive); // 輸出: 可以開車

3. return true 和 return false

// 表單驗證示例
function validateForm() {
  let username = document.getElementById('username').value;
  if (username === "") {
    alert("請輸入用户名");
    return false; // 阻止表單提交
  }
  return true; // 允許表單提交
}

// HTML 表單
/*
<form onsubmit="return validateForm()">
  <input type="text" id="username">
  <input type="submit" value="提交">
</form>
*/

// 事件處理中的使用
document.getElementById('myButton').addEventListener('click', function(event) {
  console.log("按鈕被點擊");
  // 阻止默認行為（如鏈接跳轉）
  return false;
});

// 更現代的寫法（推薦）
document.getElementById('myLink').addEventListener('click', function(event) {
  event.preventDefault(); // 阻止默認行為
  event.stopPropagation(); // 阻止事件冒泡
  console.log("鏈接被點擊，但不會跳轉");
});

4. 布爾對象的使用

// 創建布爾對象（不推薦，一般直接使用原始值）
let boolObj = new Boolean(true);
console.log(boolObj); // [Boolean: true]

// 使用布爾對象的方法
console.log(boolObj.toString()); // "true"
console.log(boolObj.valueOf()); // true

// 注意：布爾對象在布爾上下文中總是視為 true
if (new Boolean(false)) {
  console.log("布爾對象在布爾上下文中總是視為 true"); // 這行會被執行
}

三、注意事項

  1. 避免使用 new Boolean() 創建布爾對象：直接使用布爾原始值（true/false）更直觀高效。
  2. 區分 return false 和 return 'false'：
// 正確：返回布爾值 false
return false;

// 錯誤：返回字符串 'false'，不是布爾值
return 'false';
  1. 在事件處理中：return false 在瀏覽器環境中可以阻止默認行為，但更推薦使用 event.preventDefault() 和 event.stopPropagation()。
  2. 真值與假值：JavaScript 中所有對象（包括空對象 {}）都是真值，所以 Boolean({}) 返回 true。