写ref="/tag/137/" style="color:#C468A7;font-weight:bold;">JavaScript代码时，布尔类型（Boolean）看似简单，但不少人在实际开发中还是容易踩坑。特别是在条件判断、表单验证或状态切换功能里，明明看着是true，结果却进了else分支，让人一头雾水。
布尔值不只是true和false
JavaScript中的布尔类型只有两个字面值：true和false。但很多情况下，我们以为传进去的是布尔值，其实是个字符串或者undefined。比如从HTML的data属性取值：
<button id="toggle" data-active="true">开关</button>
<script>
const btn = document.getElementById('toggle');
const isActive = btn.dataset.active; // 注意：这是字符串"true"，不是布尔值true
if (isActive) {
console.log('会执行'); // 即使值是"false"也会执行，因为非空字符串为真
}
</script>
解决办法是手动转换：
const isActive = btn.dataset.active === 'true'; // 正确转为布尔值
哪些值在条件判断中会被当成false
JavaScript有6个“falsy”值，它们在if语句中会被视为false，即使它们本身不是布尔类型：
- false
- 0
- -0
- ''（空字符串）
- null
- undefined
- NaN
比如你在做一个登录状态判断：
let userCount = 0;
if (userCount) {
console.log('有用户登录');
} else {
console.log('没人登录'); // 实际会走到这一步
}
虽然userCount是数字0，不是布尔false，但它在判断中就等于false。这时候如果逻辑没写清楚，页面可能误显示“未登录”。
双感叹号!!的作用
有时候你想把一个变量明确转成对应的布尔值，可以用!!操作符：
const name = '张三';
const hasName = !!name; // true
const age = 0;
const hasAge = !!age; // false
!!其实就是强制类型转换的一种简写，等价于Boolean(value)。
函数返回布尔值却出错？检查比较逻辑
下面这个函数本意是判断是否成年：
function isAdult(age) {
return age >= 18 ? 'true' : 'false'; // 返回的是字符串！
}
if (isAdult(20)) {
// 虽然走得到，但如果后续用 === true 判断就会失败
}
正确写法应该是：
function isAdult(age) {
return age >= 18; // 直接返回布尔值
}
这类问题在调试时不容易发现，因为字符串"true"也是真值，但在严格相等判断中会翻车。
表单复选框的状态处理
处理checkbox时，经常用checked属性：
const agree = document.getElementById('agree').checked; // 这个值就是布尔类型true/false
这个属性是原生支持布尔类型的，可以直接用，不用再转换。但如果用了value，那拿到的就是字符串，容易搞混。
搞清楚布尔类型的隐式转换和真假判断规则，能少掉很多头发。尤其在状态管理、权限控制这类逻辑里，一个false写成"false"，可能让用户卡在登录页进不去。