本文详解如何为网页计算器的“=”按钮添加核心计算功能，通过事件监听、表达式解析与安全执行，实现加减乘除等基本运算，避免直接使用 eval 并兼顾健壮性与可维护性。
本文详解如何为网页计算器的“=”按钮添加核心计算功能，通过事件监听、表达式解析与安全执行，实现加减乘除等基本运算，避免直接使用 eval 并兼顾健壮性与可维护性。
要让计算器在用户点击“=”时真正完成数学运算，关键在于：分离输入收集与结果计算两个阶段——先累积用户输入的完整表达式（如 "5 + 3 * 2"），再在“=”触发时安全求值。原始代码中 switch 被错误地置于循环外部且未绑定事件上下文，同时直接拼接 DOM 文本节点而非更新输入框值，导致逻辑断裂。
以下是推荐实现方案的核心结构：
✅ 正确的事件处理与状态管理
使用 currentInput 字符串变量持续记录用户输入（如 "12 + 45 / 3"），所有按钮点击均更新该状态，并同步反映到 <input> 显示屏中：
let currentInput = "";
for (const btn of buttons) {
btn.addEventListener("click", (event) => {
const buttonText = event.target.innerText;
switch (buttonText) {
case "=":
const result = calculateResult(currentInput);
screen.value = result;
currentInput = String(result); // 重置为结果，支持连续计算
break;
case "+":
case "-":
case "*":
case "/":
currentInput += ` ${buttonText} `; // 运算符前后加空格，提升可读性与解析鲁棒性
screen.value = currentInput;
break;
default:
currentInput += buttonText;
screen.value = currentInput;
}
});
}
✅ 安全、高效的表达式求值
不推荐使用 eval()（存在 XSS 风险），而应采用 Function 构造函数配合严格模式，在沙箱环境中执行数学表达式：
function calculateResult(input) {
if (!input.trim()) return "0";
try {
// 严格模式 + 返回表达式结果
return Function(`'use strict'; return (${input})`)();
} catch (error) {
return "Error"; // 捕获语法错误、除零等异常
}
}
⚠️ 注意：此方法仅适用于受信的纯数字+运算符表达式。若需支持函数（如
sin,sqrt）或更复杂语法，建议集成 math.js 等专业库。
✅ HTML 与样式基础支撑
确保屏幕为 <input type="text" readonly> 而非 <div>，便于统一控制值与聚焦行为；按钮布局需语义清晰：<pre class="brush:php;toolbar:false;"><input type="text" id="screen" readonly><div>
<button>1</button><button>2</button><button>3</button><button>+</button><br><button>4</button><button>5</button><button>6</button><button>-</button><br><button>7</button><button>8</button><button>9</button><button>*</button><br><button>0</button><button>/</button><button>=</button>
</div></pre>
<h3>✅ 总结要点</h3>
<ul>
<li>✅ 使用单个 <code>currentInput 字符串管理整个表达式状态，避免碎片化拼接；
Function 解析成功率（如 "2+3" 和 "2 + 3" 均有效）；C（清空）、←（退格）、小数点支持、括号优先级等。该设计结构清晰、易于调试，是构建生产级简易计算器的坚实起点。
