当前位置:首页 > JavaScript

js实现四则运算

2026-03-01 11:45:51JavaScript

实现四则运算的基本方法

在JavaScript中实现四则运算可以通过多种方式完成,包括直接使用运算符、eval函数或解析表达式。以下是几种常见的方法:

直接使用运算符

JavaScript原生支持加减乘除运算符,可以直接使用:

const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
const multiply = (a, b) => a * b;
const divide = (a, b) => a / b;

使用eval函数

eval可以解析字符串形式的表达式,但存在安全风险,需谨慎使用:

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

安全解析表达式的方法

为避免eval的安全问题,可以手动解析表达式。以下是一个简单的实现思路:

js实现四则运算

构建词法分析器

将输入字符串拆分为数字和运算符:

function tokenize(expression) {
    return expression.match(/(\d+|\+|\-|\*|\/)/g);
}

实现优先级处理

js实现四则运算

通过栈处理乘除优先:

function evaluate(tokens) {
    const stack = [];
    let i = 0;
    while (i < tokens.length) {
        const token = tokens[i];
        if (token === '*' || token === '/') {
            const left = stack.pop();
            const right = tokens[++i];
            stack.push(token === '*' ? left * right : left / right);
        } else if (!isNaN(token)) {
            stack.push(parseFloat(token));
        }
        i++;
    }
    let result = stack[0] || 0;
    for (let j = 1; j < stack.length; j += 2) {
        result += stack[j] === '+' ? stack[j+1] : -stack[j+1];
    }
    return result;
}

处理复杂表达式

对于带括号的表达式,可使用递归或栈处理优先级:

function parseWithParentheses(expr) {
    const stack = [];
    let current = [];
    for (const char of expr) {
        if (char === '(') {
            stack.push(current);
            current = [];
        } else if (char === ')') {
            const value = evaluate(current);
            current = stack.pop();
            current.push(value);
        } else {
            current.push(char);
        }
    }
    return evaluate(current);
}

使用现成库

对于生产环境,推荐使用成熟的数学表达式库如:

  • math.js
  • expr-eval

安装math.js示例:

import { evaluate } from 'mathjs';
console.log(evaluate("2 + (3 * 4)")); // 输出14

注意事项

  • 浮点数精度问题需处理,例如0.1 + 0.2 !== 0.3
  • 自定义解析时需验证输入合法性,防止注入攻击。
  • 复杂场景建议优先使用专业库。

标签: js
分享给朋友:

相关文章

js实现全屏

js实现全屏

实现全屏的基本方法 使用JavaScript实现全屏功能主要依赖Element.requestFullscreen()方法。现代浏览器均支持此API,但不同浏览器可能需要添加前缀。 // 触发全屏…

js实现吸色

js实现吸色

使用Canvas实现吸色功能 通过Canvas的getImageData方法获取像素颜色数据。创建一个Canvas元素,将目标图像绘制到Canvas上,通过鼠标事件获取坐标对应的颜色值。 c…

js验证码的实现

js验证码的实现

验证码的基本实现原理 验证码(CAPTCHA)的核心目标是区分人类用户和自动化程序。JavaScript可用于生成或验证客户端验证码,但需注意纯前端验证可能被绕过,通常需结合后端验证。 纯前端验证码…

js实现的游戏

js实现的游戏

JavaScript 游戏开发基础 JavaScript 是开发网页游戏的流行选择,因其无需插件即可在浏览器中运行。以下是一些关键技术和资源: HTML5 Canvas Canvas 提供了绘制图形…

js 实现拖拽

js 实现拖拽

实现拖拽的基本步骤 在JavaScript中实现拖拽功能需要监听几个关键事件:mousedown、mousemove和mouseup。以下是实现的基本逻辑。 监听目标元素的mousedown事件,记…

js 实现按钮点击

js 实现按钮点击

实现按钮点击的 JavaScript 方法 HTML 按钮元素 在 HTML 中创建一个按钮,可以通过 <button> 或 <input> 标签实现: <button…