javascript - 在文本输入中使用带逗号的数字进行乘法运算

Question

我需要将两个输入的值相乘并将结果放入另一个输入。结果需要逗号，但为了在 JavaScript 中相乘，我需要从输入 1 和 2 中删除逗号。在此之前我也尝试使用 replace() 方法。我在下面包含了我的 HTML 和 JS。

HTML

<div>
<input id="input1" type="text" />
<input id="input2" type="text" />
<input id="input3" type="text" />
</div>

JS

$(document).on("input", "#input1, #input2", function () {
    var val1 = parseFloat($("#input1").val());
    var val2 = parseFloat($("#input2").val());
    var total = val1 * val2;
    $("#input3").val(total).trigger("input");
});

Answer 1

首先，通过删除逗号将input1和input2中的字符串值转换为浮点数。

其次，随心所欲地做数学。

第三，将结果转换回字符串，然后用逗号格式化。

参考：

从字符串中删除逗号：https ://stackoverflow.com/a/11665949/11392920

用逗号将数字格式化为千位分隔符：https ://stackoverflow.com/a/2901298/11392920

$(document).on("input", "#input1, #input2", function() {
  var val1 = parseFloat($("#input1").val().replace(/,/g, ''));
  var val2 = parseFloat($("#input2").val().replace(/,/g, ''));
  var total = val1 * val2;
  total = total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  $("#input3").val(total);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input id="input1" type="text" />
  <input id="input2" type="text" />
  <input id="input3" type="text" />
</div>

Answer 2

首先想到的是将输出转换为字符串并定期添加逗号。这是一个代码示例（其中 num 是要显示的数字）：

var str = num + "";
var output = "";

for (var i = 0; i < str.length; i++) {
    output += str[i];
    if ((str.length - i - 1) % 3 == 0 && i < str.length - 1)
        output += ",";
}