javascript - 如何在JavaScript中四舍五入和格式化数字而不尾随零？

我有两个输入相乘，我需要将结果四舍五入而不会尾随零。我尝试了几种不同的内置方法，例如number.toFixed(2)，但是它们没有产生期望的结果。

可以通过在此处的第一和第二输入中键入数字20和6来重现此问题：

$(document).on("change", ".p-cell, .s-cell", () => {
    var val1 = $(".p-cell").val();
    var val2 = $(".s-cell").val();
    var total = val1 / 100 * val2;

    $(".w-cell").val(total).trigger("input");
});

<input class="p-cell" type="text" value="0" />
<input class="s-cell" type="text" value="0" />
<input class="w-cell" type="text" value="0" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

最佳答案

如果要显示两个小数，可以使用Number.prototype.toFixed()，.toFixed(2)：

const $pCell = $(".p-cell");
const $sCell = $(".s-cell");
const $wCell = $(".w-cell");

$(document).on('input', '.p-cel, .s-cell', () => {
  const val1 = $pCell.val() || 0;
  const val2 = $sCell.val() || 0;
  const total = (val1 / 100 * val2).toFixed(2);

  $wCell.val(total);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="p-cell" type="text" value="0" />
<input class="s-cell" type="text" value="0" />
<input class="w-cell" type="text" value="0" readonly />

此外，如果要删除任意数量的尾随零，则1.20变为1.2，而2.00变为2，则可以将String.prototype.replace()与RegExp配合使用：total.replace(/\.?0+$/, '')：

const $pCell = $(".p-cell");
const $sCell = $(".s-cell");
const $wCell = $(".w-cell");

$(document).on('input', '.p-cel, .s-cell', () => {
  const val1 = $pCell.val() || 0;
  const val2 = $sCell.val() || 0;
  const total = (val1 / 100 * val2).toFixed(2);

  $wCell.val(total.replace(/\.?0+$/, ''));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="p-cell" type="text" value="0" />
<input class="s-cell" type="text" value="0" />
<input class="w-cell" type="text" value="0" readonly />