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 ] ] }}

输入值

valueany

The number to be formatted.

要格式化的数字。

参数

digitsInfostring

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

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

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

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

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

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

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

    maxFractionDigits:小数点后的最大为数,默认为 3

可选. 默认值是 undefined.

localestring

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.

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

可选. 默认值是 undefined.

参见

说明

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:

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

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

使用说明

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.

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