data属性值始终是字符串，不能直接存数字；读取时需用number()等显式转换，避免类型隐式错误，且服务端渲染要确保输出合法字符串。
data属性值始终是字符串，不能直接存数字
HTML 的 data- 属性底层是 DOM 字符串属性，哪怕你写 <div data-id="42">，用 JavaScript 读出来也是 <code>"42"，不是 42。这不是 bug，是规范行为——HTML 解析器不推断类型。
读取时手动转换最可靠
用 dataset 或 getAttribute() 读出的值一律是字符串，必须显式转类型：
const el = document.querySelector('[data-id]');
const idStr = el.dataset.id; // "42"
const idNum = Number(el.dataset.id); // 42
const idNum2 = +el.dataset.id; // 42（一元加号也行）
const idInt = parseInt(el.dataset.id, 10); // 42（注意指定 radix）
推荐用 Number()：它对空字符串、null 返回 NaN，比 parseInt 更严格，不易掩盖错误；避免只用 +，因为 +" 42 " 会静默去空格，而 Number(" 42 ") 也会返回 42，但语义更清晰。
别在 data 属性里存浮点数或科学计数法
虽然语法上允许，但容易引发精度和解析歧义：
-
data-price="19.99"→Number("19.99")安全，但data-price="0.1+0.2"是无效值，不会自动计算 -
data-value="1e5"→Number("1e5")得到100000，但可读性差，协作时易误解 - 小数点后末尾零会被浏览器丢弃（
data-x="3.00"读出来是"3"），所以别依赖格式保留
需要频繁读写数值？考虑用 Map 缓存或自定义属性
如果组件内大量操作 data 数值（比如拖拽更新 data-index 并实时排序），反复调用 Number() 有微小开销，且逻辑分散。这时可以：
- 首次读取后存进
WeakMap缓存：避免重复转换 - 用
Object.defineProperty在元素上挂载 getter/setter，把el.myIndex映射到el.dataset.index并自动转换 - 更简单做法：只把原始字符串存在
data-，业务逻辑中统一用Number()转，别试图让 HTML “懂类型”
真正容易被忽略的是：服务端渲染时若动态插入 data 值，要确保输出的是合法字符串（比如 JSON.stringify 后再塞进去），否则 data-count="{{ count }}" 在 count 为 undefined 时可能生成 data-count=""，前端 Number("") 得 0，而非 NaN——这个隐式转换常导致逻辑偏差。
