Angular:用逗号格式化数字

时间:2017-07-05 14:38:04

标签: javascript angular typescript

标题非常总结了我的需求。

123456789 => 123,456,789
12345 => 12,345

获得此转换的最佳方式是什么?不要在Angular-2中建议货币管道,因为我不需要$或货币符号作为我的输出的前缀。

4 个答案:

答案 0 :(得分:27)

像这样使用DecimalPipe

{{attr | number}}

Working Plunker

https://angular.io/api/common/DecimalPipe

提供的文件

答案 1 :(得分:4)



function printNo() {
  document.getElementById('text').innerHTML =
  Number(1234355).toLocaleString('en-GB');
}

 <!DOCTYPE html>
 <html>
    <head></head>
    
     <body onload="printNo()">
      <h1 id="text"></h1>
        
     </body>
</html>
&#13;
&#13;
&#13;

Reference link

答案 2 :(得分:3)

不使用管道,用javascript回答问题的简单方法:

var str = "The quick brown fox jumps over the lazy dogs.".replace(/(.{2})/g,"$1,");

这将输出Th,e ,qu,ic,k ,br,ow,n ,fo,x ,ju,mp,s ,ov,er, t,he, l,az,y ,do,gs,.

但我认为你的问题很糟糕,所以,如果你想解析数字,你应该使用这个函数:

function numberWithCommas(x) {
    var parts = x.toString().split(".");
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return parts.join(".");
}

所以

var num = numberWithCommas(1234567);
console.log(num);

这将输出1,234,567

答案 3 :(得分:1)

CodeWarrior在管道上的答案非常适合前端显示。如果您的号码易于隔离并插入HTML中,则建议使用。有时候,在组装一些东西进行显示之前,在Typescript / Javascript中获取格式化的数字会更加方便。

对于Angular中的打字稿,@ angular / common中的Out of the box, Create React App only supports overriding these Jest options: • clearMocks • collectCoverageFrom • coveragePathIgnorePatterns • coverageReporters • coverageThreshold • displayName • extraGlobals • globalSetup • globalTeardown • moduleNameMapper • resetMocks • resetModules • restoreMocks • snapshotSerializers • transform • transformIgnorePatterns • watchPathIgnorePatterns. These options in your package.json Jest configuration are not currently supported by Create React App: • moduleDirectories If you wish to override other Jest options, you need to eject from the default setup. You can do so by running npm run eject but remember that this is a one-way operation. You may also file an issue with Create React App to discuss supporting more options out of the box. 将逗号分隔。用formatNumber()作为字符串“ 12345”:

num

将产生“ 12,345”作为另一个字符串。显然,不同的语言环境会以不同的格式设置数字格式(“ en-US”使用“,”和“。”),并且digitsInfo的第三个选项可以定义是否要使用小数(“ 1.0-0”表示在“之前”的一位数字)。 ',之后为零。

您将需要使用以下格式导入formatNumber

formatNumber(Number(num), 'en-US', '1.0-0')

文档https://angular.io/api/common/formatNumber