开发简易计算器点击=按钮触发Syntax error报错求助

你遇到的错误核心源于两个问题：变量名与JavaScript内置对象冲突，以及表达式字符串格式不合法，以下是具体排查和修复步骤：

1. 立即修复变量名冲突 #

String是JavaScript的内置构造函数，不能将它用作自定义变量名，这会直接触发语法错误。把代码里的String改成普通变量名，比如result：

// 错误写法
String = eval(string);
// 正确写法
const result = eval(yourExpressionVariable);

2. 校验表达式字符串的合法性 #

eval执行失败大多是因为输入的表达式不符合JavaScript语法，执行eval前需做以下校验：

• 移除首尾空白：expression = expression.trim();
• 禁止以运算符开头/结尾：用正则/^[+\-*/]|([+\-*/])$/匹配，若命中则提示用户输入错误
• 禁止连续运算符：比如++、*/这类，用正则/[+\-*/]{2,}/检测，匹配后可自动修正（如把++替换为+）或提示错误
• 替换全角符号：用户可能输入全角的＋、＝等，需替换为半角符号：

  expression = expression.replace(/[＋－×÷＝]/g, match => {
    const symbolMap = {'＋':'+', '－':'-', '×':'*', '÷':'/', '＝':'='};
    return symbolMap[match];
  });
  

3. 用try-catch捕获错误避免崩溃 #

即使做了校验，仍可能有意外情况，用try-catch包裹eval，捕获错误并友好提示：

try {
  const result = eval(expression);
  // 将结果显示到计算器界面
  document.getElementById('result').textContent = result;
} catch (error) {
  console.error('计算错误:', error);
  alert('输入的表达式无效，请检查格式');
}

完整示例代码 #

function handleCalculate() {
  const inputEl = document.getElementById('calc-input');
  let expression = inputEl.value.trim();

  // 格式校验
  if (/^[+\-*/]|([+\-*/])$/.test(expression)) {
    alert('表达式不能以运算符开头或结尾');
    return;
  }
  if (/[+\-*/]{2,}/.test(expression)) {
    alert('表达式包含连续运算符，请修正');
    return;
  }

  // 替换全角符号
  expression = expression.replace(/[＋－×÷＝]/g, match => {
    const symbolMap = {'＋':'+', '－':'-', '×':'*', '÷':'/', '＝':'='};
    return symbolMap[match];
  });

  // 执行计算
  try {
    const result = eval(expression);
    document.getElementById('calc-result').textContent = result;
  } catch (error) {
    alert('输入的表达式无效，请检查');
    console.error(error);
  }
}

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