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

k75qkfdt  于 2023-06-05  发布在  jQuery
关注(0)|答案(6)|浏览(174)

为什么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 (http://jsfiddle.net/oz29du9u/)

tct7dpnv

tct7dpnv1#

那些值对于普通JavaScript来说只是字符串;它不会自己尝试任何转换。

console.table(
  [...document.querySelectorAll("a")]
    .map(({dataset:{value}}) => ({
      type: typeof value,
      value
    })
  )
);
<a data-value="2.0">2.0</a>                                                       <script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script><script>console.config({maximize:true,timeStamps:false})</script><style>.as-console-wrapper{display:block;}</style>
<a data-value="2.5">2.5</a>

另一方面,jQuery在通过data()访问数据属性时会尝试确定并转换为适当的类型。这是(可以说)他们实施的问题。他们的documentation(强调我的)实际上解决了这个问题:
每次尝试都是将字符串转换为JavaScript值(包括布尔值、数字、对象、数组和null)。只有在不改变值的表示形式的情况下,才会将值转换为数字。**例如,“1 E02”和“100.000”等同于数字(数值100),但转换它们会改变它们的表示形式,因此它们将保留为字符串。
参见HTMLElement. [dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset)

bhmjp9jg

bhmjp9jg2#

通过查看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
bvk5enib

bvk5enib3#

默认情况下,从属性解析的任何内容都是字符串,如果需要将其作为数字使用,则需要将其转换为数字。我能够处理这个问题的最好方法是用Number函数(原生JavaScript) Package 它

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

parseInt将返回一个整数(整数),所以如果你想保留你的十进制值,你需要使用Number。使用parseInt需要注意的是,如果你想解析一个int,最好指定base,parseInt($(this).data(“value”),10);

laik7k3q

laik7k3q4#

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

9lowa7mx

9lowa7mx5#

它似乎将数字的“.0”扩展名视为字符串。
如果你所有的数据值都将以这种格式出现,只需在这些吸盘上像这样鞭打一个parseFloat()

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

这样,无论它们是字符串还是数字,它们都将始终被视为数字(小数完好无损)。

chy5wohz

chy5wohz6#

我认为这更像是一个关于jquery如何识别数字的问题。如果使用alert(typeof(this.getAttribute("data-value")));,它会两次都显示它是一个字符串(这是预期的)。据我所知,html属性中的所有内容都被认为是字符串,只是不同的库可能有不同的默认行为来解释它们。
另外,一种得到数字的速记方法是沿着...

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

如果返回的值是字符串,+将导致类型强制转换,或者如果它已经是数字,则不使用它。

相关问题