Định dạng JavaScript Đơn vị tiền tệ (intl.numberformat)

Trong JavaScript, Intl.NumberFormat () được sử dụng để chỉ định đơn vị tiền tệ mà chúng tôi muốn một số đại diện. Phương thức là một phương thức khởi tạo có thể được sử dụng để định dạng tiền tệ trong thuộc tính style của nó.

Bài viết này trình bày cách chúng tôi sử dụng Intl.NumberFormat () để đạt được điều này, cũng như hiển thị một số mã ví dụ.

Phá vỡ hàm tạo và các tham số của nó

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

Bởi vì Intl.NumberFormat () là một hàm tạo, nó sẽ được đặt trước từ khóa “mới” của JavaScript để tạo một đối tượng có thể đạt được định dạng số chuyên biệt.

Hàm tạo nhận hai tham số tùy chọn, “ngôn ngữ” và “tùy chọn”. Các ngôn ngữ địa phương sẽ giữ một chuỗi có Các phương pháp thực hành tốt nhất hiện tại (BCP) của internet cho các thẻ ngôn ngữ hoặc hiện tại là BCP 47. Ví dụ:nếu chúng tôi muốn tiếng Anh Mỹ, chúng tôi sẽ sử dụng thẻ ngôn ngữ BCP 47 là “en-US”, nếu chúng tôi muốn tiếng Bồ Đào Nha của Brazil, chúng tôi sẽ sử dụng “pt-BR”.

Tùy chọn có 17 thuộc tính khác nhau mà nó có thể giữ, nhưng trong bài viết này, chúng tôi sẽ chỉ tập trung vào ba thuộc tính. Chúng tôi cũng tập trung vào phong cách mà chúng tôi có thể sử dụng tiền tệ, CurrencyDisplay và CurrencySign.

Mã mẫu

const money = 85000.50
 
// For Brazilian Reals
console.log(new Intl.NumberFormat('pr-BR', {style: 'currency', currency: 'BRL'}).format(money))
// outputs R$85,000.50
 
// For USD
console.log(new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'}).format(money))
// outputs $85,000.50
 
// For Japanese Yen
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(money));
// outputs ¥85,001

Một số điều cần lưu ý từ mã ví dụ của chúng tôi ở trên là chúng tôi đã sử dụng format() phương pháp để chuyển vào biến tiền của chúng tôi. Chúng tôi đã làm như vậy sau khi tạo đối tượng mới, đối tượng này đang được sử dụng để định dạng đơn vị tiền tệ của chúng tôi theo sở thích của chúng tôi, được chuyển vào dưới dạng tham số.

Lưu ý rằng chúng tôi không chỉ nhận được ký hiệu thực trong đầu ra của mình mà còn có được định dạng phù hợp cho các loại tiền tệ. Với đồng Yên Nhật, sự thay đổi trong ví dụ này được làm tròn có mục đích vì nó không tuân theo các đơn vị nhỏ.

CurrencyDisplay và CurrencySign

Hai thuộc tính phổ biến khác mà chúng ta có thể giữ dưới tham số tùy chọn cho tiền tệ là CurrencyDisplay và CurrencySign.

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

CurrencyDisplay sẽ hiển thị đơn vị tiền tệ ở các định dạng khác nhau bằng cách sử dụng các giá trị như biểu tượng, biểu tượng hẹp, mã và tên.

let money = 85000.50;
 
const symbol = new Intl.NumberFormat('en-USD', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
}).format(money);
 
const narrowSymbol = new Intl.NumberFormat('en-USD', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'narrowSymbol'
}).format(money);
 
const code = new Intl.NumberFormat('en-USD', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'code'
}).format(money);
 
const name = new Intl.NumberFormat('en-USD', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
}).format(money);
 
 
console.log(symbol) 
// $85,000.50
console.log(narrowSymbol)
// $85,000.50 rather than US$85,000.50
console.log(code)
// USD 85,000.50
console.log(name)
// 85,000.50 US dollars

CurrencySign sẽ đặt một số trong dấu ngoặc đơn thay vì thêm dấu trừ. Tùy chọn này được sử dụng cho và với "kế toán", vì vậy chúng tôi phải thay đổi tùy chọn này vì tùy chọn này tự động được mặc định thành "tiêu chuẩn".

let money = -8500.50;
 
const accounting = new Intl.NumberFormat('en-USD', {
  style: 'currency', 
  currency: 'USD',
  currencySign: 'accounting' 
}).format(money);
 
console.log(accounting)
// ($8,500.50)

Kết luận

Intl.NumberFormat () method là một hàm tạo được sử dụng để, trong số những thứ khác, định dạng tiền tệ trong thuộc tính style của nó. Chúng ta có thể sử dụng nó kết hợp với format() để hiển thị tiền tệ theo ý thích của chúng tôi.