整个项目中所有数字的千位角分隔符答案

【问题标题】：angular thousand separator for all numbers throughout project整个项目中所有数字的千位角分隔符
【发布时间】：2019-03-04 11:22:10
【问题描述】：

我正在使用 Angular 6 和 HTML 5 创建响应式网页。

我想格式化所有类型为“数字”的变量，以便显示的所有数字都有千位分隔符。

这就是我在每个数字上实现千位分隔符的方式：

const num = value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');

有没有一种方法，我只能指定一次这种格式，它可以自动用于每个“数字”格式变量，而不是在我显示的每个变量中都指定它？

【问题讨论】：

你想只显示带有千位分隔符的数字还是你也想改变模型？
您可以使用 Angular 管道来格式化数字。我认为它会起作用，但如果你想定义不同的功能，那么你可以使用自定义管道angular.io/guide/pipes

标签： angular html number-formatting separator

【解决方案1】：

你可以使用Angular内置的Decimal pipe

您也可以像这样编写自定义管道：

import { Pipe, PipeTransform }     from '@angular/core';

@Pipe({name: 'seprator'})
export class Seprator implements PipeTransform {
  
  constructor() {

  }

  transform(value: string, unit: string): string {

    if(value == undefined)
    {
        return '';
    }
    let n = parseInt(value);

    const rx =  /(\d+)(\d{3})/;
    return String(n).replace(/^\d+/, function (w) {
        var res = w;
        while (rx.test(res)) {
            res = res.replace(rx, '$1٬$2');
        }
        return res;
    });

  }
}

【讨论】：