JS限定小数位数精度

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

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

 

//绑定值时请用对象
//调用函数时能传递对象，从而能更改值本身
<el-input v-model="scope.row.price" placeholder="请输入"
                              size="small" autofocus
                              @change="regularValue(scope.row, 'price', 2)"></el-input>

/**
     * 限定输入值小数部分的规范
     * @param row 当前行对象，因为是对象所以可以更改原始数据
     * @param prop 当前字段名称
     * @param precision 小数部分的精度
     * @param currentValue 若是已存在计算值，则用该值去做小数部分计算
     */
    regularValue(row, prop, precision, currentValue) {
      console.log('1111', currentValue)
      let value = currentValue?.toString() || row[prop].toString()
      let index = value.indexOf('.')
      if (index !== -1) {
        if (value.slice(index + 1, value.length) == 0) {
          //全0小数部分
          row[prop] = value.slice(0, index)
        } else if (value.length - 1 - index > precision) {
          //小数部分超过指定精度
          row[prop] = value.slice(0, index + 1 + precision)
        } else {
          //末尾有几位0
          console.log('末尾有0')
          while (value.lastIndexOf('0') === value.length - 1) {
            value = value.slice(0, value.length - 1)
          }
          row[prop] = value
        }
      }
    }

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

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

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

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

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