计算器开发：如何将负数正确存入displayArray数组？

你的核心问题在于当前用split(/([+\-*/])/)拆分字符串时，会把开头的负号当成独立运算符，导致拆分出空字符串和错误的数组结构。要解决这个问题，我们可以换一种思路：直接匹配出带负号的数字和运算符，而不是拆分字符串。

具体修复步骤： #

1. 替换正则拆分逻辑为匹配逻辑
   把原来的displayArray = displayValue.split(/([+\-*/])/);替换成：

   displayArray = displayValue.match(/(-?\d+)|([+\-*/])/g) || [];
   

   这个正则(-?\d+)|([+\-*/])会匹配两种内容：

   • -?\d+：可选负号开头的数字（包括正数和负数）
   • [+\-*/]：四则运算符
     用match方法直接提取出所有符合的片段，就能得到你期望的['-5', '-', '10']结构。

2. 修正数字按钮的0处理逻辑
   原来的代码中，当firstNumber === '0'时直接清空displayValue会导致负数输入异常（比如输入-0后会被清空），可以调整为只在输入单个0时清空：

   if (displayValue === '0') {
       displayValue = '';
   }
   

3. 避免连续添加运算符
   在运算符按钮的逻辑里，增加判断避免用户连续点击运算符，导致数组结构混乱。

修复后的完整代码： #

// Initialize variables
let displayValue = '';
let displayArray = [];

const screenDiv = document.getElementById('screen');
const numberButtons = document.querySelectorAll('.number');
const operatorButtons = document.querySelectorAll('.operator');

// Event listeners for number buttons
numberButtons.forEach(button => {
    button.addEventListener('click', () => {
        // 避免开头重复输入0
        if (displayValue === '0') {
            displayValue = '';
        }
        displayValue += button.textContent;
        // 替换为match逻辑提取数字和运算符
        displayArray = displayValue.match(/(-?\d+)|([+\-*/])/g) || [];
        
        // 根据数组长度更新屏幕显示
        if (displayArray.length === 3) {
            screenDiv.textContent = displayArray[2];
        } else {
            screenDiv.textContent = displayArray[0] || '';
        }
    });
});

// Event listeners for operator buttons
operatorButtons.forEach(button => {
    button.addEventListener('click', () => {
        if (displayArray.length === 3) {
            displayValue = operate(); // 假设operate()已实现运算逻辑
            screenDiv.textContent = displayValue;
            displayValue += button.textContent;
            // 更新数组
            displayArray = displayValue.match(/(-?\d+)|([+\-*/])/g) || [];
        } else {
            // 避免连续添加运算符
            const lastChar = displayValue.slice(-1);
            if (![ '+', '-', '*', '/' ].includes(lastChar)) {
                displayValue += button.textContent;
                displayArray = displayValue.match(/(-?\d+)|([+\-*/])/g) || [];
            }
        }
    });
});

// 示例operate函数（需要你根据实际需求完善）
function operate() {
    const [num1, op, num2] = displayArray;
    const n1 = parseFloat(num1);
    const n2 = parseFloat(num2);
    switch(op) {
        case '+': return (n1 + n2).toString();
        case '-': return (n1 - n2).toString();
        case '*': return (n1 * n2).toString();
        case '/': return n2 !== 0 ? (n1 / n2).toString() : 'Error';
        default: return '';
    }
}

关键说明： #

• 使用match替代split是因为split会将所有匹配到的运算符作为分隔符，无法区分开头的负号和运算符负号；而match可以精准提取带负号的数字。
• 增加连续运算符判断，避免用户误操作导致数组结构异常。
• 修正0的处理逻辑，确保负数输入不受影响。

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