Trong JavaScript, phương thức Intl.NumberFormat() dùng để chỉ định tiền tệ mà một số đại diện. Phương thức này là một constructor (hàm tạo) có thể dùng để định dạng tiền tệ trong thuộc tính style.
Bài viết này trình bày cách dùng Intl.NumberFormat() để đạt được điều này, cùng các ví dụ code minh họa.
Phân tích Constructor và Các Tham Số
new Intl.NumberFormat([locales[, options]])
Vì Intl.NumberFormat() là constructor, nó đi kèm từ khóa new của JavaScript để tạo đối tượng thực hiện định dạng số chuyên biệt.
Constructor nhận hai tham số tùy chọn: "locales" và "options". Locales chứa chuỗi với Best Current Practices (BCP) của internet cho thẻ ngôn ngữ, hiện tại là BCP 47. Ví dụ: tiếng Anh Mỹ dùng "en-US", tiếng Bồ Đào Nha Brazil dùng "pt-BR".
Options có 17 thuộc tính khác nhau, nhưng bài viết tập trung vào ba thuộc tính chính liên quan tiền tệ: style (dùng với currency), currencyDisplay, và currencySign.
Ví dụ Code
const money = 85000.50
// Với BRL (Real Brazil)
console.log(new Intl.NumberFormat('pt-BR', {style: 'currency', currency: 'BRL'}).format(money))
// outputs R$85.000,50
// Với USD
console.log(new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'}).format(money))
// outputs $85,000.50
// Với JPY (Yên Nhật)
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(money));
// outputs ¥85,001
Nhận xét từ ví dụ: ta dùng phương thức format() truyền biến money sau khi tạo đối tượng mới định dạng tiền tệ theo sở thích (được truyền qua tham số).
Chú ý: không chỉ có ký hiệu tiền tệ, định dạng số cũng đúng chuẩn cho từng loại tiền tệ. Với Yên Nhật, ví dụ này làm tròn vì Yên không có đơn vị nhỏ.
CurrencyDisplay và CurrencySign
Hai thuộc tính thường dùng khác trong options cho tiền tệ là currencyDisplay và currencySign.
currencyDisplay hiển thị tiền tệ theo các định dạng khác nhau với giá trị: symbol, narrowSymbol, code, và name.
let money = 85000.50;
const symbol = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', currencyDisplay: 'symbol' }).format(money);
const narrowSymbol = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', currencyDisplay: 'narrowSymbol' }).format(money);
const code = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', currencyDisplay: 'code' }).format(money);
const name = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', currencyDisplay: 'name' }).format(money);
console.log(symbol) // $85,000.50
console.log(narrowSymbol) // $85,000.50 (thay vì US$85,000.50)
console.log(code) // USD 85,000.50
console.log(name) // 85,000.50 US dollars
currencySign sẽ bọc số âm trong dấu ngoặc đơn thay vì thêm dấu trừ. Dùng cho "accounting" (kế toán), nên phải đổi option sang giá trị này (mặc định là "standard").
let money = -8500.50;
const accounting = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', currencySign: 'accounting' }).format(money);
console.log(accounting) // ($8,500.50)
Kết luận
Phương thức Intl.NumberFormat() là constructor dùng để (trong nhiều việc khác) định dạng tiền tệ trong thuộc tính style. Ta có thể dùng nó kết hợp với format() để hiển thị tiền tệ theo ý muốn.