data-id值必须是字符串，即使写成data-id="123"，读取时也是"123"；参与计算需显式转number，比较宜用字符串严格相等。
data-id 该用字符串还是数字？
HTML 的 data-id 属性值**必须是字符串**，哪怕你写的是 data-id="123"，浏览器也会按字符串存储。JavaScript 读取时得到的永远是 "123"，不是 123。直接参与计算（比如 el.dataset.id + 1）会变成 "1231"，这是最常踩的坑。
实操建议：
- 需要数值运算时，显式转类型：
Number(el.dataset.id)或+el.dataset.id - 做 ID 比较（如查找匹配项）时，优先用字符串相等（
===），避免隐式转换引入意外 - 服务端返回的整数 ID，插入 HTML 前不必手动转字符串——模板引擎或 innerHTML 拼接时自动 toString
列表项里用 data-* 标记状态，比 class 更合适吗？
是的，只要这个信息**不直接影响样式或可访问性**，就该用 data-* 而不是 class。比如 data-status="draft" 表示草稿态，而 class="status-draft" 会污染样式层，且语义模糊——它到底是样式类还是状态标识？
典型场景：
- 动态渲染控制：根据
data-is-pinned="true"决定是否置顶，无需额外 DOM 查询或全局状态映射 - 批量操作前筛选：
document.querySelectorAll('[data-deletable="true"]')比靠 class 名或结构位置更可靠 - 避免 class 名膨胀：不用为每个状态组合（
draft expired urgent）维护一堆 class，用data-分离关注点
dataset.inStock 和 dataset.inStock === 'true' 为什么不能混用？
dataset 接口把所有 data- 值都当作字符串返回，没有布尔、数字或 null 的自动转换。所以 data-in-stock="false" 读出来是字符串 "false"，它在布尔上下文中仍是 true（非空字符串）。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
常见错误现象：
-
if (el.dataset.inStock) { ... }—— 即使值是"false"也会执行 -
el.dataset.inStock === true—— 类型不匹配，永远 false
正确写法：
- 布尔语义：用字符串严格比较，
el.dataset.inStock === 'true' - 或统一约定空值表示 false：
el.dataset.inStock != null（但需确保服务端不传空字符串） - 复杂逻辑建议封装工具函数：
parseBoolean(el.dataset.inStock)
data-* 值里能放 JSON 或对象吗？
可以存，但不推荐。HTML 属性值本质是字符串，你写 data-meta='{"id":1,"name":"foo"}' 是合法的，但容易出错：
- 单双引号嵌套混乱，尤其字段值含引号时
- 特殊字符（如换行、
- 解析成本高：
JSON.parse(el.dataset.meta)每次都要调用，且可能抛异常
更稳妥的做法：
- 拆成多个
data-属性：data-user-id="1" data-user-name="foo" - 只存关键 ID 或标识符，详细数据由 JS 从本地 Map 或 API 缓存中查
- 真要塞结构化数据，改用
<script type="application/json"></script>块，语义清晰、无转义负担
真正难处理的不是怎么存，而是谁负责清理——data 属性一旦挂上，除非 JS 显式删除，否则一直留在 DOM 上。列表频繁增删时，记得同步清理无用的 data-，否则内存里堆满“僵尸元数据”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
