JS-封装函数获取数字精度、格式化数字精度

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

前言

数字精度，其实就是数字的小数位数。

前端免不了和用户输入的数字打交道，尤其是规范用户输入数字的精度，也是经常碰到。

处理起来并不困难，但是随着使用次数的增加，不免想要将其封装成函数，需要的使用直接调用即可。

个人思路，如有遗漏或者错误，还请各位大佬指正。

获取数字精度

思路：

1. 函数接受一个参数，该参数 num 类型为 Number;
2. 然后判断参数是否为数字，不是则返回 0;
3. 将数字转换为字符串，可以方便的获取小数点的位置和数字的长度；
4. 判断小数点是否存在，如果存在，则小数位数等于：数字的长度 - (小数的位置索引 + 1)；

/**
 * 获取数字精度
 * @param { Number } num 获取精度的数字
 * @return { Number }
 */
function getNumberPrecision (num) {
  // 如果不是数字，则返回 零
  if (isNaN(num)) return 0
  // 将数字转换为字符串，方便后续的计算
  const numToString = num.toString()
  // 获取小数点的位置
  const dotPosition = numToString.indexOf('.')
  // 判断是否存在小数点，不存在就返回零，存在就返回小数的位数
  return dotPosition === -1 ? 0 : numToString.length - dotPosition - 1
}

格式化数字精度

格式化，其实就是数字规范化，保留指定的小数位数，其余舍去。

JavaScript 中的 toFixed 函数其实就已经实现了该功能，但是并不完美，有两个缺点：1. 数字会自动被四舍五入；2. 会返回字符串，而不是数字。

还是自己手写比较符合个人的使用场景，基本思路如下：

1. 参数中必须有一个代表原始数据num，还有保留的小数位数precision，最后一个是保留的方式（四舍五入，向上取整，向下取整）;
2. 根据保留的方式，从 Math 对象中获取对应的函数 formatFun；
3. 进行判断，看看各个条件、参数是否符合要求；
4. 把数字的小数点向后移动的指定的位数 precision, 然后调用 formatFun 进行取整操作，最后把小数点向右移动指定的位数；

/**
 * 保留指定的小数位数
 * @param { Number } num 需要处理的数字
 * @param { Number } precision 需要保留的小数位数
 * @param { 'round' | 'ceil' | 'floor' } retention 小数边界处理，四舍五入('round')，向上取整('ceil')，向下取整('floor')，默认四舍五入
 * @return { Number }
 */
function formatNumberPrecision (num, precision = 2, retention = 'round') {
  const formatFun = Math[retention]
  if (isNaN(num) || isNaN(precision) || !formatFun) {
    return num
  }
  return formatFun(num * Math.pow(10, precision)) / Math.pow(10, precision)
}
``