js中toFixed方法使用时的坑
一,简要介绍
toFixed(number)是js中一个用于将小数转换为指定位数的方法,但是在工作中使用它时遇到了一些坑,特此进行记录.
二,问题
(1)小数转换问题
在刚开始转换的时候一直以为转换过后返回的结果应该也是小数,结果偶然发现,在比较时很明显的比较竟然错了,才发现原来toFixed方法转换后返回的是字符串...请看例子:
/*以下结果是直接在console里main进行验证的*/
var a = 12.56789;
undefined
typeof(a)
"number"
a = a.toFixed(2);
"12.57"
typeof(a)
"string"从上面我们可以明显看出经过转换number变为字符串了,那么在比较的时候自然会出问题,它会按字符串的方式来进行比较,所以当涉及到运算时可能会出现意外的情况,所以正确的做法是涉及数值运算时,可以用parseFloat()方法将字符串转为浮点数
(2)小数转换精度问题
我们很多人可能都很自然的认为toFixed方法转换时是采取四舍五入的方式,但是实际结果并不是这样.请看下面的结果:
//以下结果为在Chrome浏览器测试结果
a=12.344
12.344
a.toFixed(2)
"12.34"
a=12.345
12.345
a.toFixed(2)
"12.35"
var b = 1.335
undefined
//请注意下面的转换
b.toFixed(2)
"1.33"我们发现在计算的过程中出现了1.355,保留两位小数后转换结果为1.33,所以在涉及到精密的计算时最好不要使用该方法进行转换,虽然大部分的转换都是正常的,但是不同浏览器在处理toFixed方法时采用的策略有所不同,导致结果会有部分差异.请看测试结果:
//火狐浏览器测试
var a=12.344;
undefined
a.toFixed(2)
"12.34"
a=12.345;
12.345
a.toFixed(2)
"12.35"
var b=1.335;
undefined
b.toFixed(2)
"1.33" 火狐与谷歌保持一致,很奇怪为什么1.335保留两位结果就是1.33了呢?下面请看ie10的结果:
//以下结果在edge中测试完成,吐槽ie10,打开控制台直接给我卡死了...
var a =12.344
undefined
a.toFixed(2)
"12.34"
a=12.345
12.345
a.toFixed(2)
"12.35"
var b = 12.355
undefined
b.toFixed(2);
"12.36"最后发现edge的结果是正确的,这真是很神奇啊...需要时可以自己实现fixed方法,以防遇到这样的问题呀
三,总结
遇到坑的时候就直接记录下来,方便自己啊,最忌重复踩坑.此外遇到问题,不要想当然了,容易犯经验主义的错误.