当前位置:首页 > 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实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js实现文件下载

js实现文件下载

使用 a 标签下载文件 通过动态创建 a 标签并设置 download 属性实现文件下载。适用于已知文件 URL 或 Blob 数据的情况。 function downloadFile(url, f…

js实现图片上传

js实现图片上传

图片上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现图片上传功能。HTML部分需要创建一个文件选择输入框和一个用于…

js实现图片预览

js实现图片预览

使用FileReader API实现图片预览 通过FileReader对象读取用户选择的图片文件并显示预览: const input = document.getElementById('image…

js实现pdf在线预览

js实现pdf在线预览

使用PDF.js实现PDF在线预览 PDF.js是由Mozilla开发的一个开源JavaScript库,可以在网页中直接渲染PDF文件。以下是实现PDF在线预览的步骤: 引入PDF.js库 在HT…

js实现换肤

js实现换肤

使用CSS变量实现换肤 通过CSS变量可以轻松实现主题切换功能。CSS变量在根元素中定义,通过JavaScript动态修改这些变量值。 :root { --primary-color: #34…