3天搞定科学计算器在线应用，从报错到上线的实战项目避坑指南

刚把网上的代码复制下来，双击运行，控制台直接炸出一串红字。Uncaught SyntaxError、ReferenceError，或者页面白屏一片，这种“复制来的代码跑不通不知道怎么调”的绝望感，谁懂？很多人以为只要把逻辑抄过来就能用，结果卡在环境配置、依赖版本或者浏览器兼容上，半天没头绪。今天咱们不聊虚的，直接上手一个实战项目：从零搭建一个功能完整、可交互的科学计算器在线应用。

这不是那种只能算加减乘除的玩具，而是包含三角函数、对数、指数运算，且能处理复杂表达式优先级的专业级Web应用。咱们目标很明确：解决“跑不通”的问题，讲透“为什么这么写”，最后让你能独立维护并扩展它。

项目目标与功能拆解

在动手写代码前，先搞清楚我们要造个啥。很多新手喜欢上来就写 function calculate()，结果写到一半发现逻辑打架。

我们要实现的科学计算器在线应用具备以下核心能力：

1. 基础四则运算：加、减、乘、除，支持小数点。
2. 科学函数支持：sin、cos、tan（弧度制）、log（以10为底）、ln（自然对数）、sqrt（平方根）、x^2（平方）、x^y（幂运算）。
3. 表达式解析引擎：不能简单地用 eval()（那是安全漏洞重灾区），需要自己写解析器，处理运算优先级（如 2 + 3 * 4 必须先算乘法）。
4. UI交互体验：键盘输入支持、历史计算记录、错误友好提示（比如除以零、定义域错误）。

为什么不用 eval()？ 这是面试高频坑。eval() 会执行任意字符串，如果用户输入 alert(document.cookie)，你的计算器直接泄露Cookie。在实战项目中，安全性是底线。我们要用“词法分析 + 语法分析”的思路，把字符串转成树状结构再求值。

目录结构规划

好的工程化习惯，从目录结构开始。别把所有东西塞进一个 index.html。以下是推荐的项目骨架：

scientific-calculator/
├── index.html          # 入口文件，承载UI结构
├── styles.css          # 样式，负责布局与响应式
├── main.js             # 入口JS，初始化应用
├── engine/
│   ├── tokenizer.js    # 词法分析：把字符串切成Token
│   ├── parser.js       # 语法分析：把Token生成AST（抽象语法树）
│   └── evaluator.js    # 求值器：遍历AST计算结果
└── utils/└── math.js         # 数学函数封装，处理精度与边界

重点讲解 engine 文件夹： 这是整个科学计算器在线应用的大脑。我们将复杂的表达式处理拆分为三个独立模块，遵循“单一职责原则”。

• Tokenizer：负责识别数字、运算符、括号、函数名。
• Parser：负责构建 AST。AST（Abstract Syntax Tree）是理解表达式结构的关键。例如 1 + 2 的AST是 { type: 'binary', op: '+', left: { type: 'number', value: 1 }, right: { type: 'number', value: 2 } }。
• Evaluator：递归遍历 AST，调用 math.js 中的函数得到最终数值。

这种分层架构，让你调试时能精准定位问题：是切词切错了？还是树建歪了？或者是计算时出错了？

核心代码实现与逐行讲解

1. 词法分析 (Tokenizer)

这是解决“跑不通”的第一步。很多代码报错是因为没处理好空格或非法字符。

