解决jQuery UI Spinner在制药厂配药系统中毫克级精度的剂量控制

jQuery UI Spinner是前端常见的数字微调组件，通过上下箭头或键盘输入即可调整数值，在后台管理、表单录入中应用广泛。但在制药厂配药系统中，剂量通常以克为单位，需要精确到毫克，即0.001克。如果直接使用Spinner的默认配置将step设置为0.001，用户点击多次后很可能看到输入框中出现0.30000000000000004这样的数值，这在药品剂量录入场景是完全不可接受的。问题根源不在Spinner本身，而在于JavaScript的二进制浮点数表示方式。本文将从浮点数精度陷阱入手，给出针对制药配药场景的可靠改造方案。

为什么jQuery UI Spinner会出现精度丢失

JavaScript中的数字统一采用IEEE 754双精度浮点数格式，整数部分超过2的53次方或者小数部分做除法运算时，都可能产生舍入误差。典型的例子如0.1 + 0.2的结果是0.30000000000000004，而不是0.3。Spinner在递增或递减时，内部会基于当前值加上或者减去step，然后调用parse方法把输入框中的字符串转为数字。如果某一步得到0.30000000000000004，这个值会被写回输入框，下一次再步进又在此基础上叠加，误差会像滚雪球一样越来越大。

Spinner的step选项支持浮点数，但底层只是简单的加法运算。即使设置了min、max和page等选项，也无法阻止浮点误差出现。例如配置为step=0.001，从0开始连续点击300次，理论上应该显示0.3，但实际很可能显示0.30000000000000004或者0.2999999999999999。对于普通表单这或许只是显示问题，但在配药系统中，药剂师需要根据显示的剂量精确称量，输入框里任何一个可疑的小数位都可能引发误操作，甚至造成医疗事故。

更隐蔽的是，Spinner的格式化方法format默认直接返回数字的字符串形式，不会对浮点误差做任何修正。而parse方法使用Number()转换，同样无法消除误差。因此要解决毫克级精度问题，必须从数值存储和转换策略上重新设计，而不是单纯调整step参数。

采用整数毫克的存储与换算策略

最稳妥的做法是抛弃浮点数直接参与步进运算，改为在内存中使用整数表示最小单位——毫克。例如剂量显示为“0.125克”，内部存储值就是125毫克。Spinner的step设为1毫克，每次点击增减1个单位。输入框里显示的是克数，需要在小数点后保留三位；而解析用户手动输入时，则把克数乘以1000得到毫克整数。这样做的好处是步进运算全部落在整数范围内，不会产生任何浮点误差。

实现上可以扩展Spinner的widget，覆盖parse和format方法。parse方法接收用户输入的字符串，先借助正则或toFixed处理掉非法格式，再把字符串解析为浮点数后乘以1000并取整。format方法则接收整数毫克的内部值，除以1000后使用toFixed(3)格式化为三位小数的克数显示。需要注意，除以1000后再toFixed仍然会经过浮点运算，但结果只用于展示，不会作为下次步进的基数，因此误差不会累积。

下面是完整的自定义Spinner代码示例，包含毫克与克的换算逻辑，以及正则校验输入格式：

(function($) {
    $.widget("custom.mgSpinner", $.ui.spinner, {
        options: {
            // 内部步进单位为毫克，step固定为1
            step: 1,
            // 外部显示单位为克，保留三位小数
            decimals: 3,
            // 每页步进值，例如10毫克
            page: 10
        },
        _parse: function(value) {
            if (typeof value === "string") {
                // 只允许数字、小数点、负号，最多三位小数
                if (!/^-?\d+(\.\d{1,3})?$/.test(value.trim())) {
                    return this.element.val() ? this._value() : 0;
                }
                // 转换为克数并乘以1000得到毫克，使用Math.round消除浮点误差
                var grams = parseFloat(value);
                return Math.round(grams * 1000);
            }
            return value;
        },
        _format: function(value) {
            // 输入为毫克数，转换为克并保留三位小数
            return (value / 1000).toFixed(this.options.decimals);
        },
        _value: function() {
            // 获取当前内部值（毫克）
            return this._super();
        }
    });
})(jQuery);

// 使用示例
$("#doseInput").mgSpinner({
    min: 0,       // 最小0毫克
    max: 10000,   // 最大10克，即10000毫克
    step: 1,      // 每次步进1毫克
    page: 10      // 按住加速时每次10毫克
});

