javascript - 为什么 jQuery 从自定义数据属性中删除括号？

Question

我正在尝试使用 jQuery 获取数据属性的内容，但返回的数据不是我设置的。

用这个简单的例子:

<div id="test" data-test="[1]"></div>

但是 $('#test').data('test') 返回 1 而不是 [1]

使用纯 JavaScript 没有问题。

在线查看:https://jsfiddle.net/jojhm2nd/

Answer 1

jQuery 的 data不是属性访问器函数。 (这是一个常见的错误，很容易犯。)要访问属性，请使用 attr .

$("#test").attr("data-test");

data 确实读取了 data-* 属性，但只是为该元素初始化 jQuery 的数据缓存。 (而且它从不写入属性。)它会做一系列的事情，包括更改名称(data-testing-one-two-three 变成 testingOneTwoThree，例如)并解释这些值。在这种情况下，它将值解释为数组，因为它以 [ 开头。当您使用 alert 显示该数组时，它会被强制转换为字符串，而当您将数组强制转换为字符串时，它会执行 Array#join。例如，如果您的属性是 [1, 2]，您会看到 1,2 作为结果。

来自上面链接的文档:

Every attempt is made to convert the string to a JavaScript value (this includes booleans, numbers, objects, arrays, and null). A value is only converted to a number if doing so doesn't change the value's representation. For example, "1E02" and "100.000" are equivalent as numbers (numeric value 100) but converting them would alter their representation so they are left as strings. The string value "100" is converted to the number 100.

When the data attribute is an object (starts with '{') or array (starts with '[') then jQuery.parseJSON is used to parse the string; it must follow valid JSON syntax including quoted property names. If the value isn't parseable as a JavaScript value, it is left as a string.