Javascript - 替换非整数的函数错误

Question

使用下面的Javascript代码来代替逗号来计算费率。用逗号&精确的小数就可以了。

例子：如果data-rate="3,300.99 "或 "24.20 "或 "35.20"，则可以用逗号代替逗号。 如果data-rate="3,300.99 "或 "24.20 "或 "35.00"......没有任何问题。

但是，当值为 前。 data-rate="22. 68". 得到以下错误。不能使用math.round，因为我们需要得到精确的值作为输出。

$("#ele").data(..).replace不是一个函数。

var addOnRate = $("#ele").data("rate").replace(/,/g, "");

console.log("addOnRate", addOnRate);

<div id="ele" data-rate="3,330.99" data-tax="89.98">..</div>

<div id="ele" data-rate="35.00" data-tax="10.00">..</div>

<div id="ele" data-rate="22.68" data-tax="9.90">..</div>

Answer 1

问题在于 .data() 将数据转换为数字，你可以使用 .toString() 将其转换为字符串

for(const el of ["#ele0", "#ele1", "#ele2"]) {
  var addOnRate = $(el).data("rate").toString().replace(/,/g, "");

  console.log("addOnRate", addOnRate);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ele0" data-rate="3,330.99" data-tax="89.98">..</div>

<div id="ele1" data-rate="35.00" data-tax="10.00">..</div>


<div id="ele2" data-rate="22.68" data-tax="9.90">..</div>

Answer 2

jQuery的 data 函数很聪明，将 "22.68" 给你一个数字。但它不认识 "3,300.99" 作为一个数字（因为我猜是逗号），所以它是作为一个字符串留下的。字符串有一个 replace 方法，但数字没有。可能最简单的方法是一致的，把所有的值都变成字符串，jQuery的文档说用 .attr("data-rate") 或者使用香草JS document.getElementById("ele").dataset.rate.

Answer 3

这可以用普通的Javascript很容易的完成。

let addOnRates = [...document.querySelectorAll(".ele")].map(el => {
    return el.dataset.rate.replace(/,/g, "")
});

console.log("addOnRate", addOnRates);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ele" data-rate="3,330.99" data-tax="89.98">..</div>

<div class="ele" data-rate="35.00" data-tax="10.00">..</div>


<div class="ele" data-rate="22.68" data-tax="9.90">..</div>

Answer 4

主要原因是 22.68 铸成 Number 在此 data() 这就是为什么它显示错误，而 "3300.99 "或 "24.20 "或 "35.00"。String 和弦 replace() 方法。所以，如果你把它们全部投给String，那么它应该对你有效。

var addOnRate1 = String($("#ele1").data("rate")).replace(/,/g, "");
var addOnRate2 = String($("#ele2").data("rate")).replace(/,/g, "");
var addOnRate3 = String($("#ele3").data("rate")).replace(/,/g, "");

console.log("addOnRate1", addOnRate1);
console.log("addOnRate2", addOnRate2);
console.log("addOnRate3", addOnRate3);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ele1" data-rate="3,330.99" data-tax="89.98">..</div>

<div id="ele2" data-rate="22.68" data-tax="9.90">..</div>

<div id="ele3" data-rate="35.00" data-tax="10.00">..</div>