JavaScript toFixed() 方法
简单介绍一下 JavaScript toFixed() 方法和使用中的问题
# 定义和用法
toFixed() 方法可把 Number 四舍五入为指定小数位数的数字, 如果是整数的话会在小数点后面补齐 0
# 语法
NumberObject.toFixed(num)
# 参数 描述
| 参数 | 描述 |
|---|---|
num 必需 | 规定小数的位数, 是 0 ~ 20 之间的值, 包括 0 和 20 , 有些实现可以支持更大的数值范围. 如果省略了该参数, 将用 0 代替. |
# 返回值
返回 NumberObject 的字符串表示, 不采用指数计数法, 小数点后有固定的 num 位数字. 如果必要, 该数字会被舍入, 也可以用 0 补足, 以便它达到指定的长度. 如果 num 大于 le+21 , 则该方法只调用 NumberObject.toString() , 返回采用指数计数法表示的字符串.
# 问题
# 整数如何直接调用
var num = 12
alert(num.toFixed(4))
// 可以正常弹出
2
3
alert(12. toFixed(4))
// 不可以弹出
// 报错：Uncaught SyntaxError: Invalid or unexpected token
// 原因：认为 12 后面的点是小数点
2
3
4
//修改
alert((12).toFixed(4))
// 可以正常弹出
// 原因：将 12 括起来, 让其认为是一个完整的数值
2
3
4
# 精度问题
例子:
1.35.toFixed(1) // 1.4 正确
1.335.toFixed(2) // 1.33 错误
1.3335.toFixed(3) // 1.333 错误
1.33335.toFixed(4) // 1.3334 正确
1.333335.toFixed(5) // 1.33333 错误
1.3333335.toFixed(6) // 1.333333 错误
2
3
4
5
6
关于这个的原因可以看看网上大佬的分析: 为什么(2.55).toFixed(1)等于 2.5? - 知乎 (opens new window)
解决方法也有很多, 主要就是判断保留指定位数的最后一位小数是否是 5
第一种修复方式: 判断最后一位小数为 5 的, 改成 6, 再调用 toFixed. 例如 1.335(调用 toFixed(2) 结果为 1.33)先修改为 1.336, 在调用 toFixed(2) , 得到的结果是 1.34, 符合预期.
第二种修复方式: 将数字先进行放大指定倍数, 使最后一位小数显示成个位数, 然后加上一个 0.5 后, 使最后一位进位(如果最后一位大于等于 5), 再调用 parsInt() 去尾并缩小相同倍数. 例如 1.335 放大 100 倍后是 133.5, 加上 0.5 后是 134.0, 调用 parseInt() 得到 134, 再缩小 100 倍得到 1.34, 结果符合预期.
第三种修复方式: 在调用 toFixed() 方法前, 先给数字补一个极小值, 然后再调用 toFixed() 方法. 例如 1.335 加上一个极小值(0.00000001)后是 1.33500001, 然后调用 toFixed(2)得到 1.34, 结果符合预期. 这个极小值只要不影响最后结果, 可以根据要保留的小数位数决定取多少, 但也不能太小了(例如 1.3350000001.toFixed(2) 结果是 1.34, 而 1.33500000000000001.toFixed(2) 结果是 1.33).
这里就推荐下面这种吧
/**
* @description: 解决 toFixed 精度问题
* @param {Number} number 待格式化的数字
* @param {Number} digits 小数位数
* @param {Boolean} flag 整数时是否用 0 补齐小数位数, 默认 true
* @return {Number} 格式化后的数字
*/
function toFixed (number, digits, flag = true) {
number = +number
digits = +digits
if (digits > 20 || digits < 0) {
throw new RangeError('toFixed() digits argument must be between 0 and 20')
}
if (isNaN(number) || number >= Math.pow(10, 21)) {
return number.toString()
}
if (typeof digits === 'undefined' || digits === 0) {
return Math.round(number).toString()
}
let result = number.toString()
const arr = result.split('.')
// 整数的情况
if (arr.length < 2) {
return `${result}${flag ? `.${new Array(digits).fill(0).join('')}` : ''}`
}
const [integer, decimal] = arr
if (decimal.length === digits) {
return result
}
if (decimal.length < digits) {
return `${result}${flag ? `.${new Array(digits - decimal.length).fill(0).join('')}` : ''}`
}
result = integer + '.' + decimal.substr(0, digits)
const last = decimal.substr(digits, 1)
// 四舍五入，转换为整数再处理，避免浮点数精度的损失
if (parseInt(last, 10) >= 5) {
const x = Math.pow(10, digits)
result = (Math.round(parseFloat(result) * x) + (integer >= 0 ? 1 : -1)) / x
result = result.toFixed(digits)
}
return result
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
参考资料: