JavaScript中如何实现按小数步长递增的步进器函数？

问题根源 #

JavaScript的Number类型基于双精度浮点数存储，部分十进制小数（如0.1、0.0007）无法被二进制精确表示，直接进行浮点数运算会产生精度误差，导致出现0.35000000000000003这类不符合预期的结果。

精度修复方案 #

通过将小数运算转换为整数运算避免精度损失，核心是把value和step放大为整数后计算，再缩小回原比例：

// 计算将step转换为整数所需的放大倍数
function getMultiplier(step: number): number {
  // 处理科学计数法，转为无末尾零的小数字符串
  const stepStr = step.toFixed(20).replace(/0+$/, '').replace(/\.$/, '');
  return stepStr.includes('.') ? Math.pow(10, stepStr.split('.')[1].length) : 1;
}

function roundToFractionOfPercent(
  value: number,
  step: number,
): number {
  const multiplier = getMultiplier(step);
  // 转换为整数运算
  const valueInt = Math.round(value * multiplier);
  const stepInt = Math.round(step * multiplier);
  return Math.round(valueInt / stepInt) * stepInt / multiplier;
}

测试验证

roundToFractionOfPercent(0.0163, 0.01); // 0.02
roundToFractionOfPercent(0.35, 0.01); // 0.35（无精度误差）
roundToFractionOfPercent(0.12345678, 0.00000001); // 0.12345678
roundToFractionOfPercent(0.123456789, 0.0007); // 0.1233（精确对齐步长）

自定义步进器实现 #

基于整数运算逻辑，实现支持任意步长的自定义步进器，确保每次增减后的值都是step的精确倍数：

class CustomStepper {
  private currentValue: number;
  private readonly step: number;
  private readonly multiplier: number;

  constructor(initialValue: number, step: number) {
    this.step = step;
    this.multiplier = getMultiplier(step);
    // 初始化时自动对齐到步长倍数
    this.currentValue = roundToFractionOfPercent(initialValue, step);
  }

  // 增加一步
  increment(): number {
    const currentInt = Math.round(this.currentValue * this.multiplier);
    const stepInt = Math.round(this.step * this.multiplier);
    this.currentValue = (currentInt + stepInt) / this.multiplier;
    return this.currentValue;
  }

  // 减少一步
  decrement(): number {
    const currentInt = Math.round(this.currentValue * this.multiplier);
    const stepInt = Math.round(this.step * this.multiplier);
    this.currentValue = (currentInt - stepInt) / this.multiplier;
    return this.currentValue;
  }

  // 获取当前值
  getValue(): number {
    return this.currentValue;
  }

  // 设置新值并自动对齐步长
  setValue(value: number): number {
    this.currentValue = roundToFractionOfPercent(value, this.step);
    return this.currentValue;
  }
}

使用示例

const stepper = new CustomStepper(0.0163, 0.01);
stepper.getValue(); // 0.02
stepper.increment(); // 0.03
stepper.decrement(); // 0.02
stepper.setValue(0.35); // 0.35

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