开发计算器时字符串转数字出现NaN问题的解决方法

问题根源 #

你的代码里有两个核心错误导致运算结果为NaN：

• 点击运算符后，错误地将包含运算符和空格的预览文本（比如"1 + "）赋值给了currentValue，后续输入数字时currentValue会变成"1 + 2"这类混合字符串，转数字时直接得到NaN。
• handleOp函数里用previousValue += currentValue做字符串拼接，多次点击运算符会让previousValue变成无效的数字字符串（比如连续点两次+，会变成"11"）。

修复步骤 #

1. 修正运算符点击逻辑 #

移除把预览文本赋值给currentValue的代码，点击运算符后清空currentValue，让用户能输入下一个数：

operationButtons.forEach((op) => {
  op.addEventListener("click", (e) => {
    handleOp(e.target.textContent);
    preview.textContent = previousValue + " " + operator + " ";
    // 删除错误的赋值语句，改为清空currentValue
    currentValue = "";
  });
});

2. 修正handleOp的赋值逻辑 #

每次点击运算符时，直接将当前数字赋值给previousValue，而非字符串拼接：

function handleOp(op) {
  operator = op;
  // 替换拼接为直接赋值
  previousValue = currentValue;
}

3. 增加运算前的有效性检查（推荐） #

在计算前先判断两个值是否为有效数字，避免无效运算：

function calculate() {
  const prevNum = Number(previousValue);
  const currNum = Number(currentValue);

  // 检查是否为有效数字
  if (isNaN(prevNum) || isNaN(currNum)) {
    console.log("输入无效，请检查数字");
    return;
  }

  let result;
  switch(operator) {
    case "+":
      result = prevNum + currNum;
      break;
    case "-":
      result = prevNum - currNum;
      break;
    case "X":
      result = prevNum * currNum;
      break;
    case "/":
      // 额外处理除数为0的情况
      result = currNum === 0 ? "错误" : prevNum / currNum;
      break;
    default:
      result = "无效运算符";
  }

  console.log(result);
  // 更新状态，支持连续运算
  previousValue = String(result);
  currentValue = "";
  preview.textContent = "";
  output.textContent = result;
}

补充说明 #

为什么typeof NaN返回number？这是JavaScript的特性：NaN（非数字）虽然表示无效数字，但它的类型确实属于number，判断一个值是否为NaN应该用isNaN()函数，而非typeof。

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