上述代码中，_parse方法先用正则校验用户输入，只接受最多三位小数的数字，非法输入会保持原有值。解析成功后把克数乘以1000再取整，确保任何手动输入如0.125、0.126都会精确映射到125和126毫克。_format方法把内部整数值换算回克数，并用toFixed固定三位小数，保证显示一致。这样即使内部值因为用户输入被意外设置成浮点数，格式化输出也会自动规整。

需要注意的是，如果系统还需要支持微克甚至更小的单位，可以继续沿用整数最小单位策略，把内部单位设为微克或纳克，只需调整乘除倍数和正则中的小数位数。这种方案与单位转换的思路在金融、医疗、科学计算等领域都是通用做法。

使用decimal.js处理任意精度数值

如果项目需要同时处理克、毫克、微克等多种剂量单位之间的换算，或者要求计算过程完全无误差，可以引入decimal.js这类任意精度十进制库。decimal.js用字符串表示十进制数，所有运算都不会产生二进制浮点误差。Spinner的自定义widget可以结合decimal.js来实现parse和format，但需要注意性能开销和依赖包体积。

使用decimal.js时，内部仍然存储毫克整数最保险。不过也可以存储克数的字符串，用Decimal对象进行加减。下面给出一个使用decimal.js的format和parse实现示例：

// 需要先引入 decimal.js：https://cdn.jsdelivr.net/npm/decimal.js@10.4.3/decimal.min.js
(function($) {
    $.widget("custom.doseSpinner", $.ui.spinner, {
        options: {
            step: "0.001",
            min: "0",
            max: "10"
        },
        _parse: function(value) {
            if (typeof value === "string") {
                try {
                    var d = new Decimal(value);
                    if (d.isNaN() || d.isNegative() && this.options.min && d.lessThan(this.options.min)) {
                        return this._value();
                    }
                    return d.toFixed(3);
                } catch (e) {
                    return this._value();
                }
            }
            return value;
        },
        _format: function(value) {
            var d = new Decimal(value);
            return d.toFixed(3);
        },
        _value: function() {
            return new Decimal(this._super());
        }
    });
})(jQuery);

使用decimal.js时，Spinner的step也可以设置成字符串"0.001"，这样加减运算由decimal.js库处理，直接返回三位小数字符串，从根源上杜绝浮点误差。但这种方式下内部值会变成字符串，可能影响Spinner其它功能如min、max的比较，需要谨慎处理。对于大多数制药配药系统，整数毫克方案已经足够，并且不引入额外依赖，更容易维护和测试。

实际测试与精度验证方法

改造完成后必须经过严格的测试验证，确保在各种操作路径下都不会出现精度异常。测试用例要覆盖连续点击递增、连续点击递减、直接手动输入边界值、使用键盘上下键、以及从最小值直接跳到最大值等场景。对于每个操作，取输入框中显示的字符串，解析为数字后乘以1000，检查是否为整数且等于预期的毫克数。

可以编写一个简单的自动化测试函数，模拟用户点击Spinner的向上按钮一百次，每次点击后读取输入框的值并断言。下面给出一个基于jQuery的测试示例：

function testSpinnerPrecision(selector, expectedGrams) {
    var $spinner = $(selector);
    // 模拟点击向上按钮100次
    for (var i = 0; i < 100; i++) {
        $spinner.spinner("stepUp");
    }
    var displayValue = $spinner.val();
    var grams = parseFloat(displayValue);
    var milligrams = Math.round(grams * 1000);
    console.assert(milligrams === expectedGrams * 1000,
        "精度错误: 显示值=" + displayValue + " 期望毫克=" + (expectedGrams * 1000));
}
// 假定步进1毫克，100次后应为0.100克
testSpinnerPrecision("#doseInput", 0.1);

除了功能性测试，还要在真实浏览器环境中观察Spinner的渲染效果。不同浏览器对toFixed和parseFloat的实现基本一致，但仍建议在Chrome、Firefox、Edge以及可能使用的国产浏览器上都跑一遍。如果使用整数毫克方案，理论上不会出现跨浏览器差异，因为整数运算和toFixed的行为已经标准化。不过输入框的显示格式可能受CSS和本地化影响，需要确保小数点后始终保留三位，不要被浏览器自动去掉末尾零。

对于配药系统这类高风险场景，还应该加入人工复核环节：药剂师输入剂量后，系统应当以不可编辑的格式显示出换算后的毫克数，例如输入0.125克，旁边显示“等于125毫克”，避免用户对小数位数产生误解。前端精度只是整个防线的一环，后端存储建议同样以毫克为整数存入数据库，避免跨系统传输时的精度丢失。

jQuery UI Spinner毫克级精度剂量控制修改时间：2026-08-26 03:52:56