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

Posted 2023-04-13

【中文标题】整个项目中所有数字的千位角分隔符

【英文标题】：angular thousand separator for all numbers throughout project

【发布时间】：2019-03-04 11:22:10

【问题描述】：

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

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

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

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

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

【问题讨论】：

你想只显示带有千位分隔符的数字还是你也想改变模型？

您可以使用 Angular 管道来格式化数字。我认为它会起作用，但如果你想定义不同的功能，那么你可以使用自定义管道angular.io/guide/pipes

【参考方案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+)(\d3)/;
    return String(n).replace(/^\d+/, function (w) 
        var res = w;
        while (rx.test(res)) 
            res = res.replace(rx, '$1٬$2');
        
        return res;
    );