填写这份《一分钟调查》，帮我们（开发组）做得更好！去填写Home
API 参考手册
API > @angular/common

PercentPipe

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

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

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

NgModule

输入值

value any

要格式化为百分比的数字。

The number to be formatted as a percentage.

参数

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

可选. 默认值是 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: 'percent-pipe', template: `<div> <!--output '26%'--> <p>A: {{a | percent}}</p> <!--output '0,134.950%'--> <p>B: {{b | percent:'4.3-5'}}</p> <!--output '0 134,950 %'--> <p>B: {{b | percent:'4.3-5':'fr'}}</p> </div>` }) export class PercentPipeComponent { a: number = 0.259; b: number = 1.3495; }
      
      @Component({
  selector: 'percent-pipe',
  template: `<div>
    <!--output '26%'-->
    <p>A: {{a | percent}}</p>

    <!--output '0,134.950%'-->
    <p>B: {{b | percent:'4.3-5'}}</p>

    <!--output '0 134,950 %'-->
    <p>B: {{b | percent:'4.3-5':'fr'}}</p>
  </div>`
})
export class PercentPipeComponent {
  a: number = 0.259;
  b: number = 1.3495;
}