CurrencyPipe

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

Transforms a number to a currency string, formatted according to locale rules that determine group sizing and separator, decimal-point character, and other locale-specific configurations.

{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}
      
      {{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}
    

NgModule

输入值

value any

要格式化为货币的数字。

The number to be formatted as currency.

参数

currencyCode string

ISO 4217 中的货币代码,比如 USD 表示美元,EUR 表示欧元。

The ISO 4217 currency code, such as USD for the US dollar and EUR for the euro.

可选. 默认值是 undefined.

display string | boolean

货币指示器的格式,有效值包括:

The format for the currency indicator. One of the following:

  • code: 展示货币代码(如 USD)。

    code: Show the code (such as USD).

  • symbol(default): 展示货币符号(如 $

    symbol(default): Show the symbol (such as $).

  • symbol-narrow: 使用区域的窄化符号,它包括两个符号。 比如,加拿大元的符号是 CA$,而其窄化符号是 $。如果该区域没有窄化符号,则使用它的标准符号。

    symbol-narrow: Use the narrow symbol for locales that have two symbols for their currency. For example, the Canadian dollar CAD has the symbol CA$ and the symbol-narrow $. If the locale has no narrow symbol, uses the standard symbol for the locale.

  • String: 使用指定的字符串值代替货币代码或符号。 比如,空字符串将会去掉货币代码或符号。

    String: Use the given string value instead of a code or a symbol. For example, an empty string will suppress the currency & symbol.

  • Boolean(从 v5 开始已弃用):true 表示货币符号,false 表示货币代码。

    Boolean (marked deprecated in v5): true for symbol and false for code.

可选. 默认值是 'symbol'.

digitsInfo string

数字展现的选项,通过如下格式的字符串指定:
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

Decimal representation options, specified by a string in the following format:
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.

  • minIntegerDigits:在小数点前的最小位数。默认为 1

    minIntegerDigits: The minimum number of integer digits before the decimal point. Default is 1.

  • minFractionDigits:小数点后的最小位数。默认为 0

    minFractionDigits: The minimum number of digits after the decimal point. Default is 2.

  • maxFractionDigits:小数点后的最大为数,默认为 3。 如果没有提供,该数字就会根据 ISO 4217 规范进行适当的格式化。 比如,加拿大元具有 2 位数字,而智利比索则没有。

    maxFractionDigits: The maximum number of digits after the decimal point. Default is 2. If not provided, the number will be formatted with the proper amount of digits, depending on what the ISO 4217 specifies. For example, the Canadian dollar has 2 digits, whereas the Chilean peso has none.

可选. 默认值是 undefined.

locale string

要使用的本地化格式代码。 如果未提供,则使用 LOCALE_ID 的值,默认为 en-US。 参见为你的应用设置地区(locale)

A locale code for the locale format rules to use. When not supplied, uses the value of LOCALE_ID, which is en-US by default. See Setting your app locale.

可选. 默认值是 undefined.

参见

使用说明

下列代码展示了该管道如何根据多种格式规范把数字转换成文本字符串, 这里使用的默认语言环境是 en-US

The following code shows how the pipe transforms numbers into text strings, according to various format specifications, where the caller's default locale is en-US.

@Component({ selector: 'currency-pipe', template: `<div> <!--output '$0.26'--> <p>A: {{a | currency}}</p> <!--output 'CA$0.26'--> <p>A: {{a | currency:'CAD'}}</p> <!--output 'CAD0.26'--> <p>A: {{a | currency:'CAD':'code'}}</p> <!--output 'CA$0,001.35'--> <p>B: {{b | currency:'CAD':'symbol':'4.2-2'}}</p> <!--output '$0,001.35'--> <p>B: {{b | currency:'CAD':'symbol-narrow':'4.2-2'}}</p> <!--output '0 001,35 CA$'--> <p>B: {{b | currency:'CAD':'symbol':'4.2-2':'fr'}}</p> <!--output 'CLP1' because CLP has no cents--> <p>B: {{b | currency:'CLP'}}</p> </div>` }) export class CurrencyPipeComponent { a: number = 0.259; b: number = 1.3495; }
      
      
  1. @Component({
  2. selector: 'currency-pipe',
  3. template: `<div>
  4. <!--output '$0.26'-->
  5. <p>A: {{a | currency}}</p>
  6.  
  7. <!--output 'CA$0.26'-->
  8. <p>A: {{a | currency:'CAD'}}</p>
  9.  
  10. <!--output 'CAD0.26'-->
  11. <p>A: {{a | currency:'CAD':'code'}}</p>
  12.  
  13. <!--output 'CA$0,001.35'-->
  14. <p>B: {{b | currency:'CAD':'symbol':'4.2-2'}}</p>
  15.  
  16. <!--output '$0,001.35'-->
  17. <p>B: {{b | currency:'CAD':'symbol-narrow':'4.2-2'}}</p>
  18.  
  19. <!--output '0 001,35 CA$'-->
  20. <p>B: {{b | currency:'CAD':'symbol':'4.2-2':'fr'}}</p>
  21.  
  22. <!--output 'CLP1' because CLP has no cents-->
  23. <p>B: {{b | currency:'CLP'}}</p>
  24. </div>`
  25. })
  26. export class CurrencyPipeComponent {
  27. a: number = 0.259;
  28. b: number = 1.3495;
  29. }