如何在 JavaScript 中舍入和格式化数字而不用尾随零？答案

【问题标题】：How to round and format a number in JavaScript without trailing zeros?如何在 JavaScript 中舍入和格式化数字而不用尾随零？
【发布时间】：2020-08-20 11:57:23
【问题描述】：

我有两个相乘的输入，我需要将结果四舍五入而没有尾随零。我尝试了几种不同的内置方法，例如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>

【问题讨论】：

标签： javascript jquery numbers number-formatting trailing

【解决方案1】：

如果要显示两位小数，可以使用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 />

【讨论】：

【解决方案2】：

您可以使用 Math.round 进行舍入而不尾随零。这里我给你一个技巧。

        $(document).on("change", ".p-cell, .s-cell", function () {
    var val1 = $(".p-cell").val();
    var val2 = $(".s-cell").val();
    var total = Math.round((val1/100 * val2)*100)/100;
    $(".w-cell").val(total).trigger("input");
});

<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" />

【讨论】：

【解决方案3】：

在 JavaScript 中，有几种常见的方法可以四舍五入到固定的小数位数。每个人都有一定的问题。

Number.protototype.toFixed 方法

Number(x).toFixed(digits)

此方法生成一个具有请求位数的字符串。但是，大约 9% 的情况下，它会错误地舍入以 5 结尾的数字。

先乘再除法

Math.round( x * (10 ** digits) ) / (10 ** digits);

这会产生一个四舍五入为 digits 的数字，但大约 0.7% 的时间会错误地四舍五入。

指数加减法

Math.round( x + 'e' + digits ) + 'e-' + digits;

这会产生一个四舍五入为digits 的数字，并且四舍五入正确。但它有一个致命的缺陷——对于小于 1e-6 的输入值，它会返回 NaN。

我编写了一个使用指数加减法的函数，但它避免了小输入值的致命错误。可在github 获得。

/**
 * round number `x` to `digits` number of digits after decimal point
 */
function roundToFixed (val, digits = 0) {
  if (typeof val === 'number' && typeof digits === 'number'
    && Number.isInteger(digits) &&
    (digits === 0 || Math.sign(digits) === 1)) {
    const valF = numToFloat(val);
    const valFNew = numToFloat(
      Math.round(+(valF.mant + 'e' + (valF.exp + digits)))
    );
    return +(valFNew.mant + 'e' + (valFNew.exp - digits));
  }
  return NaN;
}

/**
 * convert number to Float object
 */
function numToFloat (val) {
  const [mant, exp] = Number(val)
    .toExponential()
    .split('e')
    .map(str => +str);
  return {
    mant,
    exp
  };
}

【讨论】：