JavaScript字符串末尾字符校验及加法计算器防重复加号实现问询

这个需求很常见，核心思路就是点击加号按钮时，先判断当前输入框的最后一个字符是不是加号，如果是就不执行拼接操作。

假设你的计算器显示区域是一个input或者div，比如id为calc-display，那可以这样写点击事件逻辑：

const display = document.getElementById('calc-display');

function onPlusButtonClick() {
  const currentContent = display.textContent || display.value;
  // 先处理空内容的情况：如果输入框是空的，直接不允许加加号
  if (!currentContent) return;

  // 获取最后一个字符
  const lastChar = currentContent.slice(-1);
  // 只有最后一个字符不是加号时，才拼接加号
  if (lastChar !== '+') {
    display.textContent += '+';
    // 如果是input元素就用 display.value += '+'
  }
}

如果之后你要扩展其他运算符（比如减号、乘号），可以把所有运算符放到一个数组里，这样判断更灵活：

const operators = ['+', '-', '*', '/'];

function onPlusButtonClick() {
  const currentContent = display.textContent || display.value;
  if (!currentContent) return;

  const lastChar = currentContent.slice(-1);
  // 检查最后一个字符是不是运算符，不是的话才拼接
  if (!operators.includes(lastChar)) {
    display.textContent += '+';
  }
}

这样就算以后加了其他运算符，也不会出现连续运算符的问题啦。

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