js 浮点运算及 toFixed 的问题

似乎所有的语言都存在浮点运算的问题,javascript 也不例外,与 java 等后台语言不同,javascript 长久以来缺少足够的API及生态去解决这样的问题。前端只负责展示,不负责计算,一直以来是前后端的共识,但前端也不可能完全规避计算数值的情况。

一 问题起因

数字最终会被计算机转成二进制,以二进制的形式进行运算。

vbscript 复制代码
0.1的二进制值如下:
0.1.toString(2) // "0.0001100110011001100110011001100110011001100110011001101"

因为位数太长,计算机存储二进制的数值时会有部分丢失,再转成十进制时产生误差。

二 消除误差的加法

javascript 复制代码
function add(val,val2){
    if(typeof(val) !== 'number' || isNaN(val) ) return NaN;
    if(typeof(val2) !== 'number' || isNaN(val2) ) return NaN;

    var presicion1, presicion2, maxPresicion;
    presicion1 = val.toString().split(".")[1]?.length ? val.toString().split(".")[1].length : 0;
    presicion2 = val2.toString().split(".")[1]?.length ? val2.toString().split(".")[1].length : 0;

    maxPresicion = Math.pow(10,Math.max(presicion1, presicion2));

    return (val * maxPresicion + val2 * maxPresicion) / maxPresicion;
}

这个方法消除了浮点误差,没有做精度上的处理。 js 的精度控制普遍用 toFixed() ,但是 toFixed 方法本身存在问题,一般说是"四舍六入五成双",但是不同浏览器下呈现的效果又五花八门,如果从事金融行业,数值以百万或亿为单位,这样弄错一个小数点的代价将十分昂贵。

三 改写toFixed

javascript 复制代码
/**
 * Number.prototype.toFixed 原生方法取精度是 "四舍六入五成双"的原则,但是即便这样也很不准确,在不同浏览器下呈现不同的表现方式,混乱至极。
 * 下面方面四舍五入取精度
 */
function roundToFixed (number, precision) { 
    let numStr = number.toString(); 
    if (!precision) precision=0; 
    if (numStr.indexOf(".") === -1)  numStr =`${numStr}.${new Array(precision+1).join("0")}`;

    // 包含以正负号开头的情况,举例:123.4567
    if(new RegExp(`^(-|\\+)?(\\d+(\\.\\d{0,${precision + 1}})?)\\d*$`).test(numStr)) {
        const sign = RegExp.$1; // (-|\\+) 正负号
        let numStrReg = `0${RegExp.$2}`; // 0123.4567
        let afterDotLength = RegExp.$3.length; // .4567; 包含.在内 length = 5
        let flag = true; // 0123.4567 => 0的位置是否需要替换

        if ( afterDotLength === precision + 2 ) {
            const numStrArr = numStrReg.match(/\d/g); // numStrReg分成的数组 ['0', '1', '2', '3', '4', '5', '6', '7']
            // 如果最后一位数字大于4,进1
            if (parseInt(numStrArr[numStrArr.length - 1]) > 4) {
                for (let i = numStrArr.length-2; i >= 0; i -= 1) {
                    numStrArr[i] = parseInt(numStrArr[i]) + 1;
                    // 等于10时继续遍历,否则直接跳出
                    if (numStrArr[i] === 10) {
                        numStrArr[i] = 0;
                        flag = i !== 1;
                    } else {
                        break;
                    }
                }
            }
            numStrReg = numStrArr.join("").replace(new RegExp(`(\\d+)(\\d{${ precision }})\\d$`), "$1.$2"); // 0123.4567
        }
        if (flag) numStrReg = numStrReg.substr(1); // 123.4567
        return (sign + numStrReg).replace(/\.$/, ""); // 以.结尾的情况
    }
    return number;
};
相关推荐
浩男孩3 分钟前
🍀终于向常量组件下手了,使用TypeScript 基于 TDesign二次封装常量组件 🚀🚀
前端·vue.js
玲小珑5 分钟前
LangChain.js 完全开发手册(十三)AI Agent 生态系统与工具集成
前端·langchain·ai编程
Damon小智8 分钟前
从零开始XR开发:Three.js实现交互式3D积木搭建器
javascript·3d·xr
布列瑟农的星空16 分钟前
什么?sessionStorage可以跨页签?
前端
苏打水com16 分钟前
网易前端业务:内容生态与游戏场景下的「沉浸式体验」与「性能优化」实践
前端·游戏·性能优化
恋猫de小郭18 分钟前
React 和 React Native 不再直接归属 Meta,React 基金会成立
android·前端·ios
掘金安东尼23 分钟前
前端周刊434期(2025年9月29日–10月5日)
前端·javascript·面试
brzhang28 分钟前
当我第一次看到 snapDOM,我想:这玩意儿终于能解决网页「截图」这破事了?
前端·后端·架构
掘金安东尼33 分钟前
前端周刊433期(2025年9月22日–9月28日)
前端·javascript·github
井柏然36 分钟前
为什么打 npm 包时要将 Vue/React 进行 external 处理?
javascript·vite·前端工程化