如何在JavaScript栈中拼接数字？计算器开发逻辑遇阻求助

嘿，我来帮你搞定这个数字拼接和栈存储的逻辑问题！你的核心需求是让连续点击的数字拼成一个完整的字符串存入栈，而不是单个数字分开存，点击运算符后切换到第二个数，最终栈的结构要符合["23", "+", "7", "="]这种格式对吧？

先看看你现有代码里的几个问题：

• myFirstInput =+ value其实是把字符串转成数字，但我们需要的是字符串拼接，这个方向不对；
• 那个input = "" + myFirstInput + myFirstInput明显是笔误，逻辑完全不符合需求；
• 没有专门的变量跟踪当前正在输入的数字，导致无法判断是要拼接数字还是开始新数字。

解决方案思路 #

我们需要新增几个状态变量来跟踪输入状态：

• currentNumber：存储当前正在输入的数字字符串，用于拼接连续点击的数字；
• lastWasOperator：标记上一次点击的是不是运算符（+/-/*//），用来判断是否需要开始新的数字拼接；
• 调整prevop的使用逻辑，主要用来处理按=后的重置。

修改后的完整代码 #

var stack = new Array();
// 获取所有按钮元素（补充按钮获取逻辑，适配实际DOM结构）
const buttons = document.querySelectorAll('button');
// 新增状态变量
var currentNumber = '';
var lastWasOperator = false;
var prevop = '';

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", handle);
}

function handle(event) {
  const value = event.target.value;
  const textfield = document.getElementById("textfield");

  // 处理数字按钮（支持小数点，不需要可去掉|| value === '.'）
  if (!isNaN(value) || value === '.') {
    // 如果上一次是运算符或者刚按过=，则重置当前数字
    if (lastWasOperator || prevop === '=') {
      currentNumber = value;
      textfield.value = value;
      lastWasOperator = false;
      prevop = '';
    } else {
      // 否则拼接数字
      currentNumber += value;
      textfield.value += value;
    }
    return; // 数字处理完直接返回，不执行后面的逻辑
  }

  // 处理运算符：+、-、*、/
  if (['+', '-', '*', '/'].includes(value)) {
    // 如果当前有正在输入的数字，先把它推入栈
    if (currentNumber) {
      stack.push(currentNumber);
      currentNumber = ''; // 重置当前数字，准备输入第二个数
    }
    // 把运算符推入栈
    stack.push(value);
    textfield.value += value;
    lastWasOperator = true;
    prevop = value;
    console.log(`${value} was clicked`);
    return;
  }

  // 处理等于号=
  if (value === '=') {
    // 如果还有未推入栈的数字，先推入
    if (currentNumber) {
      stack.push(currentNumber);
      currentNumber = '';
    }
    // 把=推入栈
    stack.push(value);
    console.log("= was clicked");
    
    // 计算结果（eval仅作演示，实际项目建议自行实现运算逻辑避免安全风险）
    try {
      const result = eval(textfield.value);
      textfield.value += value + result;
      // 把结果设为下一次输入的初始数字，支持连续计算
      currentNumber = String(result);
    } catch (err) {
      textfield.value = 'Error';
      currentNumber = '';
    }
    
    lastWasOperator = false;
    prevop = value;
    // 打印栈结构验证
    console.log('当前栈结构:', stack);
  }
}

逻辑验证 #

按照你说的示例流程（点击2→3→+→7→=），栈的变化过程是：

1. 点击2：currentNumber = "2"，栈为空；
2. 点击3：currentNumber = "23"，栈为空；
3. 点击+：把"23"推入栈，再把"+"推入栈，栈变为["23", "+"]；
4. 点击7：currentNumber = "7"，栈保持["23", "+"]；
5. 点击=：把"7"推入栈，再把"="推入栈，栈最终变为["23", "+", "7", "="]，完全符合你的需求！

额外说明 #

• 我补充了小数点的处理，如果你的计算器不需要支持小数，可以去掉|| value === '.'；
• 用eval虽然简单，但实际生产环境不建议使用（存在安全风险），你可以后续自己实现加减乘除的运算逻辑，遍历栈来计算；
• 加了错误捕获，避免非法输入导致的页面报错。

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