data属性值均为字符串，需显式比对或类型转换；判断存在性用hasAttribute()；布尔值须严格比对"true"/"false"；数值比较前用Number()转换；JSON需getAttribute+try/catch解析。
data 属性值不能直接用真假值判断，必须显式比对或转换类型。 浏览器把所有 data-* 值当字符串存，"false"、"0"、"" 都是真值，if (el.dataset.enabled) 这种写法在绝大多数业务场景下都会出错。
data-* 属性是否存在？别用 dataset === undefined
判断属性是否声明（不管有没有值），最可靠的是 el.hasAttribute('data-xxx')。用 el.dataset.xxx === undefined 不行，因为：
-
dataset是只读代理，未声明的属性不会出现在其键中，但访问未声明字段返回undefined—— 看似能用，实则掩盖了命名不规范问题（比如写了data-userId，dataset.userId就是undefined，但根本不是“没声明”，而是浏览器压根没解析） -
hasAttribute()直接查 DOM，结果明确，且兼容 IE11 - 如果需要区分“存在但为空”和“完全不存在”，再补一句
el.getAttribute('data-xxx') === ""
布尔值怎么安全判断？别信字符串真假
data-active="false" 读出来是字符串 "false"，它在 if 中为真。正确做法是严格比对字符串内容：
- 显式判断：
el.dataset.active === "true"或el.dataset.active === "false" - 封装成函数更稳妥：
const isTrue = (val) => val === "true"; isTrue(el.dataset.active) - 避免用
Boolean(el.dataset.active)或!!el.dataset.active，它们对非空字符串一律返回true - 服务端渲染时，确保后端输出的是
"true"/"false"字符串，而不是true（无引号）或1/0
数值比较前必须转换，否则是字符串字典序
data-count="99" 和 data-count="100" 用 dataset.count > 100 比较，结果是 true（因为 "99" > "100" 是字符串比较）。必须先转类型：
立即学习“前端免费学习笔记（深入）”；
- 推荐用
+el.dataset.count或Number(el.dataset.count)，两者都可处理"123"、"0"、""（后者转为0，前者转为NaN） - 加防护：
const count = Number(el.dataset.count); if (!isNaN(count) && count > 100) { ... } - 不要用
parseInt(el.dataset.count)，它会截断小数和非数字后缀（"123px"→123），业务中容易埋坑
JSON 字符串必须手动 parse，且要 try/catch
data-config='{"theme":"dark","timeout":5000}' 读出来是字符串，不是对象。直接 el.dataset.config.theme 会报错：
- 必须用
JSON.parse(el.getAttribute('data-config'))，不用dataset.config—— 因为dataset会自动 trim()，而 JSON 字符串前后若有空格或换行，parse会失败 - 务必包
try/catch：let config; try { config = JSON.parse(el.getAttribute('data-config')); } catch (e) { config = {}; } - 服务端输出 JSON 前，必须 HTML 实体编码（如
"替代"），否则引号冲突导致语法错误 - 如果框架（如 Vue/React）动态绑定，确认传入的是字符串化后的 JSON，而非原始对象（否则变成
[object Object]）
真正麻烦的从来不是读值，而是命名不规范导致 dataset 根本访问不到、服务端未转义让 JSON.parse 直接崩、或者混用 dataset 和 setAttribute 让状态脱钩——这些点一旦漏掉，调试成本远高于写几行转换逻辑。
