当前位置:首页 > JavaScript

js实现四则运算

2026-04-04 12:30:47JavaScript

使用 eval 快速实现

通过 eval 直接解析字符串表达式,但需注意安全性风险(避免用户输入恶意代码)。

js实现四则运算

const expression = "2 + 3 * 4";
const result = eval(expression);
console.log(result); // 输出 14

安全解析:Function 构造函数

利用 Function 构造函数限制执行环境,比 eval 更安全。

js实现四则运算

const calculate = (expr) => new Function(`return ${expr}`)();
console.log(calculate("10 / 2 + 1")); // 输出 6

手动解析实现

通过栈或递归下降法实现表达式解析,避免依赖 eval

function parseExpression(expr) {
  const tokens = expr.match(/(\d+|\+|\-|\*|\/|\(|\))/g);
  let index = 0;

  const parseValue = () => {
    if (tokens[index] === "(") {
      index++;
      const value = parseAddSub();
      index++;
      return value;
    }
    return parseFloat(tokens[index++]);
  };

  const parseMulDiv = () => {
    let left = parseValue();
    while (index < tokens.length && ["*", "/"].includes(tokens[index])) {
      const op = tokens[index++];
      const right = parseValue();
      left = op === "*" ? left * right : left / right;
    }
    return left;
  };

  const parseAddSub = () => {
    let left = parseMulDiv();
    while (index < tokens.length && ["+", "-"].includes(tokens[index])) {
      const op = tokens[index++];
      const right = parseMulDiv();
      left = op === "+" ? left + right : left - right;
    }
    return left;
  };

  return parseAddSub();
}

console.log(parseExpression("3 + 5 * (2 - 1)")); // 输出 8

使用第三方库

引入 mathjs 等库处理复杂表达式,支持更丰富的数学功能。

import { evaluate } from "mathjs";
console.log(evaluate("2 ^ (3 + 1)")); // 输出 16

注意事项

  • 避免直接使用 eval 处理用户输入,防止代码注入。
  • 手动解析需处理运算符优先级(乘除优先于加减)和括号嵌套。
  • 复杂需求(如变量、函数)建议使用专业库如 mathjsexpr-eval

标签: js
分享给朋友:

相关文章

js 进度条的实现

js 进度条的实现

使用 HTML 和 CSS 创建基础进度条 HTML 结构可以简单使用一个 div 元素作为容器,内部嵌套另一个 div 表示进度: <div class="progress-containe…

js实现dh

js实现dh

JavaScript 实现 DH(Diffie-Hellman)密钥交换 Diffie-Hellman(DH)密钥交换是一种安全协议,允许双方在不安全的通信信道上建立一个共享密钥。以下是如何在 Jav…

js实现选题

js实现选题

实现选题功能的JavaScript方法 基础实现方案 使用数组存储选项,通过随机索引选取: const options = ['选项A', '选项B', '选项C', '选项D']; const r…

js实现vue路由

js实现vue路由

Vue 路由的基本实现 在 Vue.js 中实现路由功能通常使用 Vue Router 库。Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用(SPA)。 安装 Vue R…

js实现图片

js实现图片

图片加载与显示 在JavaScript中,可以通过Image对象动态加载图片。创建实例后设置src属性触发加载,通过onload回调处理加载完成后的操作: const img = new Ima…

js实现下拉菜单

js实现下拉菜单

使用HTML和CSS创建基础结构 HTML部分需要包含一个触发下拉的按钮和隐藏的下拉菜单内容: <div class="dropdown"> <button class="dr…