javascript - Javascript 计算器应用程序中的前导零和小数

Question

为了练习，我构建了一个简单的计算器应用程序。但是，我遇到了一些错误:

1. 如果没有小数点，则不应有前导零。 (即 023 应该是 23)
2. 如果数字小于一且大于零，则应显示前导零。 (即 .21 应该是 0.21)
3. 数字最多只能有一位小数。 (即 0.9... 应该只有 0.9)

这是codepen中的源代码:this.link

JS 源代码:

// Variables
  var viewer = el("#viewer"), // Calculator screen where result is displayed
    equals = el("#equals"), // Equal button
    nums = el(".num"), // List of numbers
    ops = el(".ops"), // List of operators
    theNum = "", // Current number
    oldNum = "", // First number
    resultNum, // Result
    operator; // Batman

  // When: Number is clicked. Get the current number selected
  var setNum = function() {

    if (resultNum) { // If a result was displayed, reset number
      theNum = this.getAttribute("data-num");
      resultNum = "";
    } else { // Otherwise, add digit to previous number (this is a string!)
      theNum += this.getAttribute("data-num");
    }

    viewer.innerHTML = theNum; // Display current number

  };

  // When: Operator is clicked. Pass number to oldNum and save operator
  var moveNum = function() {
    oldNum = theNum;
    theNum = "";
    operator = this.getAttribute("data-ops");


    equals.setAttribute("data-result", ""); // Reset result in attr
  };

  // When: Equals is clicked. Calculate result
  var displayNum = function() {

    // Convert string input to numbers
    oldNum = parseFloat(oldNum);
    theNum = parseFloat(theNum);

    // Perform operation
    switch (operator) {
      case "plus":
        resultNum = oldNum + theNum;
        break;

      case "minus":
        resultNum = oldNum - theNum;
        break;

      case "times":
        resultNum = oldNum * theNum;
        break;

      case "divided by":
        resultNum = oldNum / theNum;
        break;

        // If equal is pressed without an operator, keep number and continue
      default:
        resultNum = theNum;
    }

    // If NaN or Infinity returned
    if (!isFinite(resultNum)) {
      if (isNaN(resultNum)) { // If result is not a number; set off by, eg, double-clicking operators
        resultNum = "You broke it!";
      } else { // If result is infinity, set off by dividing by zero
        resultNum = "Look at what you've done";
        el('#calculator').classList.add("broken"); // Break calculator
        el('#reset').classList.add("show"); // And show reset button
      }
    }

    // Display result, finally!
    viewer.innerHTML = resultNum;
    equals.setAttribute("data-result", resultNum);

    // Now reset oldNum & keep result
    oldNum = 0;
    theNum = resultNum;

  };

  // When: Clear button is pressed. Clear everything
  var clearAll = function() {
    oldNum = "";
    theNum = "";
    viewer.innerHTML = "0";
    equals.setAttribute("data-result", resultNum);
  };

  /* The click events */

  // Add click event to numbers
  for (var i = 0, l = nums.length; i < l; i++) { //
    nums[i].onclick = setNum;
  }

  // Add click event to operators
  for (var i = 0, l = ops.length; i < l; i++) {
    ops[i].onclick = moveNum;
  }

  // Add click event to equal sign
  equals.onclick = displayNum;

  // Add click event to clear button
  el("#clear").onclick = clearAll;

  // Add click event to reset button
  el("#reset").onclick = function() {
    window.location = window.location;
  };

任何人都可以就解决方案提供建议吗？提前致谢!

Answer 1

您可以使用javascript 的parseFloat 和toFixed 函数。使用 parseFloat 将字符串转换为 float ，并检查它是整数还是有理数。使用 toFixed 将数字转换回具有 0 个小数点(如果它是整数)或具有 1 个小数点(如果它是有理数)的字符串。 toFixed 将负责删除前导零并为 0 和 1 之间的数字附加前导零。

您可以使用以下示例:

var processNumString = function (str) {
  var floatNum = parseFloat(str);
  var res = floatNum % 1 == 0 ? floatNum.toFixed(0) : floatNum.toFixed(1);
  return res;
}

下面是一些使用示例的函数

var processNumString = function (str) {
    var floatNum = parseFloat(str);
    var res = floatNum % 1 == 0 ? floatNum.toFixed(0) : floatNum.toFixed(1);
    return res;
}

console.log(processNumString("22"));
console.log(processNumString("0022"));
console.log(processNumString("22.25"));
console.log(processNumString(".25"));