dataset属性名转JS变量名规则是：去掉data-前缀，短横线后字母大写转驼峰，如data-user-id→userId；命名必须全小写加短横线，含下划线、大写字母或数字开头均无效，值恒为字符串需手动转换。
dataset属性名怎么转成JS变量名
HTML里用 data- 开头的自定义属性，JS中通过 dataset 访问时，浏览器会自动做驼峰转换：短横线（-）被去掉，后面字母大写。比如 data-user-id → userId，data-api-url → apiUrl。
注意大小写敏感，data-UserId 不会变成 userid 或 userId，而是直接转成 userid（全小写），因为转换规则只识别短横线，不识别大写字母。
常见错误现象：element.dataset.userId 取不到值，但 HTML 写的是 data-user_id 或 data-userID —— 这两种都不会匹配到 userId，前者下划线不触发转换，后者大写 D 不会被识别为分隔符。
取不到值的几个典型原因
不是所有情况都能靠 dataset 直接读到。以下情况会返回 undefined 或空字符串：
立即学习“前端免费学习笔记（深入）”；
-
data-属性名拼写错误，比如写了data-usre-id却读dataset.userId - 元素还没加载完成就执行 JS（比如脚本放在
<head>且没加defer），dataset对象存在但属性为空 - 属性值是空字符串（
<div data-flag="">），dataset.flag返回空字符串，不是undefined，容易和“没设置”混淆 - 使用了非法字符，比如
data-123foo（以数字开头）或data-foo.bar（含点号），这些属性根本不会出现在dataset中
dataset读取和设置的实际写法
读取就是点语法，设置也是点语法，但要注意：设置时会自动转成小写短横线格式写回 HTML（浏览器内部处理）。
示例：
<button id="btn" data-modal-id="login" data-is-open="true">打开</button>
JS 中：
const btn = document.getElementById('btn');console.log(btn.dataset.modalId); // "login"console.log(btn.dataset.isOpen); // "true"（注意是字符串，不是布尔值）btn.dataset.isOpen = 'false'; // HTML 中自动更新为 data-is-open="false"btn.dataset.newKey = 'abc'; // 自动添加 data-new-key="abc"
⚠️ 关键点：dataset 值永远是字符串，"true" ≠ true，需要手动转换；设置 null 或 undefined 会清空属性值，但不会删除该属性。
兼容性与替代方案
dataset 在 IE11+、Edge、Chrome、Firefox、Safari 都支持，但 IE10 及更早版本不支持。如果必须兼容老 IE，得用 getAttribute() 和 setAttribute() 手动处理短横线命名。
例如：el.getAttribute('data-user-id') 比 el.dataset.userId 多敲几个字符，但语义明确、无转换歧义，也绕过了驼峰规则带来的困惑。
真正容易被忽略的是：当服务端模板动态生成 data- 属性时，如果变量含大写字母或特殊符号（如 {{ data-userName }}），前端 JS 里用 dataset.username 就可能拿错——得先确认最终渲染出的 HTML 属性名到底长什么样。
