HTML5 data- *属性types转换string和数字

为什么data-value="2.0"的值被强制转换为String，而data-value="2.5"强制转换为Number？ 我可以在我的function内处理这个罚款。 我只是想更多地了解Javascript如何处理数字和string。 这种情况让我措手不及。

 <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

这些值是简单的string香草的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> 

Answer 2

通过jQuery的源代码，我已经确定了原因。

它会将其parsing为一个数字，并且只有这样做才能改变string。 资料来源： https ： //github.com/jquery/jquery/blob/master/src/data.js#L36

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

Answer 3

默认情况下，从一个属性parsing的任何东西都是一个string，如果你需要把它作为一个数字，你将需要把它转换成一个数字。 我已经能够处理这个最好的方法是用数字函数（native javascript）包装它，

 var number = Number($(this).data("value")); 

parseInt将返回一个整数（整数），所以如果你想保留你的小数值，你将需要使用数字。 用parseInt注意，如果你想parsing一个int，parseInt（$（this）.data（“value”），10）;

Answer 4

正如tymeJV提到的，这看起来像jquery如何处理自动转换问题。 如果你使用“2”，它也给出了一个数字，所以我猜测它只是一个奇怪的边缘情况下如何处理的事情。 我鼓励使用.attr（'xxx'）并将数据parsing为已知types。

Answer 5

它似乎正在治疗的数字像一个string“.0”的扩展。

如果所有的数据值都将以这种格式进入，只需在这些吸盘上parseFloat() ：

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

这样，如果他们是string或数字，都不会有问题，他们将始终被视为数字（完整的小数）。

Answer 6

我认为这更多的是关于jQuery如何识别数字的问题。 如果你使用alert(typeof(this.getAttribute("data-value"))); ，它吐出它是一个string两次（这是预期的）。 据我所知，html属性中的所有内容都被认为是一个string，只是不同的库可能有默认的行为来解释它们。

此外，一个简短的方法来获得一个数字将是沿线的东西…

 var someNumber = +$(someElt).data("value"); 

如果返回的值是一个string，那么+会引起types强制，如果它已经是一个数字，则会使它独立。