如何删除不代表数字的零？

debugcn 发表于 Dev

穆萨拉萨拉

我试图建立一个练习计算器。即时通讯eval()用于计算结果。但我仍然缺少一点（afaik），即防止零造成非数字。例如，如果我有字符串

7+9+00.98+0.0000089+0009+780000+00.000

无法评估，因为00.98 0009 00.000无法计算为数字。如何防止这种情况发生？

她是我的Codepen https://codepen.io/muhsalaa/pen/eYNjKOo

const button0 = document.getElementById('button-0');
const button1 = document.getElementById('button-1');
const button2 = document.getElementById('button-2');
const button3 = document.getElementById('button-3');
const button4 = document.getElementById('button-4');
const button5 = document.getElementById('button-5');
const button6 = document.getElementById('button-6');
const button7 = document.getElementById('button-7');
const button8 = document.getElementById('button-8');
const button9 = document.getElementById('button-9');

const buttonMultiplication = document.getElementById('button-multiplication');
const buttonDivision = document.getElementById('button-division');
const buttonSubtraction = document.getElementById('button-subtraction');
const buttonAddition = document.getElementById('button-addition');
const buttonClear = document.getElementById('button-clear');
const buttonPeriod = document.getElementById('button-period');

const progressText = document.getElementById('progress');
const resultText = document.getElementById('result');

let progress = '';
let result  = 0;

