JavaScript中的NaN值的尝试/捕获声明

我正在研究JavaScript计算器，其中冰球守门员将能够输入信息来计算他的平均目标数或他的GAA。我已经使用了计算器（尽管我希望我可以将输出格式化为＃。##，但是很好），但是我希望能够处理例如用户输入一个字母而不是数字引起的异常，这会通过try/catch语句产生NaN输出，除非我不确定如何格式化它以查找NaN值。任何想法我会怎么做呢？这里是我的代码：JavaScript中的NaN值的尝试/捕获声明

<!DOCTYPE html> 
<html> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
<Title>Goals Against Average Calculator</Title> 
<body> 
<script src="modernizr.custom.05819.js"></script><!--Links to file containing modernizer library--> 

<!-- Navigation --> 
<nav> 
    <ul class="w3-navbar w3-black"> 
    <li><a href="file:///C:/Users/Kyle/Desktop/Document1.html">Home</a></li> <!--Link to Home Page--> 
    <li><a href="file:///C:/Users/Kyle/Desktop/Document2.html">NHL Teams</a></li><!--Link to Page of NHL Teams--> 
    <li><a href="file:///C:/Users/Kyle/Desktop/Document3.html">AHL Teams</a></li><!--Link to Page of AHL Teams--> 
    <li><a href="file:///C:/Users/Kyle/Desktop/Document4.html">WHL Teams</a></li><!--Link to Page of WHL Teams--> 
    <li><a href="file:///C:/Users/Kyle/Desktop/Document5.html">G.A.A. Calculator</a></li><!--Link to GAA Calculator--> 
     <li><a href="file:///C:/Users/Kyle/Desktop/Document6.html">Fan Survey</a></li><!--Link to Fan Survey Page--> 
    </ul> 
</nav> 
<header> 
     <h1 style="text-align:center;">Goals Against Average Calculator</h1><!--Title of Page--> 
</header> 
    <article> 
     <form> 
      <fieldset> 
      <label for="GoalsAllowed"> 
       Enter Number of Goals Allowed 
      </label> 
      <input type="Goals" id="GoalsAllowed" /><!--Input for Goals Allowed--> 
      </fieldset> 
      <fieldset> 
      <label for="MinutesPlayed"> 
       Enter Minutes Played 
      </label> 
      <input type="MinPlayed" id="MPlayed" /><!--Input for Minutes Played--> 
      </fieldset> 
      <fieldset> 
      <label for="GameLength"> 
       Regulation Game Length 
      </label> 
      <input type="Minutes" id="MinGame" /><!--Input for Length of Regulation Game--> 
      </fieldset> 
      <fieldset> 
      <button type="button" id="button">Calculate</button><!--Calculation Button--> 
      </fieldset> 
      <fieldset> 
      <p id="GAA">&nbsp;</p> 
      </fieldset> 
     </form> 
    </article> 
    <script> 
     function convert() 
     { 

      var Goals = document.getElementById("GoalsAllowed").value; 
      var Minutes = document.getElementById("MPlayed").value; 
      var GameLength = document.getElementById("MinGame").value; 

      var GAA = (Goals * GameLength)/Minutes; 
      //window.alert("Swords and Sandals: " + GAA); 
      document.getElementById("GAA").innerHTML = "Your Goals Against Average is: " + GAA; 

     } 
     document.getElementById("button"). 
     addEventListener("click", convert, false); 
    </script> 
</body> 
</html>

编辑：关于小数格式的评论不是我发布的原因。这仅仅是出于美观的原因，我希望它看起来像什么，但它的效果很好。

来源

2017-01-23 J.Doe

使用[parseInt（）]（https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/parseInt）和[isNaN（）]（https://developer.mozilla.org/EN /文档/网络/的JavaScript /参考/ Global_Objects/isNaN）。 – Nit

只需在此行后面检查'isNaN（GAA）'var GAA =（目标* GameLength）/分钟;' –

可能的重复[验证JavaScript中的十进制数字 - IsNumeric（）]（http://stackoverflow.com/questions/18082/validate-decimal-numbers-in-javascript-isnumeric） –

其他人提供的答案约Number.isNaN，所以我不会进入对细节;这是正确的答案。 :-)

至于你的第二个问题，如何格式化数字到两位小数，所有数字都有一个函数toFixed(numberOfPlaces)，返回一个格式化的字符串。现在，这个函数不会执行任何舍入操作;它只是剔除剩余的小数。例如：

var num = 1.005; 
var formatted = num.toFixed(2);

..将返回“1.00”。您可能需要对输入进行四舍五入以使其得到一致处理和格式化。要做到这一点，您可以调用一个功能Math.round()。它总是将数字加起来得到否小数。你想要两位小数，所以这是一个非起动器，对吧？那么，这里有一个小技巧：如果您先将数字乘以100，那么您将要保留的那两位数字保留在小数点左边。四舍五入后，将它除以100，将它们放回正确的位置。

全部放在一起：

var input = Number(prompt("Give me a number")); 

if (Number.isNaN(input)) 
    alert("That isn't a valid number!"); 
else 
{ 
    input = Math.round(input * 100)/100; 

    var formatted = input.toFixed(2); 

    alert("Your input was: " + formatted); 
}

来源

2017-01-23 21:21:31

不错！完美工作！关于十进制格式也很好用！这不是原来的问题，仅仅是出于美观的原因。我就像那样的强迫症。 –

我的经验是，检查NaN的最好方法有点冗长，但据我所见，它是防弹的。

var numStr = prompt('Give me a number'); 
var num = Number.isNaN(Number(numStr));

如果numStr是一个有效的数字字符串，num将为false;如果不是这样，num将是真实的。

为什么不直接使用Number.isNaN而不先转换为数字？那么，Number.isNaN不检查值是否为Number，它从字面上看只是检查它是否为NaN，所以Number.isNaN('totally not a number')将返回false。

来源

2017-01-23 21:16:28 furkle

-1

你必须每个值转换为数字

goal = +goal

，并检查它是否是一个数字

if(isNaN(goal)){ 
    // show error 
}else{ 
    // show result 
}

来源

2017-01-23 21:17:43

您还可以限制用户使用type="number"到输入只输入号码直接键入HTML。 HTML 5引入了数字类型。

<input type="number" id="GoalsAllowed" />

来源

2017-01-23 21:18:31 Agalo

这里是一个JS小提琴显示你可以做什么：https://jsfiddle.net/iamjpg/huk8yp0L/

var convert = function() { 
    var Goals = document.getElementById("GoalsAllowed").value; 
    var Minutes = document.getElementById("MPlayed").value; 
    var GameLength = document.getElementById("MinGame").value; 

    var regex = /^[+-]?\d+(\.\d+)?$/ 

    if (!regex.test(Goals) || !regex.test(Minutes) || !regex.test(GameLength)) { 
    alert('Please only enter numeric values.'); 
    return false; 
    } 

    var GAA = (Goals * GameLength)/Minutes; 
    //window.alert("Swords and Sandals: " + GAA); 
    document.getElementById("GAA").innerHTML = "Your Goals Against Average is: " + Math.ceil(GAA * 100)/100; 
} 

document.getElementById("button").addEventListener("click", convert, false);

var regex = /^[+-]?\d+(\.\d+)?$/ - 检查你输入号码或浮动。

Math.ceil(GAA * 100)/100; - 将您的计算值舍入到最接近的百分之一。

希望这是有帮助的。

来源

2017-01-23 21:26:11 iamjpg

JavaScript中的NaN值的尝试/捕获声明

回答

相关问题