前端人民币格式化的方法还有哪些

除了使用 Intl.NumberFormat 外，还有其他几种方法可以进行人民币的格式化。以下是几种常见的实现方式：

1. 使用 toLocaleString

toLocaleString 是一个相对简单的方法，可以用来格式化数字。与 Intl.NumberFormat 类似，它也支持本地化格式。

function formatMoney(money, decimals = 2) {
    
    
  return money.toLocaleString('zh-CN', {
    
    
    style: 'currency',
    currency: 'CNY',
    minimumFractionDigits: decimals,
    maximumFractionDigits: decimals,
  });
}

console.log(formatMoney(12341234.2, 2)); // ¥12,341,234.20

2. 自定义格式化函数

如果你需要更灵活的控制，可以编写一个自定义的格式化函数。这种方法可以满足一些特殊的需求，例如自定义千位分隔符或小数点。

function formatMoneyCustom(money, decimals = 2) {
    
    
  const parts = money.toFixed(decimals).split('.');
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  return '¥' + parts.join('.');
}

console.log(formatMoneyCustom(12341234.2, 2)); // ¥12,341,234.20
console.log(formatMoneyCustom(12341234.246, 1)); // ¥12,341,234.2
console.log(formatMoneyCustom(12341234.035, 2)); // ¥12,341,234.04
console.log(formatMoneyCustom(12341234.045, 2)); // ¥12,341,234.05
console.log(formatMoneyCustom(12341234.12335, 4)); // ¥12,341,234.1234
console.log(formatMoneyCustom(12341234.12345, 4)); // ¥12,341,234.1235

3. 使用第三方库（如 accounting.js）

第三方库如 accounting.js 可以简化数字格式化工作，提供更丰富的功能和更好的兼容性。

首先，需要引入 accounting.js：

<script src="https://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.min.js"></script>

然后使用以下代码进行格式化：

function formatMoneyUsingLibrary(money, decimals = 2) {
    
    
  return accounting.formatMoney(money, '¥', decimals);
}

console.log(formatMoneyUsingLibrary(12341234.2, 2)); // ¥12,341,234.20
console.log(formatMoneyUsingLibrary(12341234.246, 1)); // ¥12,341,234.2
console.log(formatMoneyUsingLibrary(12341234.035, 2)); // ¥12,341,234.04
console.log(formatMoneyUsingLibrary(12341234.045, 2)); // ¥12,341,234.05
console.log(formatMoneyUsingLibrary(12341234.12335, 4)); // ¥12,341,234.1234
console.log(formatMoneyUsingLibrary(12341234.12345, 4)); // ¥12,341,234.1235

4. 在 Vue.js 中应用

在 Vue.js 中，可以将上述任何一种方法集成到组件中。以下是使用自定义格式化函数的示例：

<template>
  <div>
    <p>{
   
   { formattedMoney }}</p>
  </div>
</template>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      money: 12341234.2,
      decimals: 2,
      formattedMoney: '',
    };
  },
  methods: {
      
      
    formatMoneyCustom(money, decimals = 2) {
      
      
      const parts = money.toFixed(decimals).split('.');
      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      return '¥' + parts.join('.');
    },
  },
  mounted() {
      
      
    this.formattedMoney = this.formatMoneyCustom(this.money, this.decimals);
  },
};
</script>

这样，你可以根据具体需求选择合适的方法来格式化人民币。