function preventDoubleOperator(x) {
  let alias = progress;
  alias += x;
  let filter = new RegExp(/[-+./*]{2,}/);
  const res = filter.test(alias.slice(-2))

  if (!res) {
    progress += x;
  } else {
    progress = progress.replace(/.$/, x)
  }
  
  progressText.innerHTML = progress;

  setResultText();
}

function setResultText() {
  if (Boolean(parseInt(progress.split('')[progress.length - 1]) + 1)) {
    result = eval(progress);
    if (result % 1 !== 0) {
      result = result.toFixed(4);
    }
  }

  resultText.innerHTML = result;
}

button0.addEventListener('click', function() {
  preventDoubleOperator('0');
  setTimeout(() => this.blur(), 100);
})

button1.addEventListener('click', function() {
  preventDoubleOperator('1')
  setTimeout(() => this.blur(), 100);
})

button2.addEventListener('click', function() {
  preventDoubleOperator('2')
  setTimeout(() => this.blur(), 100);
})

button3.addEventListener('click', function() {
  preventDoubleOperator('3')
  setTimeout(() => this.blur(), 100);
})

button4.addEventListener('click', function() {
  preventDoubleOperator('4')
  setTimeout(() => this.blur(), 100);
})

button5.addEventListener('click', function() {
  preventDoubleOperator('5')
  setTimeout(() => this.blur(), 100);
})

button6.addEventListener('click', function() {
  preventDoubleOperator('6')
  setTimeout(() => this.blur(), 100);
})

button7.addEventListener('click', function() {
  preventDoubleOperator('7')
  setTimeout(() => this.blur(), 100);
})

button8.addEventListener('click', function() {
  preventDoubleOperator('8')
  setTimeout(() => this.blur(), 100);
})

button9.addEventListener('click', function() {
  preventDoubleOperator('9')
  setTimeout(() => this.blur(), 100);
})

buttonMultiplication.addEventListener('click', function() {
  if (progress.length > 0){
    preventDoubleOperator('*')
  }
  setTimeout(() => this.blur(), 100);
})

buttonDivision.addEventListener('click', function() {
  if (progress.length > 0){
    preventDoubleOperator('/')
  }
  setTimeout(() => this.blur(), 100);
})

buttonSubtraction.addEventListener('click', function() {
  if (progress.length > 0){
    preventDoubleOperator('-')
  }
  setTimeout(() => this.blur(), 100);
})

buttonAddition.addEventListener('click', function() {
  if (progress.length > 0){
    preventDoubleOperator('+')
  }
  setTimeout(() => this.blur(), 100);
})

buttonPeriod.addEventListener('click', function() {
  if (progress.length > 0){
    preventDoubleOperator('.')
  }
  setTimeout(() => this.blur(), 100);
})

buttonClear.addEventListener('click', function() {
  progress = '';
  result = 0;
  progressText.innerHTML = progress;
  resultText.innerHTML = result;
  setTimeout(() => this.blur(), 100);
})

@import url('https://fonts.googleapis.com/css?family=Quantico:700&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #ece1ef;
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}

.wrapper {
  padding: 35px;
  display: grid;
  grid-template-columns: repeat(4, 60px);
  grid-gap: 20px;
  box-shadow:  6px 6px 20px #c9bfcb, 
              -6px -6px 20px #ffffff;
  border-radius: 19px;
}

.show-data {
  margin-bottom: 20px;
  grid-column: span 4;
  font-size: 30px;
  display: flex;
  flex-direction: column;
  padding: 10px;
  word-break: break-all;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 175px;
  width: 100%;
  border-radius: 19px;
  background: #ece1ef;
  box-shadow:  6px 6px 20px #c9bfcb, 
              -6px -6px 20px #ffffff;
}

.progress {
  font-size: 1.5rem;
  font-family: 'Quantico';
  line-height: 80%;
}

.result {
  font-size: 2.25rem;
  font-family: 'Quantico';
}

.button-neumorphic {
  border: none;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  width: 60px;
  border-radius: 10px;
  background: #ece1ef;
  box-shadow:  6px 6px 20px #c9bfcb, 
              -6px -6px 20px #ffffff;
}

.button-neumorphic:active,
.button-neumorphic:focus {
  border: none;
  font-size: 27px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  width: 60px;
  outline: none;
  border-radius: 10px;
  background: #ece1ef;
  box-shadow: inset 6px 6px 20px #c9bfcb, 
              inset -6px -6px 20px #ffffff;
}

<div class="wrapper">
    <div class="show-data">
      <p id="progress" class="progress"></p>
      <div id="result" class="result">0</div>
    </div>
    <button id="button-1" class="button-neumorphic">1</button>
    <button id="button-2" class="button-neumorphic">2</button>
    <button id="button-3" class="button-neumorphic">3</button>
    <button id="button-multiplication" class="button-neumorphic">*</button>
    <button id="button-4" class="button-neumorphic">4</button>
    <button id="button-5" class="button-neumorphic">5</button>
    <button id="button-6" class="button-neumorphic">6</button>
    <button id="button-division" class="button-neumorphic">/</button>
    <button id="button-7" class="button-neumorphic">7</button>
    <button id="button-8" class="button-neumorphic">8</button>
    <button id="button-9" class="button-neumorphic">9</button>
    <button id="button-addition" class="button-neumorphic">+</button>
    <button id="button-period" class="button-neumorphic">.</button>
    <button id="button-0" class="button-neumorphic">0</button>
    <button id="button-clear" class="button-neumorphic">C</button>
    <button id="button-subtraction" class="button-neumorphic">-</button>
  </div>

拉斐尔

如果您的字符串是progress（如代码中所报告的那样），则应使用以下命令：

// Regex to describe the format of the numbers to replace
const possibleNumberIdentifier = /\d+(?:\.\d+)?/g;

// Replacement with the js number format (with automatic concatenation)
const newProgress = progress.replace(possibleNumberIdentifier, x => +x);

eval(newProgress);

顺便说一句，如果您找到一种避免的方法，那就更好了eval。

让我们深入研究正则表达式：

参数\d代表一个数字（0-9），其符号+表示1个或多个数字。
点（.）是正则表达式中的特殊字符，但是我们需要字符串中的点，因此我们需要对其进行转义（如您所见，我使用\.）
点（和十进制数字）并不存在于所有数字中，因此我需要描述该部分可以出现0或1次，因此我将点和十进制数字分组到一个分组器（(?:\.\d+)）中，并添加?了一个描述如果该组不存在，则号码选择也有效。
我使用了这个组(?: ... )而不是这个组，( ... )因为它可以节省计算时的工作量。
正则表达式的最后一部分g在末尾，它表示正则表达式不仅对第一个匹配有效，而且对字符串中的所有匹配均有效。
的replaceJS串的方法是可以接受一个正则表达式和一个回调的方法。每当主字符串中存在与正则表达式匹配的内容时，都会调用该回调函数，将与正则表达式匹配的子字符串作为第一个参数传递，并且回调函数返回的任何内容都将替换匹配的子字符串
在js中，当您有一个类似的字符串时，str = '123'只需使用命令即可将其转换为数字num = +str。
当回调函数返回一个数字时，它将以js格式返回该数字，因此将自动显示无用值0。