html data-* 属性值在 dom 中始终为字符串，写入数字会自动转字符串，读取需手动转换；dataset 仅支持合规命名，不合规名须用 getattribute()；修改 dataset 不更新 dom，须用 setattribute()。
HTML data-* 属性本身**不能真正存储数字类型**，所有值在 DOM 中都以字符串形式存在；所谓“存数字”，只是写入时用数字字面量（会被自动转成字符串），读取后必须手动转换。
为什么 dataset.xxx 返回的永远是字符串
浏览器解析 HTML 时，把 data-count="42"、data-price="299.99"、data-is-active="true" 全部当作字符串存入 DOM 属性节点。即使你用 JS 写 el.dataset.count = 42，实际存进去的是 "42"（调用 String(42)）。这是规范行为，不是 bug。
常见错误现象：
-
if (el.dataset.isActive === true)→ 永远不成立，因为el.dataset.isActive是字符串"true" -
el.dataset.count + 1→ 得到"421"（字符串拼接），不是43 -
typeof el.dataset.count→ 总是"string"
怎么安全地存和读数字值
写入阶段无需特殊处理：直接写 HTML 或用 setAttribute() 即可，浏览器会自动转字符串。
读取阶段必须显式转换，推荐以下方式：
- 整数：
Number(el.dataset.count)或+el.dataset.count（一元加号） - 浮点数：
parseFloat(el.dataset.price)，比Number()更容错（如"123.45abc"能取到123.45） - 带校验的健壮写法：
const count = Number(el.dataset.count) || 0;（防undefined或空字符串） - 避免
parseInt()单独使用——它默认十进制但会忽略尾部非数字字符，易出错
dataset 和 getAttribute() 在数字场景下的区别
两者返回值类型一致（都是字符串），但适用边界不同：
- 用
dataset.count前提是属性名合规：data-count→dataset.count；若写成data-userId或data_1st_load，dataset直接返回undefined，根本读不到原始字符串 - 用
getAttribute('data-count')更底层、更可靠：不管命名是否含大写、下划线、数字开头，只要 HTML 里写了，就能读到原始字符串值 - 所以当你要读一个可能命名不规范的 data 属性（比如服务端模板动态生成的
data-order-2024-id），别碰dataset，直接上getAttribute()+Number()
别踩这些坑
最常被忽略的一点：dataset 是只读代理，修改它不会更新 DOM 属性节点。
-
el.dataset.count = 100→ 看似生效，但el.outerHTML里仍是旧值，DevTools 也不变 - 真要更新，必须用
el.setAttribute('data-count', '100') - 如果后续逻辑依赖属性值被真实写入（比如 CSS 选择器
[data-count="100"]），只改dataset就失效 - 同理，删除要用
el.removeAttribute('data-count')，而不是delete el.dataset.count
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
