JavaScript中字符串与数字比较的陷阱及转换方法

HTML元素取值差异分析

遇到一个令人困惑的问题，首先查看前台HTML结构：

 
购买数量： <input id="txtNum" type="text" value="1" runat="server" onchange="javascript:checkNum();" />
件（库存<span id="getGoodsNum"> <%=GOODSNUM%></span>）件

接下来使用JavaScript获取元素值，请注意观察JS代码的实现方式：

 
var num = document.getElementById("txtNum").value;
var goodsnum = document.getElementById("getGoodsNum").innerHTML;

这里可以注意到，获取txtNum和getGoodsNum值的方法存在差异。

对于txtNum，我们使用.value属性；而对于getGoodsNum，则使用.innerHTML属性。

这种差异的原因在于getGoodsNum对应的是span标签，而txtNum对应的是文本输入框。

span、table和div等标签没有value属性，因此需要使用innerHTML来获取内容。

txtNum属于文本输入框，此外还有lable标签和下拉框等元素，它们都具备value属性。

现在应该清楚这两者取值方式不同的原因了。

字符串比较导致的逻辑错误

接下来讨论两个数值的比较逻辑。此时我们已经获取到了这两个值。

请查看具体的JS代码实现：

 
if (num > goodsnum) {
alert("购物数量不能大于库存数量！");
return false;
} 

乍看之下这段代码似乎没有问题，我们进行数值对比测试。当num输入100，goodsnum为90时，验证通过。然而，当num输入90，goodsnum为100时，验证却出现了问题，依然提示“购物数量不能大于库存数量！”。这是怎么回事？通过alert输出两个参数，数值本身没有错。仔细思考后发现，这两个值实际上是string类型，疏忽了这一点。需要进行类型转换。

字符串转数字的两种解决方案

这里提供两种解决方法，第一种方法：

 
if ((num / 1) > (goodsnum / 1)) {
alert("购物数量不能大于库存数量！");
return false;
} 

通过将数值除以1即可实现转换，验证通过。

第二种方法：

 
if (parseInt(num) > parseInt(goodsnum)) {
alert("购物数量不能大于库存数量！");
return false;
} 

验证通过，问题得到解决。

作者：Mr S.R Lee

出处：http://www.cnblogs.com/LeeYongze