js将数字金额用符号间隔Vue三位一隔

用VUE开发财务系统，金额几千上万数字不好区分，需要实现金额三位一隔，每三位用逗号或其他符号隔开。

金额三位间隔函数：

// 金额三位间隔
export const interval = (key) => {
  key += '';
  let x = key.split('.');
  let x1 = x[0];
  let x2 = x.length > 1 ? '.' + x[1] : '';
  let reg = /(\d+)(\d{3})/;
  while (reg.test(x1)) {
    x1 = x1.replace(reg, '$1' + ',' + '$2');
  }
  return x1 + x2;
}

x1是小数点之前的，x2是小数点之后的间隔（保留两位数时不需要）。用逗号隔开，也可以使用空格、-等间隔。正则中3是三位间隔，想银行卡四位间隔就改为4，也可以把参数改为动态通过传值实现。

VUE使用先引入：

import { interval } from '@A/resource/Utils';
this.info.price = interval(this.info.price);

循环显示金额数据时在methods写入：

methods: {
  interval(val){
    return interval(val)
  }
}

标签中直接使用：

<div v-for="(item, index) in list" :key="index">
  <span>￥{{ interval(item.price) }}</span>
</div>