<p>HTML data-* 属性仅支持字符串，数字布尔对象需 JSON 序列化；属性名须全小写加连字符，dataset 自动转驼峰但忽略非法命名，读取结构化数据必须用 getAttribute + JSON.parse 并加 try/catch。</p>
HTML data-* 属性只能存字符串，别试图直接塞数字、布尔或对象进去——浏览器会悄悄调用 toString()，结果不是你想要的。
data-* 属性名必须全小写加连字符
浏览器只认符合规范的命名：前缀 data- 后必须是小写字母、数字或连字符（-），不能有大写、下划线、点号或空格。比如：
-
data-user-id✅ 可被dataset.userId正常读取 -
data-userId❌ 解析后变成data-userid，dataset.userId读不到 -
data-user_id❌dataset.user_id语法错误，dataset["user_id"]也无效 -
data-2024-year❌dataset.2024Year是非法变量名，只能用getAttribute('data-2024-year')
dataset.xxx 和 getAttribute('data-xxx') 的关键区别
两者都返回字符串，但行为差异极大，选错就静默失败：
-
dataset会自动把连字符转驼峰，且只处理全小写+连字符格式；含数字开头、大写、下划线时一律忽略，返回undefined不报错 -
getAttribute('data-xxx')直接读原始 HTML 字符串，不转换、不丢弃、不类型转换，兼容所有合法data-*名 - 值为
""（空字符串）时：getAttribute()返回""，dataset.xxx仍返回undefined—— 判断是否存在得用hasAttribute('data-xxx')
存数组或对象必须 JSON.stringify()
data-* 是 DOM 字符串属性，不是 JS 变量容器。想存结构化数据，必须手动序列化：
立即学习“前端免费学习笔记（深入）”；
- 写入：
el.setAttribute('data-config', JSON.stringify({ theme: 'dark', timeout: 3000 })); - 读取：
const config = JSON.parse(el.getAttribute('data-config') || '{}'); - 必须加
try/catch：用户改了 HTML 源码、服务端注入异常 JSON、或字段被删掉，都会让JSON.parse()报错 - 别用
dataset.config = {...}：这会触发隐式toString()，对象变[object Object]，数组变1,2,3
容易被忽略的细节
很多人卡在“明明写了 data 属性却读不到”，问题往往出在这些地方：
- HTML 中写了
data-userRole="admin"，但浏览器解析后是data-userrole，dataset.userRole永远是undefined - 用
innerHTML动态插入带data-*的元素，需确保插入后 DOM 已更新，否则dataset可能为空 - 服务端模板渲染时拼错了引号，比如
data-config='{"theme": "dark}'缺右引号，JS 读出来就是截断字符串，JSON.parse()必炸 - 存的是
"false"或"0"，别指望它自动变布尔或数字——dataset.isActive === "false"才对，不是=== false
