html的data-属性值全为字符串，布尔判断须用严格相等（如dataset.flag === "true"），因boolean("false")返回true；dataset自动驼峰转换但仅支持字符串，数字/特殊字符命名需getattribute兜底。
HTML 的 data- 属性本身不支持真正的布尔类型，所有值都是字符串；所谓“布尔值”只是开发者约定的语义，比如 data-is-active="true"，但 JS 读出来永远是字符串 "true"，不是 JS 的 true。直接当布尔用会出错。
为什么 Boolean(el.dataset.flag) 不可靠
因为 dataset 返回的全是字符串，而 Boolean("false") 是 true，Boolean("0") 也是 true，Boolean("") 才是 false —— 这和 HTML 布尔属性（如 disabled）的行为完全无关。
-
data-enabled="false"→Boolean(el.dataset.enabled)返回true（错误） -
data-pending=""（空值）→Boolean(el.dataset.pending)返回false，但语义模糊，不可控 - 正确判断方式：用严格相等
el.dataset.enabled === "true" - 若允许
"1"/"0"等数值字符串，需统一约定并显式转换，例如el.dataset.enabled === "1"
dataset 和 getAttribute() 在布尔场景下的选择
两者返回值类型一致（都是字符串），但行为细节影响可靠性：
-
el.dataset.isPending自动驼峰转换，可读性好；但无法访问含下划线或数字开头的 key（如data-2024-flag必须用el.dataset["2024Flag"]） -
el.getAttribute("data-is-pending")命名直译，兼容所有合法命名，且在 SSR 渲染后的初始 HTML 中更稳定（dataset在 DOM 解析完成前可能未就绪） - 写入时：
dataset赋值只是内存操作，必须配合setAttribute()才能真实更新 DOM；仅靠el.dataset.flag = "true"后再取getAttribute("data-flag")可能仍为旧值
如何安全地转换 data-* 布尔值
别依赖自动类型推断，手动校验 + 显式转换才是唯一可控方式：
- 基础判断（推荐）：
el.dataset.isActive === "true"或el.dataset.isActive === "1"，前提是服务端/模板层严格输出一致值 - 容错增强（多值支持）：
["true", "1", "on"].includes(el.dataset.enabled) - 避免
JSON.parse()直接处理布尔字符串 ——JSON.parse("true")虽然可行，但JSON.parse("false")也合法，而JSON.parse("1")会报错；不如保持字符串比较 - 若需转为 JS 布尔变量，封装成函数：
const toBool = (s) => s === "true" || s === "1"; toBool(el.dataset.ready)
哪些情况根本不该用 data-* 存布尔状态
data-* 是静态上下文容器，不是状态管理工具：
- 频繁切换的开关（如“加载中”状态）→ 应该用 JS 变量 + class 切换，而非反复改
data-is-loading - 权限控制类布尔（如
data-can-edit）→ 敏感信息明文暴露在 HTML 源码中，有安全风险 - 组件级交互状态（如折叠/展开）→ 用
details/summary或自定义属性 + class + CSS 控制更合理 - 表单验证结果（如
data-valid="false"）→ 应优先用原生setCustomValidity()或:valid/:invalid伪类
最常被忽略的一点：data-* 的变更会触发 DOM 重排（尤其在循环中批量读写），性能敏感场景下，先缓存 dataset 值到局部变量再操作，比反复访问更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
