Как убрать нули, которые не представляют число? - PullRequest
Новая
       1

Как убрать нули, которые не представляют число?

1 голос
/ 26 марта 2020

я пытаюсь построить калькулятор для практики. Я использую eval() для вычисления результата. но я все еще пропускаю одну точку (afaik), то есть предотвращение нулей, которые создают не числа. например, если у меня есть строка 

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

, она не может быть оценена, поскольку 00.98 0009 00.000 не может быть рассчитана как число. как предотвратить это?

она моя кодовая ручка 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>

Ответы [ 2 ]

1 голос
/ 26 марта 2020

Вам не хватает второго параметра для метода parseInt . Вы должны предоставить основание 10 для анализа, в противном случае основание определяется автоматически, и оно не должно быть 10

if (Boolean(parseInt(progress.split('')[progress.length - 1],10) + 1)) {
// _________________________________________________________^^^


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);
})
@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>
1 голос
/ 26 марта 2020

Если ваша строка 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.

Давайте go глубоко в регулярное выражение:

  1. параметр \d представляет ди git (0-9), с символом + это означает 1 или более ди git.
  2. Точка (.) - это конкретный символ в регулярном выражении, но нам нужна точка из строки, поэтому нам нужно экранировать ее (как вы видите, я использовал \.)
  3. Точка (и десятичные числа) присутствуют не во всех числах, поэтому я должен описать, что эта часть может быть с 0 или 1 вхождением, поэтому я сгруппировал точку и десятичные числа в группировщике ((?:\.\d+) ), и я добавил ?, чтобы описать, что выбор номера действителен также, если эта группа отсутствует.
  4. Я использовал эту группу (?: ... ) вместо этой ( ... ), поскольку это сэкономит усилия при расчете под лесом.
  5. Последняя часть регулярного выражения, это g в конце, и это означает, что Регулярное выражение действительно не только для первого совпадения, но и для всего совпадения в строке.
  6. Метод replace строк js - это метод, который может принимать регулярное выражение и обратный вызов. Обратный вызов вызывается каждый раз, когда в основной строке происходит совпадение с регулярным выражением, в качестве первого аргумента передается подстрока, соответствующая регулярному выражению, и все, что возвращается обратным вызовом, заменит соответствующую подстроку
  7. In js когда у вас есть строка типа str = '123', вы можете преобразовать ее в число просто с помощью команды num = +str.
  8. Когда обратный вызов возвращает число, он вернет число в формате js, так автоматически без бесполезных 0.

Пожалуйста, дайте мне знать, если это не достаточно ясно, и я постараюсь объяснить лучше.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...