dataset属性名转驼峰规则：data-foo-bar-baz→foobarbaz，data-x→x，data-1a被忽略，data-_id→_id；非法名如data-foobar、data-1-foo无法访问，推荐用getattribute避免转换风险。
dataset属性名转驼峰的规则是什么
HTML里写 data-user-id="123"，JS中通过 element.dataset.userId 访问——浏览器自动把连字符转成小驼峰，这是标准行为。但规则有隐含细节：data-foo-bar-baz → fooBarBaz，data-x → x，data-1a 会直接被忽略（属性名不合法），data-_id → _id（下划线保留，不转驼峰）。
为什么 dataset.fooBar 有时取不到值
常见原因不是驼峰错了，而是 HTML 属性名本身不合法或被浏览器静默丢弃：
-
data-FooBar（大写字母开头）→ dataset 中不可见，必须全小写加连字符 -
data-foo--bar（双连字符）→ 转成foo-Bar，不是fooBar，实际变成fooBar吗？不，是foo-Bar→fooBar？错，浏览器按“首个连字符后紧跟字母”切分，--中间无字母，结果是fooBar？实测 Chrome/Firefox 都只认单连字符，--等价于-，但语义混乱，应避免 -
data-foo-bar-1→fooBar1（数字结尾合法），但data-1-foo→ 完全无效，dataset 里没有1Foo或任何键
如何安全地读取带数字或特殊前缀的 data 属性
不要依赖 dataset 的自动转换，尤其当属性名含数字开头、连续符号、或需与 JS 变量名严格对应时：
- 用
getAttribute('data-xxx')直接读原始字符串，绕过驼峰转换逻辑 - 若必须用 dataset，统一约定：HTML 中只用
data-[a-z][a-z0-9]*(-[a-z0-9]+)*格式（小写字母开头，后续仅字母数字和单连字符） - 遇到
data-user-id-2024，它转成userId2024，没问题；但data-2024-user就失效——此时改用getAttribute('data-2024-user') - 注意 IE 不支持 dataset，如需兼容，一律用 getAttribute
dataset 和自定义属性名冲突的真实案例
最易踩的坑是属性名和内置 dataset 键重名，比如：
-
data-id→element.dataset.id，但id也是元素原生属性，虽然不会覆盖，但容易误以为是原生 id -
data-class→element.dataset.class，而class是保留字，JS 中不能直接写dataset.class，得用dataset['class']，否则语法错误 -
data-for、data-default等也同理——它们不是保留字，但属于 HTML 全局属性，浏览器可能做特殊处理，建议避开
真正危险的是你写了 data-value，又同时调用了 input.value，两者语义混用却不自知。dataset 本身不冲突，但人会混淆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
