javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript金额格式化

JavaScript实现金额格式化(元转成万元)的示例代码

作者:蜡台

这篇文章主要为大家详细介绍了在JavaScript中将金额转换为万元单位的几种方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

在JavaScript中,将金额转换为以万元(10,000元)为单位显示,可以通过将金额除以10,000来实现。下面是一些示例代码,展示如何完成这个转换。

直接除法

function convertToTenThousand(amount) {
 return amount / 10000;
}

// 示例
const amount = 123456; // 金额,单位为元
const wan = convertToTenThousand(amount);
console.log(wan); // 输出:12.3456

使用toFixed()方法格式化输出 如果你希望输出的结果保留特定的小数位数(例如两位小数),可以使用toFixed()方法。

function convertToTenThousandWithFixed(amount) {
 return (amount / 10000).toFixed(2);
}

// 示例
const amount = 123456; // 金额,单位为元
const wan = convertToTenThousandWithFixed(amount);
console.log(wan); // 输出:12.35

使用Number.prototype.toLocaleString()方法格式化输出 如果你想要更符合人类阅读习惯的数字格式(例如,使用逗号分隔千位),可以使用toLocaleString()方法。

function convertToTenThousandFormatted(amount) {
 const tenThousandAmount = amount / 10000;
 return tenThousandAmount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

// 示例
const amount = 123456; // 金额,单位为元
const wan = convertToTenThousandFormatted(amount);
console.log(wan); // 输出:12.35(在某些地区,可能会显示为12,35)

使用Intl.NumberFormat进行国际化格式化 这是处理数字格式化的另一种现代方法,它提供了更好的国际化和本地化支持。

function convertToTenThousandIntl(amount) {
 const formatter = new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY', minimumFractionDigits: 2, maximumFractionDigits: 2 });
 return formatter.format(amount / 10000);
}

// 示例
const amount = 123456; // 金额,单位为元
const wan = convertToTenThousandIntl(amount);
console.log(wan); // 输出:¥12,345.60(具体格式可能根据浏览器的语言设置而有所不同)

注意:使用Intl.NumberFormat时,如果你想直接表示为“万元”,可能需要自定义货币符号或者不使用货币格式,因为标准的货币格式通常不包括“万元”的概念。如果要精确表示为“万元”,可以这样:

function convertToTenThousandCustom(amount) {
 const formatter = new Intl.NumberFormat('zh-CN', { style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2 });
 return formatter.format(amount / 10000) + '万'; // 手动添加“万”字
}

// 示例
const amount = 123456; // 金额,单位为元
const wan = convertToTenThousandCustom(amount);
console.log(wan); // 输出:12.35万(在某些地区,可能会显示为12,35万)

这样,你可以根据需要将金额转换为以万元为单位,并且可以根据需要格式化输出。

附带单位格式化金额方法

/**
 * 格式化金额
 * @param amount {string | number}
 * @return {{num: number, unit: string}}
 */
export function formatMoney(amount) {
  // 金额单位
  let units = ["元", "万元", "亿", "兆", '京', '垓', '杼']
  // 数字金额转为字符串
  let strnum = amount.toString()
  // 声明一个变量用于接收金额单位
  let unit = ''
  // 循环遍历单位数组
  units.find((item, index) => {
    let newNum = ''
    // 判断金额是否包含小数点
    if (strnum.indexOf('.') !== -1) {
      // 将小数点前的字符截取出来
      newNum = strnum.substring(0, strnum.indexOf('.'))
    } else {
      newNum = strnum
    }
    // 判断小数点截取后的金额字符长度是否小于5
    if (newNum.length < 5) {
      // 小于5则接收当前单位,并跳出迭代
      unit = item
      return true
    } else {
      // 不小于5则将经过小数点截取处理过后的字符除以10000后作为下一轮迭代的初始金额重新判断(每一个单位之间相距4位数,故除以10000)
      strnum = (newNum * 1 / 10000).toString()
    }
  })
  let money = {num: 0, unit: ""}
  // 保留2位小数
  money.num = (strnum * 1).toFixed(2)
  // 接收单位
  money.unit = unit
  return money;
}

方法补充

在 JavaScript 中,将金额从“元”转换为“万元”,同时保留适当的精度并添加千分位分隔符,是一个常见的需求。下面给出一个通用且健壮的实现。

基础版:元转万元,保留两位小数

function yuanToWan(amount) {
  if (isNaN(amount)) return '0.00';
  const wan = amount / 10000;
  return wan.toFixed(2);
}

用法:

yuanToWan(123456);      // "12.35"
yuanToWan(10000);       // "1.00"
yuanToWan(9999);        // "0.9999" -&gt; toFixed(2) =&gt; "1.00"? 实际是 "1.00"(因为四舍五入)

进阶版:保留小数位、千位分隔符、负数处理

/**
 * 将金额(元)格式化为万元,支持千分位分隔符、自定义小数位数、负数处理
 * @param {number|string} amount 金额(元)
 * @param {number} digits 保留的小数位数,默认2
 * @param {boolean} useSeparator 是否添加千分位分隔符,默认false
 * @returns {string} 格式化后的字符串
 */
function yuanToWanFormat(amount, digits = 2, useSeparator = false) {
  let num = parseFloat(amount);
  if (isNaN(num)) return '0.00';

  // 转换为万元
  let wan = num / 10000;
  
  // 处理精度(四舍五入)
  const factor = Math.pow(10, digits);
  wan = Math.round(wan * factor) / factor;

  // 分割整数部分和小数部分
  let [integerPart, decimalPart] = wan.toFixed(digits).split('.');
  
  // 添加千分位分隔符
  if (useSeparator) {
    integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  }
  
  // 组合结果
  return decimalPart !== undefined ? `${integerPart}.${decimalPart}` : integerPart;
}

使用示例

console.log(yuanToWanFormat(123456.78, 2, true));   // "12.35" -&gt; 千分位无效果,因为整数部分不足4位
console.log(yuanToWanFormat(12345678, 2, true));    // "1,234.57"
console.log(yuanToWanFormat(5000, 1, false));       // "0.5"
console.log(yuanToWanFormat(-123456, 2, true));     // "-12.35"
console.log(yuanToWanFormat('abc', 2));             // "0.00"

完整版:支持自定义单位(万能工具)

有时不仅要万元,可能还要百万元、亿元,我们可以实现一个通用函数:

/**
 * 金额单位转换(元 → 目标单位)
 * @param {number} amount 元
 * @param {number} unitRatio 目标单位对应的元数,如万元=10000,亿元=100000000
 * @param {object} options 格式化选项
 * @returns {string}
 */
function formatAmount(amount, unitRatio = 10000, options = {}) {
  const {
    digits = 2,
    useSeparator = true,
    suffix = '万'   // 单位后缀
  } = options;
  let num = parseFloat(amount);
  if (isNaN(num)) return '0' + suffix;
  let val = num / unitRatio;
  // 四舍五入
  val = Math.round(val * Math.pow(10, digits)) / Math.pow(10, digits);
  let [intPart, decPart] = val.toFixed(digits).split('.');
  if (useSeparator) {
    intPart = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  }
  const result = decPart ? `${intPart}.${decPart}` : intPart;
  return `${result}${suffix}`;
}
console.log(formatAmount(12345678, 10000, { suffix: '万', useSeparator: true })); // "1,234.57万"
console.log(formatAmount(12345678, 100000000, { suffix: '亿', digits: 2 }));     // "0.12亿"

注意事项

到此这篇关于JavaScript实现金额格式化(元转成万元)的示例代码的文章就介绍到这了,更多相关JavaScript金额格式化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文