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

【问题标题】：HTML5 data-* attribute type casting strings and numbersHTML5 data-* 属性类型转换字符串和数字
【发布时间】：2014-11-25 09:18:15
【问题描述】：

为什么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"));   
});

[ Fiddle With It ]

【问题讨论】：

我不知道为什么会这样，但你可以看到以0 结尾的浮点数总是被假装为字符串。可能是因为最后一个 0 无关紧要，因此被解释为文本。例如：2.5 是数字，2.50 是字符串。
jQuery 的 .data 方法将尝试转换 data-* 属性中的任何内容 - 如果您希望它作为原始字符串值，请使用 .attr("data-*")
@tymeJV 感谢您的提醒！
fyi，我在一个项目中使用 jquery 1.7.1，当数据属性为“6.00”时它返回“6”。

标签： javascript jquery string html jquery-data

【解决方案1】：

这些值只是普通 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() 访问数据属性时尝试确定并转换为适当的类型。这（可以说）是他们实施的一个问题。他们的documentation（重点是我的）实际上解决了这个问题：

每次尝试都将字符串转换为 JavaScript 值（这包括布尔值、数字、对象、数组和 null）。如果这样做不会更改值的表示，则仅将值转换为数字。 例如，“1E02”和“100.000”等价于数字（数值 100），但转换它们会改变它们的表示，因此它们保留为字符串。字符串值“100”被转换为编号 100。

_{另见HTMLElement.@987654323@}

【讨论】：

谢谢！我没有意识到 JQuery 做到了这一点。我花了几个小时通过一个 600 行的脚本来寻找一个错误，现在觉得很愚蠢！ +1 例如。
很高兴知道这一变化。原来从 1.8 rc 1 开始就是这样。

【解决方案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

【讨论】：

【解决方案3】：

默认情况下，从属性解析的任何内容都是字符串，如果您需要将其用作数字，则需要将其转换为数字。我能够处理这个问题的最好方法是用 Number 函数（本机 javascript）包装它

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

parseInt 将返回一个整数（整数），所以如果你想保留你的十进制值，你需要使用 Number. 谨慎使用 parseInt，如果要解析 int，最好指定基数， parseInt($(this).data("value"), 10);

【讨论】：

他为什么要parseInt()？他有十进制值，例如2.5。
我在@dave lunny 之后发布了我的答案，他之前曾引用过 parseInt 但后来对其进行了编辑。我应该更明确一点。我将删除该部分以避免混淆。

【解决方案4】：

正如 tymeJV 所提到的，这看起来像是 jquery 如何处理自动转换的问题。如果你使用“2”，它也会给出一个数字，所以我猜这只是他们处理事情的一个奇怪的边缘情况。我鼓励只使用 .attr('xxx') 并将您的数据解析为其已知类型。

【讨论】：

【解决方案5】：

它似乎将数字的“.0”扩展名视为字符串。

如果您的所有数据值都将采用该格式，只需像这样在这些傻瓜上鞭打parseFloat()：

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

这样无论是字符串还是数字都无关紧要，它们将始终被视为数字（完整的小数）。

【讨论】：

考虑到2.5，parseFloat() 会不会更合适？

【解决方案6】：

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

此外，获取数字的简写方式类似于...

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

如果返回的值是一个字符串，+ 将导致类型强制，如果它已经是一个数字，则不管它。

【讨论】：