javascript - 如何使用 javascript 使自定义数据属性值数字化

Question

嗨，我正在从存储在 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>

Answer 1

只需使用parseFloat()：

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

JS 小提琴演示。

参考：

• number().
• parseFloat().

Answer 2

您可以使用.data()将值正确解析为基础类型的方法：

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

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

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

哦，不要忘记为您的 div 提供正确的 id，以便您的数据选择器返回一些内容，因为您似乎忘记在问题中发布的代码段中执行此操作：

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

Answer 3

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

Answer 4

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

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/