如何防止小数点后零自动丢失？React+MUI金额显示问题

安全阿岳

2026-8-1

如何让价格显示为$125.00而非$125？

问题出在直接将数字拼接为字符串时，JavaScript会自动省略末尾无意义的小数位（比如125.0转字符串会变成"125"）。以下是两种有效解决方法：

方法一：使用`toFixed(2)`格式化小数位

toFixed(2)会将数字转换为保留两位小数的字符串，正好满足需求：

import { Typography } from "@mui/material";

function ProductPrize({}) {
  const presentPrize = 125.0;
  return (
    <Typography variant="h4" sx={{ fontWeight: "bold" }}>
      {`$${presentPrize.toFixed(2)}`}
    </Typography>
  );
}

export default ProductPrize;

方法二：使用`Intl.NumberFormat`实现标准化货币格式

如果需要更规范的货币显示（支持多语言、地区格式），推荐用浏览器原生的国际化API，它会自动处理货币符号和小数位：

import { Typography } from "@mui/material";

function ProductPrize({}) {
  const presentPrize = 125.0;
  const formattedPrice = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(presentPrize);
  
  return (
    <Typography variant="h4" sx={{ fontWeight: "bold" }}>
      {formattedPrice}
    </Typography>
  );
}

export default ProductPrize;