如何在基础计算器中不使用eval()实现数学函数功能

我正在按照要求开发一个不依赖eval()、通过数学函数实现运算的基础计算器。目前我只在mathWorks函数里实现了加法逻辑，但不知道怎么把这个函数和点击等号（=）时的else if代码块关联起来。我试过添加parseFloat以及把a、b作为参数传入mathWorks，但还是没头绪。相关代码如下：

const container = document.querySelector(".container");
const calcBody = document.querySelector("#calcBody");
const input = document.querySelector("#input");
let a = "";
let b = "";
let operator = "";
let result = "";


const numbers = {
    reset: "CE",
    goBack: "C",
    divide: "/",
    multiply: "*",
    seven: 7,
    eight: 8,
    nine: 9,
    add: "+",
    four: 4,
    five: 5,
    six: 6,
    minus: "-",
    one: 1,
    two: 2,
    three: 3,
    decimal: ".",
    zero: 0,
    equal: "=",
};

for (let key in numbers) {
    let button = document.createElement("button");
    button.setAttribute("id", key);
    button.textContent = numbers[key];
    container.appendChild(button);

    button.addEventListener("click", (e) => {
        let val = e.target.textContent;
       
        if(e.target.textContent === "+" || 
           e.target.textContent === "/" ||
           e.target.textContent === "*")
           {
           operator = val;
           input.textContent = a + " " + operator + " ";
           }

        else if(e.target.textContent === "CE") {
             input.textContent = "";
             a = "";
        }
        else if(input.textContent.includes("*") ||
                 input.textContent.includes("+")  ||
                 input.textContent.includes("/")) {
            b += val;
            input.textContent = a + " " + operator + " " + b;
        }

        else if(e.target.textContent === "="){
            mathWorks();
            }
        
        
            else 
        {
            a += val
            input.textContent = a;
        }

    });

    function mathWorks(){
        if(operator === "+"){
            result = parseFloat(a) + parseFloat(b);
            input.textContent = result;
            
        }

    }

}

你的代码其实已经把mathWorks和等号点击关联上了（点击=时调用了mathWorks()），问题出在几个细节逻辑缺失上：

• 计算完成后未重置b和operator，导致后续运算复用旧值
• 减法按钮未被纳入运算符判断逻辑
• CE按钮未完全清空所有运算变量

修复后的代码调整 #

1. 完善mathWorks函数，处理计算后的变量重置与连续运算支持：

function mathWorks(){
    if(operator === "+"){
        result = parseFloat(a) + parseFloat(b);
        input.textContent = result;
        // 将结果设为下一次运算的初始值，清空临时变量
        a = result.toString();
        b = "";
        operator = "";
    }
    // 补充减法逻辑示例
    else if(operator === "-"){
        result = parseFloat(a) - parseFloat(b);
        input.textContent = result;
        a = result.toString();
        b = "";
        operator = "";
    }
}

2. 修复CE按钮的全量清空逻辑：

else if(e.target.textContent === "CE") {
    input.textContent = "";
    a = "";
    b = "";
    operator = "";
}

3. 补充减法按钮的运算符判断：

if(e.target.textContent === "+" || 
   e.target.textContent === "/" ||
   e.target.textContent === "*" ||
   e.target.textContent === "-") {
    operator = val;
    input.textContent = a + " " + operator + " ";
}

4. 可选：补充退格（C）按钮的功能：

else if(e.target.textContent === "C") {
    if(input.textContent.includes(operator)) {
        // 已输入运算符时，修改b的值
        b = b.slice(0, -1);
        input.textContent = b ? `${a} ${operator} ${b}` : `${a} ${operator}`;
    } else {
        // 未输入运算符时，修改a的值
        a = a.slice(0, -1);
        input.textContent = a;
    }
}

为什么之前看起来没关联上？ #

你已经正确调用了mathWorks()，但因为计算后没有重置b和operator，导致第二次输入时变量逻辑混乱，比如第一次计算1+2=3后，b仍保留"2"，再输入+4时b会变成"24"，造成运算错误，让你误以为函数没关联成功。

内容的提问来源于stack exchange，提问作者Reginald86