JavaScript浮点数转整数特定值溢出问题求解（兼容小数输入）

问题描述 #

实现带文本输入框的表单功能时，需要接收用户输入内容转换为double类型用于发送POST请求，正常输入效果示例。
当前采用的交互逻辑：

• 输入框触发onChange事件时，将输入值val除以100转换为double类型存入Mobx可观察状态
• UI回显时将状态值乘以100后转换为字符串展示
  绝大多数数值可正常展示，但输入值为7时会出现精度溢出问题，异常显示为7.00000001；调试观测到存储值对应0.07和7时存在精度漂移，异常效果截图。

现有核心代码 #

<TextBox 
   value={getConvertedValue()}
   onChange={changeHandler}   
/>

function getConvertedValue() {
    return (MobxObservable * 100).toString; 
}

const changeHandler = (event: React.FormEvent, val: string) => {
   // 调用Mobx action更新store中的值
   setValue(Number(val)/100);
}

方案约束 #

• 禁止直接使用Math.round：会抹除小数位，导致用户无法输入1.25这类带两位小数的数值
• 禁止直接使用toFixed()：输入整数3时会被强制格式化展示为3.00，不符合交互预期
  尝试常规数值处理方法均未解决问题。

问题根因 #

该问题是JavaScript采用IEEE 754双精度浮点数存储规则导致的固有精度问题：部分十进制小数转换为二进制时为无限循环值，乘除计算过程中会出现末尾的精度漂移，比如0.07 * 100的实际计算结果不是7，而是接近7的7.000000000000001这类值。
另外现有代码存在一处笔误：getConvertedValue方法中toString未加执行括号，实际会返回函数对象而非字符串，需要修正。

可行实现方案 #

采用toPrecision做精度截断抹除漂移值，再转换为Number类型自动丢弃末尾无意义的0，既不会丢失两位小数的精度，也不会强制给整数补.00后缀，同时规避浮点数计算的漂移问题。
修正后的代码如下：

<TextBox 
   value={getConvertedValue()}
   onChange={changeHandler}   
/>

function getConvertedValue() {
    // 取12位有效精度抹除浮点数漂移，转Number后自动去除末尾无效0，再转字符串
    return Number((MobxObservable * 100).toPrecision(12)).toString();
}

const changeHandler = (_event: React.FormEvent, val: string) => {
   // 输入存入store时同步做精度修正，从存储层避免漂移值
   const inputNum = Number(val);
   // 空值/非合法数字按业务需求处理，这里示例直接存0
   if (isNaN(inputNum)) {
      setValue(0);
      return;
   }
   setValue(Number((inputNum / 100).toPrecision(12)));
}

方案验证效果 #

• 输入7：存储值为0.07，回显为"7"，不会出现7.00000001
• 输入3：存储值为0.03，回显为"3"，不会出现3.00
• 输入1.25：存储值为0.0125，回显为"1.25"，小数位完整保留

如果业务允许调整存储逻辑，更稳妥的方式是在store中直接存储用户输入的原始字符串值，需要发起POST请求时再做一次精确数值转换，从根源上避免来回乘除计算带来的精度损耗。 #

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