异常教程

js 保留两位小数（长文讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在 JavaScript 开发中，数字的格式化是一个常见需求，尤其是在处理财务计算、商品价格或科学计算时，保留两位小数的需求尤为突出。无论是前端展示用户余额，还是后端处理订单金额，如何准确且优雅地实现这一功能，是开发者需要掌握的基础技能。本文将从基础方法到进阶技巧，结合实际案例，深入解析如何在 JavaScript 中实现“保留两位小数”的目标，并帮助读者避免常见陷阱。

一、基础方法：直接使用 toFixed() 方法

JavaScript 内置的 Number.prototype.toFixed() 方法是保留指定小数位数的最常用工具。它接受一个整数参数，表示要保留的小数位数，并返回一个字符串形式的结果。

示例代码

const num = 123.456;
console.log(num.toFixed(2)); // 输出 "123.46"（自动四舍五入）

关键点说明

  1. 返回值类型：toFixed() 的返回值是字符串，而非数值类型。例如，1.2.toFixed(2) 的结果是 "1.20"，而非 1.20。
  2. 四舍五入规则：该方法会自动执行四舍五入操作。例如，1.234.toFixed(2) 会得到 "1.23"，而 1.255.toFixed(2) 则会得到 "1.26"。
  3. 超出范围的处理：当小数位数超过参数指定的位数时，会按规则截断或舍入；若原始数字本身的小数位数不足，则补零。

形象比喻

可以将 toFixed() 想象为一个“格式化打印机”：它接收一个数字，按指定的小数位数“打印”出结果，但最终输出的是一张“纸”（字符串），而非原始的“数字”本身。

二、进阶技巧：其他方法与组合使用

虽然 toFixed() 是最直接的选择，但在某些场景下可能需要结合其他方法或技巧以实现更灵活的需求。

1. 使用 Math.round() 与乘除法

通过数学运算手动实现四舍五入，例如：

function roundToTwo(num) {
  return Math.round(num * 100) / 100;
}
console.log(roundToTwo(1.234)); // 输出 1.23
console.log(roundToTwo(1.255)); // 输出 1.26

此方法返回的是数值类型，但需注意：

  • 精度问题：当数值较大或运算复杂时，可能会因浮点数精度丢失导致结果偏差。例如，0.1 + 0.2 的实际计算结果为 0.30000000000000004，直接四舍五入可能导致意外结果。

2. 结合 Number() 转换

若希望保留数值类型，可在 toFixed() 后强制转换为数值：

const num = 123.456;
const formatted = Number(num.toFixed(2)); // 输出 123.46（数值类型）

3. 处理负数与特殊场景

当处理负数时，toFixed() 会保留符号并正确四舍五入：

console.log((-1.255).toFixed(2)); // 输出 "-1.26"

三、深入理解：浮点数精度问题与解决方案

JavaScript 中的数字以 IEEE 754 标准的双精度浮点数存储，这可能导致某些数值无法精确表示。例如：

console.log(0.1 + 0.2); // 输出 0.30000000000000004

这种精度问题在保留小数时可能引发错误。例如：

const num = 0.1 + 0.2; // 实际值为 0.30000000000000004
console.log(num.toFixed(2)); // 输出 "0.30"（看似正确）

但若原始数值本身存在精度偏差，可能导致后续计算错误。

解决方案：使用字符串或第三方库

  1. 字符串操作：在需要精确计算的场景（如财务系统），可将数值存储为字符串，通过字符串操作实现计算。
  2. 第三方库：如 decimal.js，它提供了高精度的十进制运算能力。
const Decimal = require('decimal.js');
const num = new Decimal(0.1).plus(new Decimal(0.2));
console.log(num.toFixed(2)); // 输出 "0.30"

四、常见问题与解决方案

1. toFixed() 返回字符串如何处理？

若需后续计算，可将其转换为数值：

const str = "123.45";  
const num = Number(str); // 转换为数值

2. 如何避免四舍五入？

若需截断而非四舍五入，可结合 Math.trunc() 或 Math.floor()：

function truncateToTwo(num) {
  return Math.trunc(num * 100) / 100;
}
console.log(truncateToTwo(1.255)); // 输出 1.25

3. 处理科学计数法

当数值非常大或小时，JavaScript 可能以科学计数法表示，此时 toFixed() 仍能正确处理：

const hugeNum = 1234567890123456789.123456;
console.log(hugeNum.toFixed(2)); // 输出 "1234567890123456789.12"

五、最佳实践与推荐方法

1. 推荐方案：结合 Number() 与 toFixed()

function formatNumber(num) {
  return Number(num.toFixed(2));
}

此方法兼顾了数值类型与格式化需求，适用于大多数场景。

2. 高精度场景：使用 decimal.js

在需要严格精确的场景（如金融系统），建议引入第三方库：

const Decimal = require('decimal.js');
const num = new Decimal("0.1").plus(new Decimal("0.2"));
console.log(num.toNumber()); // 输出 0.3

3. 根据需求选择方法

  • 基础场景：直接使用 toFixed()，并注意类型转换。
  • 高精度需求：使用 decimal.js 或其他精确计算库。
  • 性能敏感场景：优先使用原生方法，避免引入额外依赖。

六、实际案例：电商价格计算

假设需要计算商品总价，保留两位小数：

function calculateTotalPrice(quantity, pricePerUnit) {
  const total = quantity * pricePerUnit;
  return total.toFixed(2); // 返回字符串类型，如 "129.99"  
}

若需后续计算，可改为：

return Number((quantity * pricePerUnit).toFixed(2));

结论

在 JavaScript 中实现“保留两位小数”看似简单，但需结合具体场景选择合适的方法。从基础的 toFixed() 到进阶的高精度计算库，每种方案都有其适用场景。开发者需理解浮点数精度问题的本质，并根据需求平衡代码简洁性与计算精度。通过本文的讲解与案例，希望读者能够掌握这一技能，并在实际项目中避免常见陷阱。

关键词布局提示：本文通过“js 保留两位小数”这一核心问题，系统性地讲解了方法选择、陷阱规避及最佳实践，帮助开发者在不同场景下实现精准的数值格式化。

最新发布

查看更多文章