使用 JavaScript 对数字求和无法正常工作"Intl.NumberFormat"

Question

我有一个带有产品表的页面，每个产品都有一个价格。当我改变数量时，它会得到总价…

但是我有这个问题:当数字小于"1000"时，总和是可以的。

,

1. prod1: 200
2. prod 2: 200
3. 产品3:500
4. 总:900

但是当数字大于"1000"时，逗号就是问题所在。我得到了一个错误的答案。

,

1. prod1: 200
2. 产品2:1200
3. 产品3:300
4. 总:501

当我删除"Intl.NumberFormat"从每个产品的总数中，我得到了正确的答案，但在某些情况下，我得到的数字是这样的:"1.000031545";我不需要我只需要点后面的前两位数字。

代码:(simplefied)

<table>
<tr>
<td style="text-align: center;">
<label for="prod[<?php echo $prodid; ?>]"><input class='qty' style="font-size: 12px;" type="text" name="qty_<?php echo $prodid; ?>" placeholder="qty" minlength="1" maxlength="3" size="2"></label>
</td>
<td class='price'>
<?php echo $prodprice; ?>
</td>
<td width="40" class="sum">0</td>
</tr>
<tr>
<td colspan="3">
<span class="output"></span>
</td>
</table>
<script type="text/javascript">
function getTotal(){
var total = 0;
$('.sum').each(function(){
total += parseFloat(this.innerHTML);
});
$('#total').text(total);
givenNumber = total; 
nfObject = new Intl.NumberFormat('en-US'); 
output = nfObject.format(givenNumber); 
document.querySelector('.output').textContent = total; 
}
getTotal();
$('.qty').keyup(function(){
var parent = $(this).parents('tr');
var price = $('.price', parent);
var sum = $('.sum', parent);
var value = parseInt(this.value) * parseFloat(price.get(0).innerHTML||0);
givenNum1 = value; 
nfObj = new Intl.NumberFormat('en-US'); 
outpu = nfObj.format(givenNum1); 
sum.text(outpu);
getTotal();
})
</script>

Answer 1

引用MDN Web Docs

如果parseFloat遇到加号(+)以外的字符，则减去符号(- U+002D连字符- minus)，数字(0-9)，小数点(.)，或指数(e或e)，则返回该字符之前的值，忽略无效字符及其后面的字符

您可以使用replace()删除逗号，然后解析它以获得正确的值。

let str = "1,200"
let newStr = str.replace(/,/g,"");

console.log(`Without replace ${parseFloat(str)}`);
console.log(`With replace ${newStr}`);

Answer 2

parseFloat在第一个无效字符处停止解析。,不是parseFloat的有效字符。

可以删除,:

total += parseFloat(this.textContent.replace(/,/g, ""));

注意，我也从innerHTML切换到textContent。

还请注意，我使用了带有g("global")标志的正则表达式，因为.replace(",", "")只会替换第一个逗号(因此1,200,300会失败)。或者在现代环境中，你可以使用replaceAll，但它是相对较新的(虽然很容易填充):

total += parseFloat(this.textContent.replaceAll(",", ""));

对于这个，我只使用正则表达式。