架构师_程序员

查看: 361|回复: 0

[Angular] Angular 9 系列(五)格式化金额货币格式

[复制链接]
发表于 2020-6-4 10:47:28 | 显示全部楼层
Angular 9 系列(一)动态加载组件
https://www.itsvse.com/thread-9238-1-1.html

Angular 9 系列(二)动态组件传参
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 系列(三)订阅动态组件事件
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 系列(四)自定义 Pipe 管道
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 系列(五)格式化金额货币格式
https://www.itsvse.com/thread-9249-1-1.html

angular 框架自带将数字格式化为货币(currency)的管道,我一开始并不是在,所以,自己从网上找了一些资料,然后自己实现了一下,代码如下:

  1. import { Pipe, PipeTransform } from '@angular/core';
  2. const padding = '000000';

  3. @Pipe({
  4.   name: 'formatMoney'
  5. })
  6. export class FormatMoneyPipe implements PipeTransform {

  7.   private decimalSeparator: string;
  8.   private thousandsSeparator: string;
  9.   constructor() {
  10.     this.decimalSeparator = '.';
  11.     this.thousandsSeparator = ',';
  12.   }

  13.   transform(value: string, fractionSize: number = 0, prefix: string = '

  14. , suffix: string = ''): string {
  15.     if ( parseFloat(value) % 1 !== 0) {
  16.       fractionSize = 2;
  17.     }
  18.     let [ integer, fraction = ''] = (parseFloat(value).toString() || '').toString().split('.');
  19.     fraction = fractionSize > 0
  20.       ? this.decimalSeparator + (fraction + padding).substring(0, fractionSize) : '';
  21.     integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, this.thousandsSeparator);
  22.     if ( isNaN(parseFloat(integer)))
  23.     {
  24.           integer = '0';
  25.     }
  26.     return prefix + integer + fraction + suffix;
  27.   }
  28. }
复制代码

支持前缀和后缀。
我们其实可以直接用 CurrencyPipe 即可。

CurrencyPipe

把数字转换成金额字符串, 根据本地化规则进行格式化,这些规则会决定分组大小和分组分隔符、小数点字符以及其它与本地化环境有关的配置项。

输入值

value any

要格式化为货币的数字。

参数


currencyCode string ISO 4217 中的货币代码,比如 USD 表示美元,EUR 表示欧元。可以用 DEFAULT_CURRENCY_CODE 这个注入令牌来配置默认货币代码。可选. 默认值是 undefined.
display string | boolean 货币指示器的格式,有效值包括:code: 展示货币代码(如 USD)。symbol(default): 展示货币符号(如 $)。symbol-narrow: 使用区域的窄化符号,它包括两个符号。 比如,加拿大元的符号是 CA$,而其窄化符号是 $。如果该区域没有窄化符号,则使用它的标准符号。String: 使用指定的字符串值代替货币代码或符号。 比如,空字符串将会去掉货币代码或符号。Boolean(从 v5 开始已弃用):true 表示货币符号,false 表示货币代码。可选. 默认值是 'symbol'.
digitsInfo string 数字展现的选项,通过如下格式的字符串指定:{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}。minIntegerDigits:在小数点前的最小位数。默认为 1。minFractionDigits:小数点后的最小位数。默认为 0。maxFractionDigits:小数点后的最大为数,默认为 3。 如果没有提供,该数字就会根据 ISO 4217 规范进行适当的格式化。 比如,加拿大元具有 2 位数字,而智利比索则没有。可选. 默认值是 undefined.
locale string 要使用的本地化格式代码。 如果未提供,则使用 LOCALE_ID 的值,默认为 en-US。 参见为你的应用设置地区(locale)。可选. 默认值是 undefined.



效果图如下:

money.png





上一篇:Angular 9 系列(四)自定义 Pipe 管道
下一篇:css 层叠样式表之 var 函数
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:help@itsvse.com

QQ|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2020-10-28 07:41

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表