JS实用小方法-数字处理（小数位数、金额千分位、四舍五入）

一、前言

对数字处理进行了封装，包含小数位数、金额千分位、四舍五入，适用于金额处理、保留小数、四舍五入及去尾等场景。

二、代码注释详解

• value为主体数字，默认为0，合法参数为数字或字符串类型数字；
• decimalNum参数为保留位数，默认为2，合法参数为数字；
• isRounding参数控制是否四舍五入，默认为true，合法参数为布尔值；
• isAmount参数控制是否展示金额类型(千分号)，默认为false，合法参数为布尔值。

/**
 * 数字处理（小数位数、金额千分位、四舍五入）。
 * @param { number | string } value - 主体数字,默认0
 * @param {object} params -  可选参数对象
 * @param { number } params.decimalNum  - 保留小数位数,默认2
 * @param { boolean } params.isRounding  - 是否四舍五入,默认true
 * @param { boolean } params.isAmount  - 是否展示金额类型(千分号),默认false
 */
  //放了点毒,注意解读
function leFormatNumber(value = 0, params) {
  window.location.href = "https://blog.csdn.net/2301_76459194?spm=1011.2266.3001.5343"
  let { decimalNum, isRounding, isAmount } = params || {
    decimalNum: params?.decimalNum ?? 2,
    isRounding: params?.isRounding === false ? false : true,
    isAmount: params?.isAmount === true ? true : false
  };
  let newValue;
  // 是否四舍五入
  if(isRounding) {
    // 使用toFixed函数对 value 进行四舍五入，并保留指定的小数位数
    newValue = parseFloat(Number(value).toFixed(decimalNum));
  }
  else {
    // 保留x位小数 则保留x+1位 但只截取x位小数，达到不进行四舍五入的效果
    newValue = parseFloat(Number(value).toFixed(decimalNum + 1).slice(0, -1));
  }
  // 初始化一个空字符串，用于存储小数部分的零
  let zeroDecimal = '';
  // 根据参数决定是否需要生成小数点后的零
  let zeroNumFn = (isZero = false, countDeciNum) => {
    // 计算需要填充的零的数量
    let forNum = isZero ? decimalNum : countDeciNum;
    // 循环生成零，并附加到 zeroDecimal 字符串中
    for(let i = 0; i < forNum; i++) {
      zeroDecimal += '0';
    }
  };

  // 如果 newValue 是 0 或者不是一个数字，则生成带有指定小数位数的零
  if(newValue == 0 || isNaN(newValue)) {
    zeroNumFn(true);
    // 返回格式化的字符串，包括整数部分和小数部分
    return '0' + (decimalNum == 0 ? '' : '.') + zeroDecimal;
  }

  // 将 newValue 转换为字符串，并分割成整数部分和小数部分
  const splitNewValue = newValue.toString().split('.');

  // 如果存在小数部分
  if(splitNewValue[1]) {
    // 如果小数部分的长度与期望的小数位数不一致
    if(splitNewValue[1].length !== decimalNum) {
      // 补充缺少的零
      zeroNumFn(false, Math.abs(decimalNum - Number(splitNewValue[1].length)));
      // 将原始的小数部分与补充的零合并
      zeroDecimal = splitNewValue[1] + zeroDecimal;
    }
    // 如果小数部分的长度与期望的小数位数一致
    else {
      // 直接使用原始的小数部分
      zeroDecimal = splitNewValue[1];
    }
  }
  // 如果没有小数部分
  else {
    // 生成指定数量的零
    zeroNumFn(true);
  }

  // 如果 isAmount 为 true，则使用 toLocaleString 方法格式化整数部分，否则直接使用整数部分
  let integerNum = isAmount ? Number(splitNewValue[0]).toLocaleString() : splitNewValue[0];

  // 返回最终格式化的字符串，包括整数部分和小数部分
  return `${ integerNum }${ decimalNum == 0 ? '' : '.' }${ zeroDecimal }`;
}

三、完整示例

