javascript - 晚餐成本计算器无法将字符串转换为整数

Question

我正在使用 parseInt 将 .values 从字符串转换为数字。但是，如果用户输入十进制值，则输出为 NaN。这是我的代码:

Dinner Cost:<input type="text" id="cost" /><br /><br />
Tax Rate:<input type="text" id="taxRate" /><br /><br />

<button id="btn">Determine Total Costs</button><br /><br />

<p id="para"></p>

document.getElementById("btn").addEventListener('click', totalCosts);

function totalCosts() {

  var dinnerCosts = document.getElementById("cost").value;
  var taxRate = document.getElementById("taxRate").value;
  taxRate = parseInt(taxRate);
  dinnerCosts = parseInt(dinnerCosts);


  var taxCost = dinnerCosts * taxRate;
  var totalCost = dinnerCosts + taxCost;

  return document.getElementById("para").innerHTML = "Your dinner cost " + dinnerCosts + ", your tax costs " + taxCost + ", for a total cost of " + totalCost;
}

我做错了什么？有没有比 parseInt 更合理的方法将这些默认字符串转换成数字？

谢谢!

Answer 1

使用 parseFloat() 而不是 parseInt() 用法:taxRate = parseFloat(taxRate);

作为更好的编程实践，您应该避免此类转换中的异常。在这种 Javascript 场景中进行稳健类型检查的一种简单方法是避免:

• 未声明的变量
• Javascript 对象(又名字典)上未声明的属性
• Lnull 值
• NaN 值

这是一个简单快速的概述:

//
var vfftest       = 0.05;                       // float
var viitest       = 3000;                       // integer
var vssblank      = '';                         // empty string
var vssnonblank   = 'hello';                    // non-empty string
var vddempty      = {};                         // dictionary with no name-value pairs
var vddnonempty   = {'alpha':1,'bravo':'two'};  // dictionary with name-    value pairs
var vnull         = null;                       // null

// check parseFloat
console.log( parseFloat(vssnonblank) ); // NaN
console.log( parseFloat(vssblank) );    // NaN
console.log( parseFloat(vfftest) );     // 0.05
console.log( parseFloat(viitest) );     // 3000
console.log( parseFloat(vnull) );       // NaN
console.log( parseFloat(vddempty) );    // NaN
console.log( parseFloat(vddnonempty) ); // NaN
console.log( parseFloat(vnoExisto) );   // EXCEPTION

除此之外请引用this链接并查看如何避免此类转换中的异常。