成为计算器高手：JS原生实现计算器，非eval，附源码

前端

2023-05-16 15:23:58

使用 JS 原生打造功能强大的计算器：免除 eval，尽享流畅计算

在日常生活和工作中，计算器作为不可或缺的工具，在各种数学运算中发挥着至关重要的作用。如果您正在寻找一款可在浏览器中使用的计算器，那么 JS 原生无疑是一个绝佳的选择。

JS 原生计算器的强大功能

JS 原生计算器是一款功能丰富的工具，提供了一系列实用功能：

基础运算： 轻松应对加减乘除等基本运算。
括号运算： 通过括号轻松处理复杂表达式。
清空功能： 一键清除所有输入，方便快速更正。
清空末位： 针对性地清除最后一个输入字符，提升操作效率。
历史记录： 完整记录计算历史，方便回顾和检查。
字体切换： 根据个人喜好调整字体大小，优化视觉体验。
主题切换： 提供多样主题，满足不同用户的审美需求。

实现原理：栈的巧妙运用

JS 原生计算器巧妙地运用了栈这种数据结构来实现其强大的功能。栈遵循后进先出的原则，最新输入的元素最先被处理。在计算器中，栈被用来存储操作数（数字）和运算符（符号）。

当用户输入一个数字时，它会被压入操作数栈。当输入一个运算符时，它会被压入运算符栈。当按下“=”键时，计算器从运算符栈中弹出两个运算符，从操作数栈中弹出两个操作数，根据运算符进行计算，并将结果压入操作数栈。

如果表达式中包含括号，计算器会使用递归的方式处理括号内的子表达式。它会首先找到左括号和右括号的位置，提取括号内的子表达式，并再次调用自身计算子表达式的结果。

代码示例：实现计算器核心功能

// 操作数栈
const operandStack = [];

// 运算符栈
const operatorStack = [];

// 计算表达式
function calculateExpression(expression) {
  // 处理括号内的子表达式
  if (expression.includes("(")) {
    const leftIndex = expression.indexOf("(");
    const rightIndex = expression.indexOf(")");
    const subExpression = expression.substring(leftIndex + 1, rightIndex);
    const subResult = calculateExpression(subExpression);
    expression = expression.replace(`(${subExpression})`, subResult);
  }

  // 将表达式拆分为操作数和运算符
  const tokens = expression.split(/([+\-*/])+/);

  // 将操作数压入操作数栈
  for (const token of tokens) {
    if (!isNaN(token)) {
      operandStack.push(parseFloat(token));
    }
  }

  // 将运算符压入运算符栈
  for (const token of tokens) {
    if (isNaN(token)) {
      operatorStack.push(token);
    }
  }

  // 进行计算
  while (operatorStack.length > 0) {
    const operator = operatorStack.pop();
    const operand1 = operandStack.pop();
    const operand2 = operandStack.pop();
    let result;

    switch (operator) {
      case "+":
        result = operand1 + operand2;
        break;
      case "-":
        result = operand1 - operand2;
        break;
      case "*":
        result = operand1 * operand2;
        break;
      case "/":
        result = operand1 / operand2;
        break;
    }

    operandStack.push(result);
  }

  // 返回计算结果
  return operandStack[0];
}