【JavaScript】数字处理工具（格式化数字、金额和百分比）

RumIV

已于 2024-07-10 14:27:01 修改

阅读量316

点赞数 3

分类专栏： JavaScript 文章标签： javascript 开发语言

于 2024-07-03 15:45:53 首次发布

本文链接：https://blog.csdn.net/qq_40205510/article/details/140154143

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

数字格式化

功能描述

formatNumber函数用于将数字或数字字符串格式化为指定精度的字符串形式。它支持设置是否使用千位分隔符、是否省略小数点后的零以及指定小数点后的精度。

参数说明

num: 需要格式化的数字或数字字符串。
precision: 小数点后的精度，默认为2。
omitTrailingZeros: 是否省略小数点后的零，默认为false。
useThousandSeparator: 是否使用千位分隔符，默认为true。

代码实现

/**
 * 格式化数字，支持千位分隔符、指定精度、去除末尾无效零
 * @param {number|string} num - 要格式化的数字
 * @param {number} precision - 小数点后保留的位数，默认为2
 * @param {boolean} omitTrailingZeros - 是否去除末尾的无效零，默认为false
 * @param {boolean} useThousandSeparator - 是否使用千位分隔符，默认为true
 * @returns {string} 格式化后的数字字符串
 */
const formatNumber = (num: number | string, precision = 2, omitTrailingZeros = false, useThousandSeparator = true): string => {
  num = convertToNumber(num);
  if (isNaN(num)) return "-";
  let numStr = num.toFixed(precision);
  if (useThousandSeparator) {
    numStr = formatWithThousandsSeparator(numStr);
  }
  if (omitTrailingZeros) {
    numStr = numStr.replace(/(\.\d*?[1-9])0+$|\.0*$/, "$1");
  }
  return numStr;
};

货币格式化函数

功能描述

formatCurrency函数用于将数字或数字字符串格式化为货币形式。它支持指定货币单位，并能根据数字的大小自动添加“亿”或“万”的单位。

参数说明

num: 需要格式化的数字或数字字符串。
unit: 货币单位，默认为“元”。

代码实现

/**
 * 格式化货币，自动转换为“万”或“亿”单位
 * @param {number|string} num - 要格式化的数字
 * @param {string} unit - 货币单位，默认为“元”
 * @returns {string} 格式化后的货币字符串
 */
const formatCurrency = (num: number | string, unit = "元"): string => {
  num = convertToNumber(num);
  if (isNaN(num)) return "-";
  let amount = "";
  if (Math.abs(num) >= 1000000000.0) {
    num /= 100000000.0;
    amount = "亿";
  } else if (Math.abs(num) >= 100000.0) {
    num /= 10000.0;
    amount = "万";
  }
  return formatWithThousandsSeparator(num.toFixed(2)) + " " + amount + unit;
};

百分比格式化

功能描述

formatPercent函数用于将数字或数字字符串格式化为百分比形式。

参数说明

num: 需要格式化的数字或数字字符串。
precision : 小数点后保留的位数，默认为2。

代码实现

/**
 * 格式化百分比，将数字转换为百分比形式
 * @param {number|string} num - 要格式化的数字
 * @param {number} precision - 小数点后保留的位数，默认为2
 * @returns {string} 格式化后的百分比字符串
 */
const formatPercent = (num: number | string, precision = 2): string => {
  num = convertToNumber(num);
  if (isNaN(num)) return "-";
  return (num * 100).toFixed(precision) + "%";
};

辅助函数

数字转换函数

用于将任意类型转换为数字类型。

/**
 * 将输入转换为数字，如果不是数字或字符串则返回NaN
 * @param {any} num - 输入值
 * @returns {number} 转换后的数字
 */
function convertToNumber(num: any): number {
  if (typeof num === "number") {
    return num;
  } else if (typeof num === "string") {
    return parseFloat(num);
  }
  return NaN;
}

千位分隔函数

用于给数字添加千位分隔符。

