jQuery $.data() 自动类型转换陷阱：何时该用 attr

$.data() 的类型转换机制

自 jQuery 1.6 起，框架遵循 W3C HTML5 规范处理带有连字符的属性名。而在实际取值时，$.data() 会尝试将获取到的字符串值转换为 JavaScript 原生类型。这一过程对开发人员往往是透明的，但也是引发 Bug 的常见源头。

转换规则详解

当使用 $.data(key) 获取元素数据时，jQuery 内部会执行以下判断逻辑：

• 布尔值：如果值为 "true" 或 "false"，则分别返回对应的布尔值 true 或 false。
• null 值：如果值为 "null"，则返回 JavaScript 的 null。
• 数字：如果值是纯数字构成的字符串（例如 "43"），且转换后不改变原意，则返回相应的数字类型。注意：+"43" === "43" 为 false，但 Number("43") 会变成 43。
• JSON 结构：如果值以 { 或 [ 开头和结尾（即匹配正则 (?:\{[\s\S]*\}|\[[\s\S]*\])$），jQuery 会尝试使用 jQuery.parseJSON 将其解析为对象或数组。
• 字符串：如果不满足上述任何条件，则直接返回原始字符串。

示例演示

假设 HTML 结构如下：

<div data-role="page" 
     data-last-value="43" 
     data-hidden="true" 
     data-options='{"name":"John"}'>
</div>

对应的 $.data() 调用结果如下：

• $("div").data("role") 返回字符串 "page"
• $("div").data("lastValue") 返回数字 43（注意 key 去掉了横杠）
• $("div").data("hidden") 返回布尔值 true
• $("div").data("options").name 返回字符串 "John"（因为 data 被解析为了对象）

如何避免意外转换

如果你希望严格获取 HTML 属性中的原始字符串值，而不希望 jQuery 进行任何智能转换，应当使用 .attr() 方法配合 data- 前缀。

推荐做法：

// 正确获取原始字符串值 '43'，而非数字 43
var value = $('#elem').attr('data-last-value');

这种方法绕过了 data()

核心结论

在使用 jQuery.data() 时，务必留意其自动转换行为，特别是在处理数字 ID、布尔配置项或 JSON 配置时。若业务逻辑依赖严格的字符串对比或需防止类型隐式转换，请统一使用 $.attr('data-key')。以上就是 jQuery $.data() 方法使用注意细节的详细内容，更多关于 jQuery 数据操作技巧的资料请关注本站其它相关文章！