// engine/tokenizer.js
export function tokenize(input) {const tokens = [];let i = 0;while (i < input.length) {// 跳过空格if (input[i] === ' ') {i++;continue;}// 处理数字（包括小数）if (isDigit(input[i]) || input[i] === '.') {let num = '';while (i < input.length && (isDigit(input[i]) || input[i] === '.')) {num += input[i];i++;}// 校验：一个数字只能有一个小数点if ((num.match(/\./g) || []).length > 1) {throw new Error("Invalid number format");}tokens.push({ type: 'number', value: parseFloat(num) });} // 处理运算符else if (isOperator(input[i])) {// 支持一元负号，这里简化处理，实际项目中需区分正负if (input[i] === '-' && (tokens.length === 0 || tokens[tokens.length-1].type === 'operator' || tokens[tokens.length-1].type === 'left-paren')) {// 如果前面是开头、运算符或左括号，视为负号tokens.push({ type: 'operator', value: 'neg' });i++;} else {tokens.push({ type: 'operator', value: input[i] });i++;}} // 处理括号else if (input[i] === '(') {tokens.push({ type: 'left-paren' });i++;} else if (input[i] === ')') {tokens.push({ type: 'right-paren' });i++;} // 处理科学函数else if (isAlpha(input[i])) {let func = '';while (i < input.length && isAlpha(input[i])) {func += input[i];i++;}// 必须紧跟左括号if (input[i] !== '(') {throw new Error("Function must be followed by '('");}if (!['sin', 'cos', 'tan', 'log', 'ln', 'sqrt'].includes(func)) {throw new Error("Unknown function: " + func);}tokens.push({ type: 'function', value: func });i++; // 跳过 '('} else {throw new Error("Invalid character: " + input[i]);}}return tokens;
}function isDigit(char) { return char >= '0' && char <= '9'; }
function isAlpha(char) { return (char >= 'a' && char <= 'z') || (char >= 'A' && char <= 'Z'); }
function isOperator(char) { return ['+', '-', '*', '/', '^'].includes(char); }

避坑点：注意负号的处理。在 2 - 3 中，- 是二元运算符；但在 -3 中，- 是一元运算符。如果不区分，解析器会崩溃。这里通过检查前一个Token的类型来判断。

2. 语法分析与AST构建 (Parser)

这是最复杂的部分。我们采用递归下降解析法。

// engine/parser.js
export function parse(tokens) {let pos = 0;function peek() { return tokens[pos]; }function consume() { return tokens[pos++]; }// 解析表达式，处理加减（最低优先级）function parseExpression() {let left = parseTerm();while (peek() && peek().type === 'operator' && (peek().value === '+' || peek().value === '-')) {const op = consume().value;const right = parseTerm();left = { type: 'binary', op, left, right };}return left;}// 解析项，处理乘除和幂（高优先级）function parseTerm() {let left = parseFactor();while (peek() && peek().type === 'operator' && (peek().value === '*' || peek().value === '/' || peek().value === '^')) {const op = consume().value;// 幂运算是右结合的，例如 2^3^2 = 2^(3^2)if (op === '^') {const right = parseFactor(); // 注意这里调用parseFactor而不是parseTerm，为了右结合left = { type: 'binary', op, left, right };} else {const right = parseFactor();left = { type: 'binary', op, left, right };}}return left;}// 解析因子，处理函数、括号、数字、一元负号function parseFactor() {const token = peek();if (!token) throw new Error("Unexpected end of input");// 一元负号if (token.type === 'operator' && token.value === 'neg') {consume();const expr = parseFactor();return { type: 'unary', op: 'neg', operand: expr };}// 函数调用if (token.type === 'function') {consume(); // 跳过函数名const expr = parseExpression(); // 递归解析括号内的表达式if (peek() && peek().type === 'right-paren') {consume(); // 跳过右括号return { type: 'function', name: token.value, args: [expr] };} else {throw new Error("Expected ')' after function argument");}}// 括号if (token.type === 'left-paren') {consume();const expr = parseExpression();if (peek() && peek().type === 'right-paren') {consume();return expr;} else {throw new Error("Expected ')'");}}// 数字if (token.type === 'number') {consume();return { type: 'number', value: token.value };}throw new Error("Unexpected token: " + JSON.stringify(token));}const ast = parseExpression();if (pos < tokens.length) {throw new Error("Unexpected token: " + JSON.stringify(peek()));}return ast;
}

关键点：优先级的实现依赖于函数调用层级。parseExpression 调用 parseTerm，parseTerm 调用 parseFactor。层级越深，优先级越高。这就是为什么 1 + 2 * 3 会先算 2 * 3。

3. 求值器 (Evaluator)

有了AST，计算就简单了，只是递归遍历。

// engine/evaluator.js
import { calcSin, calcCos, calcTan, calcLog, calcLn, calcSqrt } from '../utils/math.js';export function evaluate(ast) {switch (ast.type) {case 'number':return ast.value;case 'unary':if (ast.op === 'neg') {return -evaluate(ast.operand);}break;case 'binary':const left = evaluate(ast.left);const right = evaluate(ast.right);switch (ast.op) {case '+': return left + right;case '-': return left - right;case '*': return left * right;case '/': if (right === 0) throw new Error("Division by zero");return left / right;case '^': // 处理复杂幂运算，如 0.5 ^ 0.5return Math.pow(left, right);}break;case 'function':const arg = evaluate(ast.args[0]);switch (ast.name) {case 'sin': return calcSin(arg);case 'cos': return calcCos(arg);case 'tan': return calcTan(arg);case 'log': return calcLog(arg);case 'ln': return calcLn(arg);case 'sqrt': return calcSqrt(arg);}break;}throw new Error("Unknown AST node type");
}

注意：在 binary 的除法中，我们显式检查了除数为零的情况。这在实战项目中至关重要，否则用户看到 Infinity 或 NaN 会以为程序坏了。

运行与测试策略

代码写完了，怎么证明它是对的？别只测 1+1=2。

1. 单元测试 (Jest/Vitest)：

   • 测试 Tokenizer：输入 1 + 2 ，应得到 [{type:'number', value:1}, {type:'operator', value:'+'}, {type:'number', value:2}]。
   • 测试 Parser：输入 1 + 2 * 3，AST结构必须是 1 + (2 * 3)，而不是 (1 + 2) * 3。
   • 测试 Evaluator：sin(0) 应为 0，log(100) 应为 2。

2. 边界情况测试：

   • 空输入：应抛出友好错误，而不是崩溃。
   • 未闭合括号：1 + (2，应报错“Expected ')'”。
   • 非法字符：1 + a，应报错“Invalid character”。
   • 精度问题：0.1 + 0.2 在JS中是 0.30000000000000004。在UI层，建议对结果进行 toFixed(10) 或自定义格式化，去除末尾多余的0，提升用户体验。

3. 浏览器控制台调试技巧： 如果在Chrome DevTools中调试，可以在 evaluator.js 的 switch 语句后加 console.log('Evaluating:', ast, 'Result:', result)。这样你能看到每一步的计算过程，快速定位是哪个子树算错了。

优化扩展与工程化细节

为了让这个科学计算器在线应用更像一个产品，我们还需要做以下优化：

1. 输入防抖与校验： 用户可能快速点击按钮。在 main.js 中，绑定键盘事件和点击事件时，加入防抖（Debounce）逻辑，防止重复提交。同时，限制输入长度，防止恶意构造超长字符串导致栈溢出。

2. 历史记录的持久化： 使用 localStorage 保存最近20条计算历史。每次计算成功后，将 { input: '1+1', result: '2', timestamp: Date.now() } 存入数组。注意 JSON.stringify 处理对象，读取时 JSON.parse。

3. 响应式设计： 在 styles.css 中，使用 Flexbox 或 Grid 布局。在小屏幕上，按钮自动换行；在大屏幕上，按钮均匀分布。使用 clamp() 函数调整字体大小，确保在不同设备上都清晰可读。

4. 国际化 (i18n) 准备： 虽然目前只支持中文，但错误提示（如“除以零”）应提取到独立的 messages.json 文件中。这样未来若要支持英文，只需替换语言包，无需修改核心逻辑。

5. 性能优化： 对于简单的数字输入，无需每次都走完整的 Tokenize-Parser-Evaluator 流程。可以做一个简单的缓存：如果输入是纯数字，直接显示。只有包含运算符或函数时，才启动解析引擎。

官方文档参考： 在处理数学精度和浮点数问题时，建议查阅 MDN Web Docs 中关于 Number 和 Math 对象的章节。特别是 Math.pow 的行为以及浮点数比较的陷阱（推荐使用 epsilon 比较法，如 Math.abs(a - b) < 1e-9），这能避免很多难以察觉的Bug。

小结与互动

通过这个实战项目，我们不仅搭建了一个可用的科学计算器在线应用，更重要的是掌握了一套处理复杂文本输入的工程化思维：分词 -> 解析 -> 求值。这套逻辑不仅适用于计算器，还广泛应用于编译器原理、JSON解析、甚至简单的规则引擎。

很多新手卡在“代码跑不通”，往往是因为缺乏调试手段和分层思维。当你把一个大问题拆解成三个小模块，每个模块独立测试、独立调试，问题就会变得可控。

现在，回到代码本身。在 parser.js 中，我们处理了幂运算的右结合性。但在某些科学计算场景下，用户可能期望 2^3^2 是 (2^3)^2（左结合），虽然数学标准是右结合。

你更常用哪种写法？左结合还是右结合？或者你有其他处理优先级冲突的绝招？评论区交流。