如何在计算器Javascript中的点之前添加零

Question

我正在用Javascript为FreeCodeCamp构建一个计算器。我对代码的一部分有问题。如果没有数字，我正在尝试在点之前添加"0"，当有人单击"点"时，只需屏幕中的"0"。

这是我的代码笔链接：https://codepen.io/kikibres/pen/MEQvqv

你也可以在这里看到它：

$(document).ready(function() {
  
  var mainMath = "0";
  var subMath = "0";
  update();
  var period = /./;
  
  $("button").click(function(){
    calculate($(this).attr("value"));
  });
  
  function calculate(keyitem) {
    switch(keyitem) {
      case "clear":
        clearScreen();
        break;
      case "plusminus":
        plusminusScreen();
        break;
      case "%":
        percentageScreen();
        break;
      case "/":
      case "*":
      case "+":
      case "-":
        addOperator();
        break;
      case "0":
      case "1":
      case "2":
      case "3":
      case "4":
      case "5":
      case "6":
      case "7":
      case "8":
      case "9":
      case ".":
        addNumber(keyitem);
        break;
      case "=":
        solveEqual();
        break;
    }
    update();
    };
 
  function clearScreen() {
     mainMath = "0";
     subMath = "0";
  };
  
  function plusminusScreen(keyitem) {
     mainMath = eval(-1 * keyitem);
  };
  
  function addNumber(keyitem) {
    if (keyitem == "."){
      if(mainMath.length == 0) {
        mainMath = "0" + keyitem;
      }
    }
    if (mainMath == "0" && subMath == "0"){
      mainMath=keyitem;
      subMath=keyitem;
      return;
    }
    mainMath+=keyitem;
    subMath+=keyitem;
    console.log(mainMath.length);
  };
  
  function update(){
  document.getElementById("answer").innerHTML = mainMath;
  document.getElementById("history").innerHTML = subMath;
};
  
  
});

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
h1, h2, h3, p {
  font-family: 'Roboto', sans-serif;
}
html, body{
  height:100%;
  margin: 0;
  background-color: #ffffff;
}
.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background-repeat: no-repeat;
    background-size: cover;
  background-position: center center;
  padding: 160px 0;
}
.calculatorbox {
  width: 260px;
  margin: 0 auto;
  border: 1px solid #000000;
}
.calheader {
  text-align: center;
}
.calwindow {
  background: #000000;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
   -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  padding: 10px 0;
  box-sizing: border-box;
}
.entry {
  font-size: 4em;
  display: block;
  line-height: 1em;
}
.entryhistory {
  font-size: 1em;
  padding-right: 5px;
}
.entry p, .entryhistory p {
  margin: 0;
  color: #ffffff;
}
sup {
  top: -0.5em;
}
 
sub {
  bottom: -0em;
}
.row {
  clear: both;
  width: 100%;
  display: flex;
}
button {
  display: inline-block;
  border: none;
  padding: 0;
  outline: none;
  cursor: pointer;
}
.key {
  width: 65px;
  height: 60px;
  font-size: 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}
.key.btnspan {
  width: 130px;
}
.key.topcolor {
  background: #d9d9d9;
}
.key.orange {
  background: #ff8c00;
  color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="calheader">
      <h2>Simple Calculator</h2>
    </div>
  <div class="calculatorbox">
    <div class="calwindow">
      <!-- ENTRY BOX -->
      <div class="entry">
        <p id="answer"></p>
      </div>
      <div class="entryhistory">
        <p id="history"></p>
      </div>
    </div>
    <!-- BUTTONS -->
    <div class="calbuttons">
      <div class="row">
        <button class="key topcolor" value="clear">C</button>
        <button class="key topcolor" value="plusminus"><sup>+</sup>/<sub>−</sub></button>
        <button class="key topcolor" value="%">%</button>
        <button class="key orange" value="/">÷</button>
      </div>
      <div class="row">
        <button class="key" value="7">7</button>
        <button class="key" value="8">8</button>
        <button class="key" value="9">9</button>
        <button class="key orange" value="*">×</button>
      </div>
      <div class="row">
        <button class="key" value="4">4</button>
        <button class="key" value="5">5</button>
        <button class="key" value="6">6</button>
        <button class="key orange" value="-">−</button>
      </div>
      <div class="row">
        <button class="key" value="1">1</button>
        <button class="key" value="2">2</button>
        <button class="key" value="3">3</button>
        <button class="key orange" value="+">+</button>
      </div>
      <div class="row">
        <button class="key btnspan" value="0">0</button>
        <button class="key" value=".">.</button>
        <button class="key orange" value="=">=</button>
      </div>
    </div>
  </div>
</div>

我遇到问题的部分是这样的：

function addNumber(keyitem) {
    if (keyitem == "."){
      if(mainMath.length == 0) {
        mainMath = "0" + keyitem;
      }
    }
    if (mainMath == "0" && subMath == "0"){
      mainMath=keyitem;
      subMath=keyitem;
      return;
    }
    mainMath+=keyitem;
    subMath+=keyitem;
    console.log(mainMath.length);
  };

我想做的是，如果有人按点"."，它应该检查数字是否已经输入，如果没有，则添加"0"。我试图通过这样编码来检查mainMath.length：console.log(mainMath.length);，但它没有在控制台中显示任何内容。

Answer 1

对此感到抱歉。当我在等待有人解决这个问题时，我设法找到了解决方案。它是：

if (keyitem == "."){
      if(mainMath == 0) {
        return mainMath = "0" + keyitem;
      }
    }

现在我必须解决出现的正/负按钮问题......

Answer 2

向值添加前导零的技术称为填充。一种选择是使用 Number.prototype.toLocaleString（）。

var number = .5;
var paddedNumber = number.toLocaleString(undefined, {minimumIntegerDigits:1})
console.log( paddedNumber );
// "0.5"