Định dạng tiền tệ bằng pipe trong Angular

Với pipe CurrencyPipe, bạn có thể định dạng đầu ra tiền tệ. Tham số đầu tiên của pipe là mã tiền tệ theo đặc tả ISO 4217 (mặc định là USD). Tham số thứ hai đặt cách hiển thị tiền tệ. Nó có thể nhận những giá trị sau: 'code' (mã tiền tệ), 'symbol' (ký hiệu của nó), 'symbol-narrow' (dành cho các quốc gia có nhiều ký hiệu tiền tệ), 'string' (để hiển thị bất kỳ chuỗi nào). Trong tham số thứ ba không bắt buộc, chúng ta có thể đặt định dạng số, tương tự như pipe DecimalPipe. Trong tham số thứ tư không bắt buộc, có thể chỉ định mã locale được sử dụng:

<div>{{ value | number : mã tiền tệ : cách hiển thị tiền tệ : định dạng số : mã locale }}</div>

Ví dụ

Hãy thử nghiệm pipe qua các ví dụ. Để làm điều này, trong lớp component, hãy đặt thuộc tính salary sau đây, chứa mức lương bằng một loại tiền tệ nào đó:

export class AppComponent {
	salary: number = 867.564;
}

Ví dụ

Hãy chuyển đổi số của chúng ta thành tiền tệ:

<div>{{ salary | currency }}</div>

Kết quả thực thi mã:

<div>$867.56</div>

Ví dụ

Bây giờ hãy chỉ định cách hiển thị tiền tệ bằng rúp Nga:

<div>{{ salary | currency:'RUB':'code' }}</div>

Kết quả thực thi mã:

<div>RUB867.56</div>

Ví dụ

Hãy hiển thị ký hiệu rúp Nga bên cạnh số:

<div>{{ salary | currency:'RUB':'symbol-narrow' }}</div>

Kết quả thực thi mã:

<div>₽867.56</div>

Ví dụ

Bây giờ hãy hiển thị số với bốn chữ số trong phần thập phân:

<div>{{ salary | currency:'RUB':'symbol':'2.4-5' }}</div>

Kết quả thực thi mã:

<div>RUB867.5640</div>

Ví dụ

Hãy thêm chuỗi sau vào cách hiển thị tiền tệ:

<div>{{ salary | currency:'RUB':'this is a new currency - ' }}</div>

Kết quả thực thi mã:

<div>this is a new currency - 867.56</div>

Bài tập thực hành

Cho số:

salary: number = 134.89;

Định dạng nó theo dạng sau:

'$134.89'

Cho số:

salary: number = 134.89;

Định dạng nó theo dạng sau:

'€134.89'

Cho số:

salary: number = 134.89;

Định dạng nó theo dạng sau:

'$134.890'

Cho số:

salary: number = 134.89;

Định dạng nó theo dạng sau:

'$0,134.8900'

Cho số:

salary: number = 134.89;

Định dạng nó theo dạng sau:

'this currency is changed 134.89'