JS限定小数位数精度

发布时间 2023-11-17 09:55:24作者: RicardoX3

使用element+vue。组件为el-input,type为text,这样子确保输入的数字为【字符串】可以使用字符串方法!

el-input-number虽好,但小数位若是为0时,依旧会显示,精度过高时可能展示效果不好,譬如1.00000,134.00000。

 

 1 //绑定值时请用对象
 2 //调用函数时能传递对象,从而能更改值本身
 3 <el-input v-model="scope.row.price" placeholder="请输入"
 4                               size="small" autofocus
 5                               @change="regularValue(scope.row, 'price', 2)"></el-input>
 6 
 7 /**
 8      * 限定输入值小数部分的规范
 9      * @param row 当前行对象,因为是对象所以可以更改原始数据
10      * @param prop 当前字段名称
11      * @param precision 小数部分的精度
12      * @param currentValue 若是已存在计算值,则用该值去做小数部分计算
13      */
14     regularValue(row, prop, precision, currentValue) {
15       console.log('1111', currentValue)
16       let value = currentValue?.toString() || row[prop].toString()
17       let index = value.indexOf('.')
18       if (index !== -1) {
19         if (value.slice(index + 1, value.length) == 0) {
20           //全0小数部分
21           row[prop] = value.slice(0, index)
22         } else if (value.length - 1 - index > precision) {
23           //小数部分超过指定精度
24           row[prop] = value.slice(0, index + 1 + precision)
25         } else {
26           //末尾有几位0
27           console.log('末尾有0')
28           while (value.lastIndexOf('0') === value.length - 1) {
29             value = value.slice(0, value.length - 1)
30           }
31           row[prop] = value
32         }
33       }
34     }

因为是字符串,所以可以获取到小数点的位置,从而根据字符长度去获取小数位长度。

因为这是监听change,所以在焦点离开输入框时,才会做出更改,@input的话就是每更改一个字符就调用比较频繁;

不过这个方法有点问题就是该方法是作用于【字符串】的。

若是有需要作数学运算,那么字符串转换为数字(包括该方法一开始的数字转字符串,因为数据库里一般是存储的数字),就会有精度上的误差,具体就是可能某次运算得到 571.3400000000001 这样的结果,然后经过该方法后只会得到571.3400(不过此时可以再次调用一下该方法删去0,因为计算一般就一次)。

另一个常用方法则是【正则表达式】,鄙人才疏学浅,未能完全掌握,故这里不做展开。测试过程中,因为正则也是对字符串做更改,因此也会有上述精度的问题,不过末尾的0还是会抹去的。如有兴趣,读者朋友可以自行查找。