JavaScript Định Dạng Tiền Tệ

1. Hàm NumberFormat Là Gì?

NumberFormat là một constructor trong API Intl của JavaScript. Nó được sử dụng để định dạng số theo cách phù hợp với các quy ước địa phương, như định dạng tiền tệ, phần trăm, hoặc các số thông thường.

Hàm này hỗ trợ quốc tế hóa (i18n) và có thể điều chỉnh để hiển thị số theo nhiều cách khác nhau dựa trên ngôn ngữ và vùng quốc gia.

Cách sử dụng

Bạn tạo một instance của Intl.NumberFormat bằng cách gọi hàm constructor của nó và truyền các tham số tùy chọn, như sau:

javascript

new Intl.NumberFormat([locales], [options]);

• locales (tùy chọn): Chuỗi hoặc mảng chuỗi xác định ngôn ngữ và vùng quốc gia, ví dụ: 'en-US', 'vi-VN'.
• options (tùy chọn): Một đối tượng tùy chỉnh định dạng.

Các tùy chọn phổ biến

• style: Kiểu định dạng ("decimal" - số thông thường, "currency" - tiền tệ, "percent" - phần trăm).
• currency: Ký hiệu tiền tệ (ví dụ: 'USD', 'VND').
• currencyDisplay: Cách hiển thị tiền tệ ("symbol" - ký hiệu, "narrowSymbol", "code", "name").
• maximumFractionDigits: Số chữ số tối đa sau dấu thập phân.
• minimumFractionDigits: Số chữ số tối thiểu sau dấu thập phân.

Ví dụ

Định dạng số thông thường

javascript

const numberFormatter = new Intl.NumberFormat('en-US'); console.log(numberFormatter.format(1234567.89)); // Output: "1,234,567.89"

Định dạng tiền tệ

javascript

const currencyFormatter = new Intl.NumberFormat('vi-VN', { style: 'currency', currency: 'VND', }); console.log(currencyFormatter.format(500000)); // Output: "500.000 ₫"

Định dạng phần trăm

javascript

const percentFormatter = new Intl.NumberFormat('en-US', { style: 'percent', maximumFractionDigits: 1, }); console.log(percentFormatter.format(0.7589)); // Output: "75.9%"

Lợi ích

1. Quốc tế hóa: Tự động áp dụng các quy tắc định dạng của từng ngôn ngữ và vùng quốc gia.
2. Linh hoạt: Có nhiều tùy chọn để tinh chỉnh kết quả theo ý muốn.
3. Dễ sử dụng: Gọn gàng và tích hợp sẵn trong JavaScript.

2. Hướng Dẫn Định Dạng Tiền Tệ Trong JavaScript

JavaScript cung cấp API `Intl.NumberFormat` cho phép định dạng số theo cách phù hợp với các quy ước của từng quốc gia, bao gồm định dạng tiền tệ.
 

2.1. Định dạng tiền tệ cho USD (Đô la Mỹ)

const usdFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});
console.log(usdFormatter.format(1234567.89)); // Output: "$1,234,567.89"

2.2. Định dạng tiền tệ cho GBP (Bảng Anh)

const gbpFormatter = new Intl.NumberFormat('en-GB', {
  style: 'currency',
  currency: 'GBP'
});
console.log(gbpFormatter.format(1234567.89)); // Output: "£1,234,567.89"

2.3. Định dạng tiền tệ cho JPY (Yên Nhật - không có số thập phân)

const jpyFormatter = new Intl.NumberFormat('ja-JP', {
  style: 'currency',
  currency: 'JPY'
});
console.log(jpyFormatter.format(1234567.89)); // Output: "¥1,234,568"

2.4. Định dạng tiền tệ cho VND (Đồng Việt Nam)

const vndFormatter = new Intl.NumberFormat('vi-VN', {
  style: 'currency',
  currency: 'VND'
});
console.log(vndFormatter.format(1234567.89)); // Output: "1.234.567,89 ₫"

Các lưu ý:

- `locale` (e.g., 'en-US', 'en-GB', 'ja-JP', 'vi-VN') xác định quy tắc định dạng số theo vùng quốc gia.

- `currency` định nghĩa loại tiền tệ cần định dạng (e.g., 'USD', 'GBP', 'JPY', 'VND').

- API tự động quản lý các quy ước địa phương như ký hiệu tiền tệ, dấu phân cách hàng nghìn, dấu thập phân, và hiển thị số thập phân (nếu có).

2.5. Các ví dụ khác Định dạng tùy chỉnh: chỉ lấy số tối đa 0 chữ số thập phân với VND

const vndCustomFormatter = new Intl.NumberFormat('vi-VN', {
  style: 'currency',
  currency: 'VND',
  maximumFractionDigits: 0
});
console.log(vndCustomFormatter.format(1234567.89)); // Output: "1.234.568 ₫"

Kết luận:

`Intl.NumberFormat` là cách mạnh mẽ và linh hoạt để định dạng tiền tệ trong JavaScript.
Xem thêm ví dụ trên Stackoverflow: VND Currency formatting