/**
 * 添加千位分隔符到数字字符串
 * @param {number|string} num - 数字或数字字符串
 * @returns {string} 添加分隔符后的字符串
 */
function formatWithThousandsSeparator(num: number | string): string {
  const n = typeof num === "number" ? num.toString() : num;
  if (isNaN(Number(n))) return "-";
  const [integer, decimal] = n.split(".");
  const reg = /\d{1,3}(?=(\d{3})+$)/g;
  const n1 = integer.replace(reg, "$&,");
  return decimal ? `${n1}.${decimal}` : n1;
}

使用示例

console.log(formatNumber(1234567.8910)); // "1,234,567.89"

console.log(formatNumber(1234567.8910, 4, true)); // "1,234,567.891"

console.log(formatCurrency(1234567890.1234)); // "12.35亿元"

console.log(formatPercent(0.1234)); // "12.34%"

完整代码

numberUtils.ts

/**
 * 格式化数字，支持千位分隔符、指定精度、去除末尾无效零
 * @param {number|string} num - 要格式化的数字
 * @param {number} precision - 小数点后保留的位数，默认为2
 * @param {boolean} omitTrailingZeros - 是否去除末尾的无效零，默认为false
 * @param {boolean} useThousandSeparator - 是否使用千位分隔符，默认为true
 * @returns {string} 格式化后的数字字符串
 */
const formatNumber = (num: number | string, precision = 2, omitTrailingZeros = false, useThousandSeparator = true): string => {
  num = convertToNumber(num);
  if (isNaN(num)) return "-";
  let numStr = num.toFixed(precision);
  if (useThousandSeparator) {
    numStr = formatWithThousandsSeparator(numStr);
  }
  if (omitTrailingZeros) {
    numStr = numStr.replace(/(\.\d*?[1-9])0+$|\.0*$/, "$1");
  }
  return numStr;
};

/**
 * 格式化货币，自动转换为“万”或“亿”单位
 * @param {number|string} num - 要格式化的数字
 * @param {string} unit - 货币单位，默认为“元”
 * @returns {string} 格式化后的货币字符串
 */
const formatCurrency = (num: number | string, unit = "元"): string => {
  num = convertToNumber(num);
  if (isNaN(num)) return "-";
  let amount = "";
  if (Math.abs(num) >= 1000000000.0) {
    num /= 100000000.0;
    amount = "亿";
  } else if (Math.abs(num) >= 100000.0) {
    num /= 10000.0;
    amount = "万";
  }
  return formatWithThousandsSeparator(num.toFixed(2)) + " " + amount + unit;
};

/**
 * 格式化百分比，将数字转换为百分比形式
 * @param {number|string} num - 要格式化的数字
 * @param {number} precision - 小数点后保留的位数，默认为2
 * @returns {string} 格式化后的百分比字符串
 */
const formatPercent = (num: number | string, precision = 2): string => {
  num = convertToNumber(num);
  if (isNaN(num)) return "-";
  return (num * 100).toFixed(precision) + "%";
};

/**
 * 将输入转换为数字，如果不是数字或字符串则返回NaN
 * @param {any} num - 输入值
 * @returns {number} 转换后的数字
 */
function convertToNumber(num: any): number {
  if (typeof num === "number") {
    return num;
  } else if (typeof num === "string") {
    return parseFloat(num);
  }
  return NaN;
}

/**
 * 添加千位分隔符到数字字符串
 * @param {number|string} num - 数字或数字字符串
 * @returns {string} 添加分隔符后的字符串
 */
function formatWithThousandsSeparator(num: number | string): string {
  const n = typeof num === "number" ? num.toString() : num;
  if (isNaN(Number(n))) return "-";
  const [integer, decimal] = n.split(".");
  const reg = /\d{1,3}(?=(\d{3})+$)/g;
  const n1 = integer.replace(reg, "$&,");
  return decimal ? `${n1}.${decimal}` : n1;
}

export { formatNumber, formatCurrency, formatPercent };