在前端开发中，我们经常需要对数字进行格式化，以满足特定的显示要求，例如在展示货币金额、百分比或其他数值时，保持小数点后位数的统一性。javascript中的数字类型本身并不包含格式信息，因此，将一个整数或小数格式化为固定两位小数的字符串，是常见的需求。例如，将数字18显示为"18.00"，18.1显示为"18.10"，18.11显示为"18.11"。
使用 Number.prototype.toFixed() 方法
JavaScript提供了 Number.prototype.toFixed() 方法，它是实现这一目标最直接且推荐的方式。该方法将数字四舍五入到指定的小数位数，并返回一个表示该数字的字符串。
方法签名：numObj.toFixed(digits)
- digits：可选参数，指定小数点后应该有多少位数字。该值必须在0到20之间（包括0和20）。如果省略此参数，则默认为0。
示例： 为了满足上述需求，我们需要将digits参数设置为2。
let num1 = 18; let num2 = 18.1; let num3 = 18.11; let num4 = 18.123; // 演示四舍五入 console.log(num1.toFixed(2)); // 输出: "18.00" console.log(num2.toFixed(2)); // 输出: "18.10" console.log(num3.toFixed(2)); // 输出: "18.11" console.log(num4.toFixed(2)); // 输出: "18.12" (四舍五入) console.log((0).toFixed(2)); // 输出: "0.00"
从上述示例可以看出，toFixed(2)能够很好地处理各种情况：
- 当数字是整数时，它会添加.00。
- 当数字只有一位小数时，它会补齐一位0。
- 当数字有两位小数时，它会保持不变。
- 当数字有超过两位小数时，它会进行四舍五入到两位小数。
注意事项
-
返回类型是字符串： toFixed() 方法返回的是一个 字符串，而不是一个数字。这是因为数字本身没有固定的格式，格式化操作本质上就是将数字转换为特定格式的文本表示。因此，如果您需要对结果进行进一步的数学运算，您可能需要先将其转换回数字类型（例如使用parseFloat()），但在进行转换时请注意浮点数精度问题。
立即学习“Java免费学习笔记（深入）”；
let formattedString = (10.5).toFixed(2); // "10.50" console.log(typeof formattedString); // "string" let numericValue = parseFloat(formattedString); // 10.5 console.log(typeof numericValue); // "number"
浮点数精度： 尽管 toFixed() 在显示上能提供准确的两位小数，但JavaScript处理浮点数时固有的精度问题仍然存在。对于高度精确的财务计算，建议使用专门的数学库来避免潜在的浮点数误差。然而，对于大多数仅用于显示目的的场景，toFixed() 是完全足够的。
-
与 toString() 的区别： 默认的 Number.prototype.toString() 方法会将数字转换为字符串，但它只会显示有效数字，不会添加额外的零来填充小数位数。
console.log((18).toString()); // "18" console.log((18.1).toString()); // "18.1" console.log((18.11).toString()); // "18.11"
这进一步突出了 toFixed() 在格式化显示方面的独特作用。
总结
Number.prototype.toFixed(2) 是在JavaScript中将数字格式化为固定两位小数（包括整数补零）的简洁高效方法。它返回一个字符串，非常适合在用户界面中展示统一格式的数值。在使用时，请务必记住其返回类型为字符串，并根据后续操作决定是否需要进行类型转换。
