HTML5 data-*属性类型转换字符串和数字

Question

为什么data-value="2.0"强制转换为String的值和data-value="2.5"强制转换为Number 的值？我可以在我的功能中处理这个问题.我只是想了解一下Javascript如何处理数字和字符串.这让我措手不及.

<a data-value="2.0">2.0</a>
<a data-value="2.5">2.5</a>

$("a").click(function() {
    alert(typeof $(this).data( "value"));   
});

[摆弄它]

Answer 1

这些值只是字符串到vanilla javascript; 它本身并没有尝试任何转换.

[...document.querySelectorAll("a")].forEach(a =>
    console.log("type: %s, value: %o", 
                typeof a.dataset.value, 
                a.dataset.value)
);

<a data-value="2.0">2.0</a>
<a data-value="2.5">2.5</a>

另一方面,jQuery在通过访问数据属性时尝试确定并转换为适当的类型data().这(可以说)是他们实施的问题.他们的文档(强调我的)实际上解决了这个:

每次尝试都将字符串转换为JavaScript值(这包括布尔值,数字,对象,数组和null).如果这样做不会更改值的表示,则只将值转换为数字.例如,"1E02"和"100.000"等同于数字(数值100),但转换它们会改变它们的表示形式,因此它们将保留为字符串.字符串值"100"被转换为数字100.

_{也可以看看 HTMLElement.dataset}

Answer 2

通过jQuery的源代码,我找到了原因.

如果且仅当这样做不会更改字符串时,它会将其解析为数字.资料来源:https://github.com/jquery/jquery/blob/master/src/data.js#L36

(+"2.0") + "" === "2" // !== the original string
(+"2.1") + "" === "2.1" // == the original string