JS计算器计算num1 + num 2时显示num1+num2undefined问题求助

问题根源分析 #

1. 输入拼接错误：屏幕出现undefined字符串，是因为某个按钮未设置data-num属性，点击时e.target.dataset.num返回undefined，字符串拼接时自动转为"undefined"追加到输入内容中。
2. 表达式语法错误：输入num1 + num 2（标识符/数字间带空格）属于无效JavaScript语法，eval执行时会抛出语法错误，未捕获错误时answer会变为undefined。
3. 结果格式不符合预期：原代码仅显示计算结果，未保留原表达式并按[表达式] = [结果]的格式输出。

修复步骤 #

1. 修复输入阶段的undefined追加问题 #

确保所有按钮都配置正确的data-num属性（比如空格按钮设置data-num=" "），同时在点击事件中判断值的有效性，避免追加无效内容：

buttons.forEach(function (button) {
    button.addEventListener('click', function (e) {
        let value = e.target.dataset.num;
        // 仅当值存在时才追加到屏幕
        if (typeof value !== 'undefined') {
            screen.value += value;
        }
    });
});

2. 处理无效表达式并格式化输出 #

添加错误捕获机制，清理表达式中的无效空格，同时按预期格式输出结果：

equal.addEventListener('click', function () {
    const input = screen.value.trim();
    if (!input) {
        screen.value = "Please Enter Value";
        return;
    }

    try {
        // 清理表达式中数字/标识符中间的无效空格
        const cleanExpr = input
            .replace(/(\d)\s+(\d)/g, '$1$2') // 去除数字间的空格
            .replace(/([a-zA-Z_$])\s+([a-zA-Z0-9_$])/g, '$1$2'); // 去除标识符间的空格
        
        const answer = eval(cleanExpr);
        // 按预期格式显示原表达式和结果
        screen.value = `${input} = ${answer}`;
    } catch (err) {
        // 表达式无效时给出提示
        screen.value = "Invalid Expression";
    }
});

3. 额外优化建议 #

• 替换eval：eval存在安全风险（若用户输入恶意代码可能被执行），建议实现自定义的四则运算解析器，或使用安全的表达式解析库。
• 输入限制：在按钮点击时限制输入内容，禁止出现会导致语法错误的字符或格式，比如不允许标识符中间加空格。

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