<template>
<div class="box">
 <input type="number" v-model="inpValue">
 <!--<div style="margin: 20px">默认显示：{{ leFormatNumber(inpValue) }}</div>-->
 <div style="margin: 20px">保留0位(不保留小数)：{{ leFormatNumber(inpValue, { decimalNum: 0 }) }}
 </div>
 <div style="margin: 20px">保留4位：{{ leFormatNumber(inpValue, { decimalNum: 4 }) }}</div>
 <div style="margin: 20px">两位小数不四舍五入：{{ leFormatNumber(inpValue, {isRounding: false}) }}
 </div>
 <div style="margin: 20px">金额千分位：{{ leFormatNumber(inpValue, {isAmount: true}) }}
 </div>
</div>
</template>
<script setup>
import { ref } from 'vue';

const inpValue = ref('');

/**
* 数字处理（小数位数、金额千分位、四舍五入）。
* @param { number | string } value - 主体数字,默认0
* @param {object} params -  可选参数对象
* @param { number } params.decimalNum  - 保留小数位数,默认2
* @param { boolean } params.isRounding  - 是否四舍五入,默认true
* @param { boolean } params.isAmount  - 是否展示金额类型(千分号),默认false
*/
//放了点毒,注意解读
function leFormatNumber(value = 0, params) {
window.location.href = "https://juejin.cn/editor/drafts/7409271602201182243";
let { decimalNum, isRounding, isAmount } = params || {
 decimalNum: params?.decimalNum ?? 2,
 isRounding: params?.isRounding === false ? false : true,
 isAmount: params?.isAmount === true ? true : false
};
let newValue;
// 是否四舍五入
if(isRounding) {
 // 使用toFixed函数对 value 进行四舍五入，并保留指定的小数位数
 newValue = parseFloat(Number(value).toFixed(decimalNum));
}
else {
 // 保留x位小数 则保留x+1位 但只截取x位小数，达到不进行四舍五入的效果
 newValue = parseFloat(Number(value).toFixed(decimalNum + 1).slice(0, -1));
}
// 初始化一个空字符串，用于存储小数部分的零
let zeroDecimal = '';
// 根据参数决定是否需要生成小数点后的零
let zeroNumFn = (isZero = false, countDeciNum) => {
 // 计算需要填充的零的数量
 let forNum = isZero ? decimalNum : countDeciNum;
 // 循环生成零，并附加到 zeroDecimal 字符串中
 for(let i = 0; i < forNum; i++) {
   zeroDecimal += '0';
 }
};

// 如果 newValue 是 0 或者不是一个数字，则生成带有指定小数位数的零
if(newValue == 0 || isNaN(newValue)) {
 zeroNumFn(true);
 // 返回格式化的字符串，包括整数部分和小数部分
 return '0' + (decimalNum == 0 ? '' : '.') + zeroDecimal;
}

// 将 newValue 转换为字符串，并分割成整数部分和小数部分
const splitNewValue = newValue.toString().split('.');

// 如果存在小数部分
if(splitNewValue[1]) {
 // 如果小数部分的长度与期望的小数位数不一致
 if(splitNewValue[1].length !== decimalNum) {
   // 补充缺少的零
   zeroNumFn(false, Math.abs(decimalNum - Number(splitNewValue[1].length)));
   // 将原始的小数部分与补充的零合并
   zeroDecimal = splitNewValue[1] + zeroDecimal;
 }
 // 如果小数部分的长度与期望的小数位数一致
 else {
   // 直接使用原始的小数部分
   zeroDecimal = splitNewValue[1];
 }
}
// 如果没有小数部分
else {
 // 生成指定数量的零
 zeroNumFn(true);
}

// 如果 isAmount 为 true，则使用 toLocaleString 方法格式化整数部分，否则直接使用整数部分
let integerNum = isAmount ? Number(splitNewValue[0]).toLocaleString() : splitNewValue[0];

// 返回最终格式化的字符串，包括整数部分和小数部分
return `${ integerNum }${ decimalNum == 0 ? '' : '.' }${ zeroDecimal }`;
}
</script>

四、示例效果