JavaScript计算器输入半表达式切换运算符出现NaN怎么解决？

问题根源 #

• 运算符判断逻辑存在缺陷：只要检测到表达式内存在任意运算符就触发运算，但固定使用+分割字符串，若原有运算符不是+，分割后无法得到两个有效操作数，取值eval[1]为undefined，转浮点数后为NaN。
• 未判断半表达式场景：当输入为3+这类运算符后无数字的半表达式时，分割后的第二个元素为空字符串，parseFloat('')的返回值为NaN，直接参与运算就会输出NaN。
• 未实现运算符替换逻辑：你需要的「输入3+后按-直接替换为3-」的逻辑没有被处理，现有逻辑只会强制触发运算。
• 变量命名风险：你用了JS内置函数名eval作为变量名，容易引发未知异常，建议更换为operands这类自定义名称。

修复思路 #

调整运算符点击的处理逻辑，优先级如下：

1. 优先判断当前表达式最后一位是不是运算符，如果是，直接替换为本次点击的新运算符即可，不需要触发运算
2. 如果最后一位是数字，再判断是否存在已有运算符：
   • 存在：先计算已有表达式的结果，再将结果拼接新运算符
   • 不存在：直接拼接新运算符

代码示例（以加法按钮为例，其他运算符同理调整） #

plusButton.addEventListener("click", function(e){
  // 先判断最后一位是不是运算符
  const lastChar = display.value.slice(-1);
  const isLastOp = ['+', '-', '*', '/'].includes(lastChar);
  if (isLastOp) {
    // 直接替换最后一位的运算符为+
    display.value = display.value.slice(0, -1) + '+';
    return;
  }
  // 走到这里说明最后一位是数字，判断有没有运算符
  const hasOp = ['+', '-', '*', '/'].some(op => display.value.includes(op));
  if (hasOp) {
    // 提取实际存在的运算符做分割
    const op = display.value.match(/[+\-*/]/)[0];
    const operands = display.value.split(op);
    // 确保两个操作数都是合法数字
    const num1 = parseFloat(operands[0]);
    const num2 = parseFloat(operands[1]);
    if (!isNaN(num1) && !isNaN(num2)) {
      let result;
      switch(op) {
        case '+': result = num1 + num2; break;
        case '-': result = num1 - num2; break;
        case '*': result = num1 * num2; break;
        case '/': result = num2 === 0 ? 0 : num1 / num2; // 额外处理除零错误
      }
      display.value = result + '+';
    } else {
      // 操作数不合法的话直接拼接+
      display.value += '+';
    }
  } else {
    display.value += '+';
  }
});

额外优化建议 #

• 四个运算符的处理逻辑可以抽成公共函数，不需要每个按钮都写重复代码，传运算符作为参数即可
• 可以额外处理数字精度丢失的问题，优化使用体验

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