前端常见需求整理 - 数字格式化（加减乘除的精确运算、逗号分隔、随机数）

加法运算

// 加法运算，避免精度丢失
function numAdd(num1, num2) {
  let baseNum, baseNum1, baseNum2;
  let precision; // 精度
  try {
    baseNum1 = num1.toString().split(".")[1].length;
  } catch (e) {
    baseNum1 = 0;
  }
  try {
    baseNum2 = num2.toString().split(".")[1].length;
  } catch (e) {
    baseNum2 = 0;
  }
  baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
  precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2;
  return ((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(precision);
}

减法运算

// 减法运算，避免精度丢失
function numSub(num1, num2) {
  let baseNum, baseNum1, baseNum2;
  let precision; // 精度
  try {
    baseNum1 = num1.toString().split(".")[1].length;
  } catch (e) {
    baseNum1 = 0;
  }
  try {
    baseNum2 = num2.toString().split(".")[1].length;
  } catch (e) {
    baseNum2 = 0;
  }
  baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
  precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2;
  return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision);
}

乘法运算

// 乘法运算，避免精度丢失
function numMulti(num1, num2) {
  let baseNum = 0;
  try {
    baseNum += num1.toString().split(".")[1].length;
  } catch (e) {}
  try {
    baseNum += num2.toString().split(".")[1].length;
  } catch (e) {}
  return (Number(num1.toString().replace(".", "")) * Number(num2.toString().replace(".", ""))) / Math.pow(10, baseNum);
}

除法运算

// 除法运算，避免精度丢失
function numDiv(num1, num2) {
  let baseNum1 = 0;
  let baseNum2 = 0;
  let baseNum3, baseNum4;
  try {
    baseNum1 = num1.toString().split(".")[1].length;
  } catch (e) {
    baseNum1 = 0;
  }
  try {
    baseNum2 = num2.toString().split(".")[1].length;
  } catch (e) {
    baseNum2 = 0;
  }
  baseNum3 = Number(num1.toString().replace(".", ""));
  baseNum4 = Number(num2.toString().replace(".", ""));
  var x = baseNum3 / baseNum4;
  var y = Math.pow(10, baseNum2 - baseNum1);
  return this.numMulti(x, y);
}

去掉多余的零

/**
 * @description:  去掉double类型小数点后面多余的0
 * @param {*} num (要处理的字符串或double)
 * @return {*} num (没有多余零的小数或字符串)
 */
function handleCutZero(num) {
  let newstr = num
  // 小数部分长度
  let leng = num.length - num.indexOf('.') - 1
  // 判断是否需要处理（是否为小数）
  if (num.indexOf('.') > -1) {
    // 循环小数部分
    for (let i = leng; i > 0; i--) {
      // 如果处理的对象末尾有0
      if (newstr.lastIndexOf('0') > -1 && newstr.substr(newstr.length - 1, 1) == 0) {
        let k = newstr.lastIndexOf('0')
        // ① 如果小数点后只有一个0，去掉小数点，返回
        if (newstr.charAt(k - 1) == '.') {
          return newstr.substring(0, k - 1)
        } else {
          // ② 否则去掉一个0，继续循环
          newstr = newstr.substring(0, k)
        }
      } else {
        //如果末尾没有0
        return newstr
      }
    }
  }
  return num
}

// 例子
handleCutZero(123.000) -> 123
handleCutZero(123.0001) -> 123.0001
handleCutZero(10203000.0101000) -> 10203000.0101
handleCutZero(10203000) -> 10203000

单位转换

分转元

若值入为0或null，则输出值为0.00。若输入值为 undefined，则输出值为NaN。

<span>¥{{ (price / 100).toFixed(2) }}</span>

let a = (2 / 100).toFixed(2)          // 0.02
let b = (1032 / 100).toFixed(2)       // 10.32
let c = (0 / 100).toFixed(2)          // 0.00
let c = (0.1 / 100).toFixed(2)        // 0.00
let c = (null / 100).toFixed(2)       // 0.00
let c = (undefined / 100).toFixed(2)  // NaN

🐙 该方案要求被除数为整数类型，否则会导致精度丢失。

格式化距离

// 传入的数字单位为 km
formatDistanceStr(distance) {
  distance = distance || 0
  if (distance < 0.1) {
    distance = `${Number(distance * 1000).toFixed(0)}m`
  } else if (distance < 0.5) {
    distance = `${Number(distance * 1000).toFixed(0)}m`
  } else {
    distance = `${Number(distance).toFixed(1)}km`
  }
  return distance
}

console.log(this.formatDistanceStr(0.05))  // 50m
console.log(this.formatDistanceStr(0.5))   // 0.5km
console.log(this.formatDistanceStr(5))     // 5.0km
console.log(this.formatDistanceStr(50))    // 50.0km
console.log(this.formatDistanceStr(500))   // 500.0km

将数字转化为千分位逗号分隔

function formatCurrency(num) {
  return money.toString().replace(/(?=\B(?:\d{3})+\b)(\d{3}(?:\.\d+$)?)/g,',$1')
}

该方法小数位不变

// 将数字转化为千分位逗号分隔
export const formatCurrency = function(num) {
  if (!num) { return 0 }
  num = num.toString().replace(/\$|\,/g, '');
  if (isNaN(num)) {
    num = "0";
  }  
  let sign = (num == (num = Math.abs(num)));
  num = Math.floor(num * 100 + 0.50000000001);
  let cents = num % 100;
  num = Math.floor(num / 100).toString();
  if (cents < 10) {
    cents = "0" + cents;
  } 
  for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
      num = num.substring(0, num.length - (4 * i + 3)) + ',' +
      num.substring(num.length - (4 * i + 3));
  return (((sign) ? '' : '-') + num + '.' + cents);
}

该方法会保留两位小数

生成随机数

// 生成 32 位随机数，由数字和小写字母组成
export const getRandom = () => {
  const arr = [
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "a",
    "b",
    "c",
    "d",
    "e",
    "f",
    "g",
    "h",
    "i",
    "j",
    "k",
    "l",
    "m",
    "n",
    "o",
    "p",
    "q",
    "r",
    "s",
    "t",
    "u",
    "v",
    "w",
    "x",
    "y",
    "z",
  ];
  let num = "";
  for (var i = 0; i < 32; i++) {
    num += arr[parseInt(Math.random() * 36)];
  }
  return num;
};

获取整数和小数

可以将金额的整数/小数部分进行拆分，实现不同的样式效果；

根据 float > 0 判断金额是否有小数部分。

formatPrice(originPrice) {
  const price = this.$formatMoney(originPrice)
  if (price === 0) {
    return {
      integer: 0,
      float: 0
    }
  }
  if (!price) {
    return {
      integer: '',
      float: ''
    }
  }

  const [integer, float] = price.split('.')
  return {
    integer: integer || '',
    float: float || ''
  }
},

补充的话

在仓库，还提供了许多前端常见需求及实现的归纳整理，欢迎客官看看~

如果这篇笔记能够帮助到你，请帮忙在 github 上点亮 star，感谢！