简单计算器JavaScript实现教程

本文深入探讨了如何安全、健壮地实现一个JavaScript简易计算器，重点避开危险的eval()方案，推荐采用“操作符优先级+双栈法”解析数学表达式：通过正则清洗与归一化符号、token化分词、双栈协同处理运算优先级和括号嵌套，并巧妙识别一元负号；同时强调实时输入校验、防XSS显示策略（如使用textContent）、特殊按键响应逻辑及关键的错误恢复机制——让计算器不仅算得对，更用得稳、体验佳。

直接用 eval() 解析表达式最省事，但不安全；手写解析器又太重。实际项目里推荐用「操作符优先级 + 栈」方式处理输入和计算逻辑，兼顾可控性与健壮性。

如何安全地解析用户输入的数学表达式？

用户可能输 "1+2*3"、"(4+5)/3"，甚至带空格或负数。不能直接丢给 eval() —— 它会执行任意代码，比如 "alert(1)" 也能跑。

• 先用正则清洗：去掉多余空格，把 "--"、"+-" 等归一化为单个操作符
• 再用「双栈法」：一个存数字，一个存操作符，按优先级决定何时计算（例如 "+" 和 "-" 优先级低于 "*" 和 "/"）
• 遇到左括号 "(" 就压栈，遇到右括号 ")" 就持续计算直到弹出对应左括号
• 负数要特殊处理：如果减号出现在开头或左括号后，视为一元负号，不是二元减法

为什么不用 parseFloat() 直接转数字？

parseFloat("1+2*3") 会返回 1，完全忽略后面；parseInt("2.5") 又会截断成 2。它们只适合提取字符串开头的数值，不适合计算器场景。

• 真正需要的是「识别整个合法子表达式」，比如从 "12.5+3.7*2" 中切出 "12.5"、"3.7"、"2"
• 建议用正则 /-?\d+\.?\d*/g 提取所有候选数字，再配合上下文判断是否属于数值（比如前面是 "+" 或 "("）
• 更稳妥的做法是边扫描边构建 token：数字、操作符、括号各自成类，避免歧义

如何响应按键并更新显示？

监听 click 和 keydown 即可，但要注意退格（Backspace）、清空（Escape）、回车（Enter）这些特殊键。

• 用 dataset 属性区分按钮类型：data-type="number"、data-type="operator"、data-type="equals"
• 显示区域用 textContent 而非 innerHTML，防止 XSS（比如用户输入 ""）
• 输入过程中实时校验：如果末尾是操作符，禁止再输入操作符；如果已有小数点，同一数字内不再加第二个
• 按下 Enter 应等价于点击 =，但需调用相同计算函数，别重复写逻辑

最易被忽略的是错误恢复：比如用户连按 "1++2"，解析失败后不能卡死，要清空或回退到上一个合法状态——这比算对结果还影响体验。

到这里，我们也就讲完了《简单计算器JavaScript实现教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！