JavaScript中eval()返回值、错误排查及try-catch无效问题咨询

嗨，我来帮你一步步解决这个计算器的问题：

一、先搞懂eval()的返回值 #

eval()的行为其实很明确：

• 如果传入的是合法的JavaScript表达式，它会执行这个表达式，然后返回计算结果。比如eval("3+5*2")会返回13，eval("Math.sqrt(16)")返回4。
• 如果传入的内容有语法错误（比如你输入的***/+6），它会直接抛出SyntaxError类型的异常。
• 如果表达式语法合法，但运行时出现错误（比如引用未定义变量、或者计算10/0得到Infinity，不过后者不会抛错），会抛出对应的运行时异常（比如ReferenceError）。

二、你的try-catch没生效的核心原因 #

看你贴的代码片段，问题出在你把eval的调用放在了try块外面！比如你原来的代码大概是这样：

function res() { 
  var r=eval(document.getElementById("_input").textContent); 
  try{ 
    eval(document.getElementById("_input").textContent);
    // ... 其他代码
  } catch(e) {
    // 错误处理逻辑
  }
}

当输入***/+6这种语法错误的表达式时，第一行的eval就已经抛出异常了，这时候代码还没进入try块，catch根本捕获不到这个错误！

正确的写法是把eval的调用完全包裹在try块内部：

function res() { 
  const inputText = document.getElementById("_input").textContent;
  try{ 
    const result = eval(inputText);
    // 这里处理正常结果，比如显示到界面
    document.getElementById("_result").textContent = result;
  } catch(error) {
    // 捕获到错误后显示提示
    document.getElementById("_result").textContent = "输入格式错误，请检查！";
    // 也可以在控制台打印错误详情，方便调试
    console.error("计算出错：", error);
  }
}

三、排查并修复输入问题的实用方案 #

只靠try-catch是被动补救，最好在用户输入阶段就做前置校验，从源头避免无效表达式：

1. 禁止连续输入多个运算符 #

比如用户点击+之后又点*，或者输入***/这种连续运算符，我们可以在添加运算符时做判断：

// 假设这是点击运算符按钮的处理函数
function appendOperator(op) {
  const inputElement = document.getElementById("_input");
  const currentText = inputElement.textContent;
  const lastChar = currentText.slice(-1);
  // 定义所有允许的运算符
  const validOperators = ['+', '-', '*', '/', '**'];
  
  // 如果最后一个字符已经是运算符，就替换成当前点击的运算符，而不是追加
  if (validOperators.includes(lastChar)) {
    inputElement.textContent = currentText.slice(0, -1) + op;
    return;
  }
  // 否则正常追加运算符
  inputElement.textContent += op;
}

2. 禁止表达式以运算符开头或结尾 #

在点击“=”计算前，先做一次基础校验：

function res() { 
  const inputText = document.getElementById("_input").textContent.trim();
  const validOperators = ['+', '-', '*', '/', '**'];
  
  // 检查开头或结尾是否是运算符
  if (validOperators.includes(inputText[0]) || validOperators.includes(inputText.slice(-1))) {
    document.getElementById("_result").textContent = "输入格式错误！";
    return;
  }
  
  // 再执行try-catch的计算逻辑
  try{ 
    const result = eval(inputText);
    // 处理特殊情况：比如除以0得到Infinity
    if (!isFinite(result)) {
      document.getElementById("_result").textContent = "无效计算（请勿除以0）";
    } else {
      document.getElementById("_result").textContent = result;
    }
  } catch(error) {
    document.getElementById("_result").textContent = "输入格式错误，请检查！";
    console.error("计算出错：", error);
  }
}

3. 额外提示：eval的安全风险 #

虽然你现在是做计算器，但要知道eval()会执行任何传入的JavaScript代码，存在安全风险（如果用户输入恶意代码的话）。如果要更安全，可以考虑用表达式解析库，或者自己实现简单的四则运算解析，不过对于小型计算器来说，做好输入校验的话，eval()也可以用。

内容的提问来源于stack exchange，提问作者Āth Mānē