ReactJs中将字符串转换为浮点数时如何保留原有小数位

JavaScript 中的数值类型（Number）本身不会存储无意义的末尾零，15 和 15.00 在数值层面是完全等价的，因此 parseFloat('15.00') 返回的结果必然是数值 15，这是 JS 语法的固有特性，无法直接修改。

根据你的实际使用场景选择对应方案即可：

• 场景1：仅需要在页面渲染时展示两位小数，数值本身用于计算/存储
  直接存储 parseFloat 转换后的数值即可，渲染时调用 toFixed(2) 处理展示格式，示例代码：

  // 存储时
  const price = parseFloat(get(product, 'price_range.minimum_price.final_price.value', '') || 0)
  // 渲染时
  <span>¥{price.toFixed(2)}</span>
  

  toFixed(2) 会自动补全两位小数，返回的是符合展示要求的字符串，计算时使用原始数值即可，不会出现精度问题。
• 场景2：需要存储的结果本身就保留两位小数格式
  JS 没有自带保留末尾零的数值类型，这种情况直接存储格式化后的字符串即可，后续需要计算时再临时转换为数值：

  const rawPrice = get(product, 'price_range.minimum_price.final_price.value', '')
  const price = rawPrice ? Number(rawPrice).toFixed(2) : '0.00'
  // 计算时转换为数值
  const calcResult = parseFloat(price) * 10
  

如果涉及高频的金额计算，不建议直接使用浮点数运算，避免出现 0.1 + 0.2 !== 0.3 这类精度问题，推荐两种处理方式：

• 将金额转换为以分为单位的整数存储计算，展示时再除以100格式化
• 引入专门的高精度计算库处理金额运算

内容的提问来源于stack exchange，提问作者user16468845