JS Tips(4)—由toFixed带来的潜在问题,您注意到了吗

时间:2022-09-07 11:24:57
我相信大家在写脚本处理数字的时候肯定会经常用到toFixed方法。

     一、toFixed能做什么?

以下是摘自网络的toFixed的介绍:

toFixed 方法:

返回一个字符串,代表一个以定点表示法表示的数字。

numObj.toFixed([fractionDigits])

参数

numObj

必选项。一个 Number 对象。

fractionDigits

可选项。小数点后的数字位数。其值必须在 0 – 20 之间,包括 0 和 20。

说明

toFixed方法返回一个以定点表示法表示的数字的字符串形式。该字符串中小数点之前有一位有效数字,而且其后必须包含fractionDigits 数字。

如果没有 fractionDigits 参数,或者该参数为undefinedtoFixed 方法假定该值为 0。

二、toFixed可以四舍五入吗?

     答案是可以。但是问题也正在于此。这种四舍五入是不稳定的(不同的浏览器不一样)。

     (1).

 

     在ie7下点击按钮会显示0.00,而ff会是0.01。

    (2) 

     ie和ff都正常。

     可见对于ie而言有一部分数字在使用toFixed时是不能得到正确的四舍五入的结果的。这个问题可能很多朋友都没有意识到,而这个问题说小也小,但有时候却也会带来恶劣的后果。

     就像上面0.009.toFixed(2)这个例子(0.009是一系列处理后的结果),恰好我就遇上了。在一个页面当中因为是在后台代码中做的计算因此显示为1%,而在另一个页面因为使用了toFixed结果显示为0%。为此被客户批了一顿。

     OK,既然有这样的问题,又怎么解决呢?

三、替代方案:

     正如很多朋友所想,我们可以重写这个方法:

     Number.prototype.toFixed= function( fractionDigits)...

     下面给出一个简陋的解决方案:

JS Tips(4)—由toFixed带来的潜在问题,您注意到了吗
Number.prototype.toFixed = functionfractionDigits )
{
    
//没有对fractionDigits做任何处理,假设它是合法输入
    return (parseInt(this * Math.pow( 10fractionDigits  + 0.5)/Math.pow(10,fractionDigts)).toString();
}

覆写toFixed后的显示例子如下:

JS Tips(4)—由toFixed带来的潜在问题,您注意到了吗
<html>
<head>
<script type="text/javascript">
Number.prototype.toFixed 
= function(s)
{
    
return (parseInt(this * Math.pow( 10+ 0.5)/ Math.pow( 10)).toString();
}
</script>
</head>
<body>
<input onclick="alert(0.009.toFixed(2))" type="button" value="显示0.009.toFixed(2)"> 
</body>
</html>

 

OK,问题解决了。

 

【小结】这篇文章的目的不在于提出解决办法,因为大家一般都知道怎么做。这篇文章的目的在于让朋友们知道toFixed是有这样一个问题的,大家care。