Angular 10 formatNumber() 方法

在本文中，我们将了解 Angular 10 中的 formatNumber 是什么以及如何使用它。

formatNumber用于根据我们的要求以十进制形式格式化数字。

句法：

formatNumber(value, locale, digitsInfo)

参数：

• value：要格式化的数字。
• locale：区域设置格式的区域设置代码。
• digitsInfo：十进制表示选项。

返回值：

• 字符串：格式化的文本字符串。

NgModule： formatNumber 使用的模块是：

• 通用模块

方法：

• 创建要使用的 Angular 应用程序。
• 在 app.module.ts 中导入 LOCALE_ID，因为我们需要导入语言环境以使用 get formatNumber。

  import { LOCALE_ID, NgModule } from '@angular/core';

• 在 app.component.ts 中导入 formatNumber 和 LOCALE_ID
• 注入 LOCALE_ID 作为公共变量。
• 在 app.component.html 中使用字符串插值显示局部变量
• 使用 ng serve 为 Angular 应用程序提供服务以查看输出。

示例 1：

app.component.ts

import {
  formatNumber
 }
  from '@angular/common';
  
import {Component,
  Inject,
  LOCALE_ID }
  from '@angular/core';
  
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
curr = formatNumber(1000,this.locale,
          '7.1-5');
constructor(
  @Inject(LOCALE_ID) public locale: string,){}
}

app.component.html

  GeeksforGeeks

  
Locale Number is : {{curr}}

输出：

示例 2：

app.component.ts

import {
  formatNumber
 }
  from '@angular/common';
  
import {Component,
  Inject,
  LOCALE_ID }
  from '@angular/core';
  
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
curr = formatNumber(100,this.locale,
          '2.1-5');
constructor(
  @Inject(LOCALE_ID) public locale: string,){}
}

app.component.html

  GeeksforGeeks

  
Locale Number is : {{curr}}

输出：

示例 3：

app.component.ts

import {
  formatNumber
 }
  from '@angular/common';
  
import {Component,
  Inject,
  LOCALE_ID }
  from '@angular/core';
  
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
curr = formatNumber(3234,this.locale,
          '3.1-4');
constructor(
  @Inject(LOCALE_ID) public locale: string,){}
}

app.component.html

  GeeksforGeeks

  
Locale Number is : {{curr}}

输出：

参考： https ://angular.io/api/common/formatNumber