文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何移除不代表数字的零？

问如何移除不代表数字的零？
EN

Stack Overflow用户
提问于 2020-03-26 10:19:46
回答 2查看 86关注 0票数 1

我正试着建立一个计算器供练习。我用eval()来计算结果。但是我仍然缺少一点(afaik)，那就是阻止创建非数字的零。例如，如果我有字符串

代码语言：javascript
复制
7+9+00.98+0.0000089+0009+780000+00.000

由于00.98 0009 00.000不能计算为数字，因此无法对其进行计算。如何防止这种情况发生？

她是我的编码人https://codepen.io/muhsalaa/pen/eYNjKOo

​

代码语言：javascript
复制
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);
})
代码语言：javascript
复制
@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;
}
代码语言：javascript
复制
<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>

​

javascript
regex
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-03-26 10:30:20

如果您的字符串是progress (如您的代码中所报告的)，您应该应用以下内容：

代码语言：javascript
复制
// 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，那就更好了。

让我们深入到regex：

  1. param \d表示一个数字(0-9)，符号+表示1或更多个数字。
  2. 点(.)是正则表达式中的一个特定字符，但是我们需要字符串中的点，所以我们需要转义它(正如您看到的，我使用了\.)。
  3. 点(和十进制数)并不存在于所有的数字中，所以我需要描述这个部分可以出现0或1，所以我将点和十进制数字分组在一个石斑鱼((?:\.\d+))中，并添加了?来描述如果该组不存在，数字选择也是有效的。
  4. 我使用这个组(?: ... )而不是这个( ... )，因为它将节省计算的工作量。
  5. 正则表达式的最后一部分是末尾的g，这意味着正则表达式不仅对第一次匹配有效，而且对字符串中的所有匹配都有效。
  6. js字符串的replace方法是一种可以接受正则表达式和回调的方法。每次在主字符串中调用回调时，都会与正则表达式匹配，并作为第一个参数传递与regex匹配的子字符串，而回调返回的任何内容都将替换匹配的子字符串。
  7. 在js中，当您有一个类似于str = '123'的字符串时，您可以使用命令num = +str将其转换为一个数字。
  8. 当回调返回一个数字时，它将以js格式返回数字，这样就可以自动地不使用无用的0。

如果还不清楚，请告诉我，我会尽量解释得更好。

票数 1
EN

Stack Overflow用户

发布于 2020-03-26 10:37:17

您丢失了parseInt方法的第二个参数。您应该为解析提供10的基，否则基数将自动确定，并且不需要是10。

代码语言：javascript
复制
if (Boolean(parseInt(progress.split('')[progress.length - 1],10) + 1)) {
// _________________________________________________________^^^

​

代码语言：javascript
复制
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],10) + 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);
})
代码语言：javascript
复制
@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;
}
代码语言：javascript
复制
<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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/60865046

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档