data-*属性值始终为字符串，非布尔/数值/JSON类型；读取需显式转换，写入必须用setAttribute，命名须全小写连字符且避免数字开头或大小写混用。
data-* 属性里的 "true" 和 "false" 不是布尔值
HTML 中 data-is-active="true" 写得再像布尔值，JavaScript 读出来也只是字符串 "true"。直接写 if (el.dataset.isActive) 会把 "false"、"0"、甚至空格字符串都当成真值——因为它们全是非空字符串。这不是 JS bug，是规范行为。
常见错误现象：
– el.dataset.loading === false 永远不成立
– el.dataset.enabled + 1 得到 "true1" 而不是 2
– 后端返回 data-is-pending="false"，前端却误判为启用状态
- 判断布尔含义，必须显式比对字符串：
el.dataset.isActive === "true" - 用存在性判断更安全：
el.hasAttribute("data-is-active")（只看属性是否存在，不依赖值） - 避免
Boolean(el.dataset.xxx)或!!el.dataset.xxx，它们对"false"返回true
dataset 读取时自动驼峰，但值永远是字符串
data-user-id="1001" 在 JS 中要通过 el.dataset.userId 访问，这是 dataset 的自动转换规则；但 el.dataset.userId 的值仍是字符串 "1001"，不是数字 1001。连字符转驼峰只是命名映射，和类型无关。
容易踩的坑：
– data-2024-start="2026-09-21" → 必须用 el.dataset["2024Start"]，点号语法非法
– data-apiKey="abc" → el.dataset.apiKey 是 undefined（大小写不合法，浏览器忽略该属性）
– data_user_id="123" → el.dataset.userId 读不到，得用 el.getAttribute("data_user_id")
立即学习“前端免费学习笔记（深入）”；
- 命名必须全小写 + 连字符，否则 dataset 映射失败
- 数字开头的属性名，只能用方括号访问：
el.dataset["2024Id"] - 不确定命名是否规范时，优先用
el.getAttribute("data-xxx")直接读原始值
数值和 JSON 数据不能靠 dataset 自动解析
哪怕你写 data-price="299.99" 或 data-config='{"theme":"dark"}'，el.dataset.price 和 el.dataset.config 返回的仍是字符串。JavaScript 不会主动调用 parseFloat 或 JSON.parse。
典型错误：
– el.dataset.count > 100 做字符串比较（"99" > "100" 返回 true）
– el.dataset.config.theme 报错，因为 el.dataset.config 是字符串，不是对象
- 数值转换用
Number(el.dataset.count)或一元加号：+el.dataset.count - JSON 数据必须手动解析：
JSON.parse(el.dataset.config || "{}") - 务必加
try/catch，防止服务端未转义或格式错误导致脚本崩溃 - 敏感字段如
data-token、data-secret绝对禁止——源码里明文可见
写入 data 属性必须用 setAttribute，别信 dataset 赋值
el.dataset.foo = "bar" 看似能改，但它只是更新 dataset 对象的缓存副本，不会同步到 DOM 属性节点。你在 DevTools 里刷新 el.outerHTML，发现 data-foo 还是旧值；其他代码调用 getAttribute("data-foo") 也会拿到旧值。
混用后果：
– 先 el.dataset.foo = "a"，再 el.setAttribute("data-foo", "b")
– 接着 el.dataset.foo 还是 "a"，而 el.getAttribute("data-foo") 是 "b"
– 状态彻底分裂
- 写入唯一可靠方式：
el.setAttribute("data-foo", "new-value") - 删除用：
el.removeAttribute("data-foo")（比delete el.dataset.foo更稳妥） - 读取优先用
el.dataset.foo（语义清晰、自动驼峰），但前提是命名规范 - SSR 场景下首次 JS 执行前
dataset为空，必须用getAttribute安全取值
真实项目里最常被忽略的，是命名合法性检查和写入 API 的统一。一个 data-userId 看似只是拼写差异，却会让整条数据链路静默失效；而一次 dataset.xxx = "val" 的随手赋值，可能在后续调试中引发难以复现的状态不一致。
