如何使用 JavaScript 使自定义数据属性值成为数字

how to make custom-data-attribute value numeric with javascript

本文关键字：数字 数据属性 自定义 何使用 JavaScript      更新时间：2023-09-26

嗨，我正在从存储在div 中的 html 数据标签中读取两个数字。当我尝试将数字相加时，它们将作为字符串附加。无论如何，是否可以在数据属性中包含数字并将它们作为数字访问或使用 javascript 将它们转换回非字符串数字，谢谢。

例

<div data-Lon1="1.3" data-Lat1="-1.2"></div>
<script>
   lon1 = $('#zoom1').attr('data-lon1');
   lat1 = $('#zoom1').attr('data-lat1');
   console.log(lat1+lon1);
   //returns '1.3-1.2' (I want .1 in this example)
</script>

只需使用 parseFloat() ：

var lon1 = parseFloat($('#zoom1').attr('data-lon1'));
   lat1 = parseFloat$('#zoom1').attr('data-lat1'));
console.log(lat1+lon1);

JS小提琴演示。

引用：

  • number() .
  • parseFloat() .
您可以使用

.data() 方法，该方法将负责将值正确解析为底层类型：

var lon1 = $('#zoom1').data('lon1');
var lat1 = $('#zoom1').data('lat1');
console.log(lat1 + lon1);

您会注意到，使用 .data() 方法时，您不再将完整的属性名称作为参数传递，而只传递后缀 - lon1 和 lat1 而不是 data-lon1 和 data-lat1 。

这是一个现场演示：http://jsfiddle.net/E7Av7/

哦，不要忘记给你的

div一个正确的id，这样你的数据选择器就会返回一些东西，因为你似乎忘记在问题中发布的代码片段中这样做：

<div data-Lon1="1.3" data-Lat1="-1.2" id="zoom1"></div>​

> 有一个名为 parseFloat 的 JavaScript 函数。使用parseFloat($("#zoom1").attr("data-lon1") .

使用尝试解析值的.data()。

var lon1 = $('div').data('lon1');
var lat1 = $('div').data('lat1');
console.log(lat1+lon1);

但是，如果您希望从中0.1结果，则必须执行以下操作：

console.log( Math.round( ( lat1+lon1 ) * 100000000000 ) / 100000000000 );

否则你会得到0.10000000000000009而不是0.1

请参阅浮点数学坏了吗？

http://jsfiddle.net/E7Av7/1/

相关文章：