API 参考手册
API > @angular/common

DecimalPipe

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

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

查看"说明"...

{{ value_expression | number [ : digitsInfo [ : locale ] ] }}
      
      {{ value_expression | number [ : digitsInfo [ : locale ] ] }}

NgModule

输入值

value any

要格式化的数字。

The number to be formatted.

参数

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 0.

  • maxFractionDigits：小数点后的最大为数，默认为 3。

    maxFractionDigits: The maximum number of digits after the decimal point. Default is 3.

可选. 默认值是 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.

参见

说明

如果没有指定参数，则该函数会使用这个舍入方法。 但其行为与 JavaScript 的 Math.round() 函数不同。 下面的例子展示了管道与 Math.round() 的对比：

If no parameters are specified, the function rounds off to the nearest value using this rounding method. The behavior differs from that of the JavaScript Math.round() function. In the following case for example, the pipe rounds down where Math.round() rounds up:

-2.5 | number:'1.0-0' > -3 Math.round(-2.5) > -2
      
      -2.5 | number:'1.0-0'
> -3
Math.round(-2.5)
> -2

使用说明

下列代码展示了该管道如何根据多种格式规范来把数字转换成字符串，这里使用的默认语言环境是 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.

例子

Example

@Component({ selector: 'number-pipe', template: `<div> <!--output '2.718'--> <p>e (no formatting): {{e | number}}</p> <!--output '002.71828'--> <p>e (3.1-5): {{e | number:'3.1-5'}}</p> <!--output '0,002.71828'--> <p>e (4.5-5): {{e | number:'4.5-5'}}</p> <!--output '0 002,71828'--> <p>e (french): {{e | number:'4.5-5':'fr'}}</p> <!--output '3.14'--> <p>pi (no formatting): {{pi | number}}</p> <!--output '003.14'--> <p>pi (3.1-5): {{pi | number:'3.1-5'}}</p> <!--output '003.14000'--> <p>pi (3.5-5): {{pi | number:'3.5-5'}}</p> <!--output '-3' / unlike '-2' by Math.round()--> <p>-2.5 (1.0-0): {{-2.5 | number:'1.0-0'}}</p> </div>` }) export class NumberPipeComponent { pi: number = 3.14; e: number = 2.718281828459045; }
      
      
  1. @Component({
  2.   selector: 'number-pipe',
  3.   template: `<div>
  4.     <!--output '2.718'-->
  5.     <p>e (no formatting): {{e | number}}</p>
  6.     
  7.     <!--output '002.71828'-->
  8.     <p>e (3.1-5): {{e | number:'3.1-5'}}</p>
  9.  
  10.     <!--output '0,002.71828'-->
  11.     <p>e (4.5-5): {{e | number:'4.5-5'}}</p>
  12.     
  13.     <!--output '0 002,71828'-->
  14.     <p>e (french): {{e | number:'4.5-5':'fr'}}</p>
  15.  
  16.     <!--output '3.14'-->
  17.     <p>pi (no formatting): {{pi | number}}</p>
  18.     
  19.     <!--output '003.14'-->
  20.     <p>pi (3.1-5): {{pi | number:'3.1-5'}}</p>
  21.  
  22.     <!--output '003.14000'-->
  23.     <p>pi (3.5-5): {{pi | number:'3.5-5'}}</p>
  24.  
  25.     <!--output '-3' / unlike '-2' by Math.round()-->
  26.     <p>-2.5 (1.0-0): {{-2.5 | number:'1.0-0'}}</p>
  27.   </div>`
  28. })
  29. export class NumberPipeComponent {
  30.   pi: number = 3.14;
  31.   e: number = 2.718281828459045;
  32. }