HomeLập trìnhJavaScriptCách định dạng...

Cách định dạng số dưới dạng tiền tệ trong JavaScript


Khi bạn đang làm việc với dữ liệu từ API hoặc tài nguyên bên ngoài, bạn sẽ nhận được những dữ liệu này ở một số định dạng chung. Ví dụ: nếu bạn đang xây dựng một cửa hàng, bạn có thể có dữ liệu như giá cả.

Dữ liệu giá này có thể ở dạng một số chung chẳng hạn như 14340 hoặc bất kỳ số nào khác như trong mảng bên dưới:

const books = [
    {
        "id": 001,
        "name": "Clean Code",
        "price": 10.99,
    },
    {
        "id": 002,
        "name": "Introduction to Algorithms",
        "price": 1199,
    },
    {
        "id": 003,
        "name": "Programming Pearls",
        "price": 1.05,
    },
    {
        "id": 004,
        "name": "Program or Be Programmed",
        "price": 14340,
    }
]

Bạn không muốn chuyển số trực tiếp vào ứng dụng hoặc trang web của mình vì người đọc và người dùng sẽ khó hiểu chúng.

Ngay cả khi bạn thêm ký hiệu tiền tệ, nó cũng không khắc phục được sự cố vì bạn sẽ muốn thêm dấu phẩy và số thập phân vào đúng vị trí. Bạn cũng muốn mỗi đầu ra giá dựa trên đơn vị tiền tệ có định dạng phù hợp.

Ví dụ: 14340 sẽ là $14.340,00 (Đô la Mỹ) hoặc ₹14.340,00 (Rupee) hoặc €14.340,00 (Euros), v.v., tùy thuộc vào đơn vị tiền tệ, ngôn ngữ và kiểu đã xác định của bạn. Và bạn có thể chuyển đổi những con số này thành tiền tệ bằng cách sử dụng Intl.NumberFormat() phương pháp trong JavaScript.

Trong trường hợp bạn đang vội, đây là một ví dụ cơ bản về mã sẽ trông như thế nào:

const price = 14340;

// Format the price above to USD using the locale, style, and currency.
let USDollar = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
});

console.log(`The formated version of ${price} is ${USDollar.format(price)}`);
// The formated version of 14340 is $14,340.00

Trong bài viết này, tôi sẽ giúp bạn hiểu từng tùy chọn ở trên, chức năng của chúng và cách sử dụng đúng phương pháp này để định dạng một số dưới dạng tiền tệ.

Đọc thêm  JavaScript forEach() – Mảng JS cho mỗi ví dụ về vòng lặp

Làm thế nào để sử dụng Intl.NumberFormat() Trình xây dựng để định dạng số dưới dạng tiền tệ

Bạn có thể dùng Intl.NumberFormat() hàm tạo để tạo Intl.NumberFormat các đối tượng cho phép định dạng số theo ngôn ngữ, chẳng hạn như định dạng tiền tệ.

Hàm tạo này có hai tham số chính, localesoptions. Cả hai đều là tùy chọn.

new Intl.NumberFormat(locales, options)

// Or

Intl.NumberFormat(locales, options)

Ghi chú điều đó Intl.NumberFormat() có thể được gọi có hoặc không có new. Cả hai sẽ tạo ra một cái mới Intl.NumberFormat ví dụ.

Khi bạn sử dụng Intl.NumberFormat() mà không chuyển bất kỳ ngôn ngữ hoặc tùy chọn nào, nó sẽ chỉ định dạng số bằng cách thêm dấu phẩy.

const price = 14340;
console.log(new Intl.NumberFormat().format(price)); // 14,340

Bạn không theo định dạng số thông thường, như đã thấy ở trên. Bạn muốn định dạng các số này dưới dạng tiền tệ – để nó trả về ký hiệu tiền tệ với định dạng phù hợp mà không cần phải nối thủ công.

Bây giờ chúng ta hãy khám phá cả hai tham số.

Đối số đầu tiên: Địa phương

Ngôn ngữ là một tham số tùy chọn có thể được truyền dưới dạng một chuỗi. Nó đại diện cho một khu vực địa lý, chính trị hoặc văn hóa cụ thể. Nó chỉ định dạng số dựa trên ngôn ngữ và không phải là định dạng tiền tệ.

const price = 143450;

console.log(new Intl.NumberFormat('en-US').format(price)); // 143,450
console.log(new Intl.NumberFormat('en-IN').format(price)); // 1,43,450
console.log(new Intl.NumberFormat('en-DE').format(price)); // 143.450

Bạn sẽ nhận thấy rằng các số hoặc giá hiện được định dạng cục bộ dựa trên ngôn ngữ. Bây giờ chúng ta hãy khám phá tham số tùy chọn để tùy chỉnh các số dưới dạng tiền tệ.

Đọc thêm  một hướng dẫn mayúsculas trong JS

Đối số thứ hai: Tùy chọn (Kiểu, Tiền tệ,…)

Đây là tham số chính và bạn có thể sử dụng nó để áp dụng nhiều định dạng hơn như định dạng tiền tệ. Đây là một đối tượng JavaScript chứa các tham số khác như:

  • style: Bạn sử dụng điều này để chỉ định loại định dạng mà bạn muốn. Điều này nhận các giá trị như số thập phân, tiền tệ và đơn vị. Đối với bài viết này, bạn sẽ sử dụng tiền tệ vì đó là kiểu mà bạn muốn định dạng số.
  • currency: Một tùy chọn khác là tiền tệ. Bạn có thể sử dụng tùy chọn này để chỉ định loại tiền bạn muốn định dạng, chẳng hạn như 'USD', 'CAD', 'GBP``', 'INR' và nhiều hơn nữa. Điều này cũng sẽ giúp cung cấp biểu tượng ở vị trí thích hợp dựa trên ngôn ngữ.
// format number to US dollar
let USDollar = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
});

// format number to British pounds
let pounds = Intl.NumberFormat('en-GB', {
    style: 'currency',
    currency: 'GBP',
});

// format number to Indian rupee
let rupee = new Intl.NumberFormat('en-IN', {
    style: 'currency',
    currency: 'INR',
});

// format number to Euro
let euro = Intl.NumberFormat('en-DE', {
    style: 'currency',
    currency: 'EUR',
});

console.log('Dollars: ' + USDollar.format(price));
// Dollars: $143,450.00

console.log(`Pounds: ${pounds.format(price)}`);
// Pounds: £143,450.00

console.log('Rupees: ' + rupee.format(price));
// Rupees: ₹1,43,450.00

console.log(`Euro: ${euro.format(price)}`);
// Euro: €143,450.00

Có những tùy chọn khác mà rất có thể bạn sẽ không bao giờ sử dụng hoặc thay đổi, chẳng hạn như useGrouping, được dùng để nhóm số bằng dấu phẩy (hoặc dấu chấm đối với một số ngôn ngữ). Đây là một trường boolean – theo mặc định, nó được đặt thành true. Đây là lý do tại sao đầu ra của bạn có dấu phẩy hoặc dấu chấm trong bài viết này (như $143.450,00).

Đọc thêm  JavaScript Number to String – Cách sử dụng toString để chuyển đổi một số nguyên thành một chuỗi

Khi bạn đặt giá trị của nó thành falsebạn sẽ nhận thấy không còn nhóm nào nữa:

let euro = Intl.NumberFormat('en-DE', {
    style: 'currency',
    currency: 'EUR',
    useGrouping: false,
});

console.log(`Euro: ${euro.format(price)}`);
// Euro: €143450.00

một lựa chọn khác là maximumSignificantDigits. Bạn có thể sử dụng điều này để làm tròn biến giá của mình dựa trên số chữ số có nghĩa mà bạn đã đặt. Ví dụ: khi bạn đặt giá trị thành 3, 143,450.00 sẽ trở thành 143,000.

let pounds = Intl.NumberFormat('en-GB', {
    style: 'currency',
    currency: 'GBP',
    maximumSignificantDigits: 3,
});

console.log(`Pounds: ${pounds.format(price)}`);
// Pounds: £143,000

Thì đấy! 🚀

Tôi hy vọng bài viết này xứng đáng với thời gian của bạn. Giờ đây, bạn đã biết cách định dạng một số dưới dạng tiền tệ bằng JavaScript mà không cần dựa vào bất kỳ thư viện bên ngoài nào.

Khi làm việc với các thư viện như React, Vue và các thư viện khác, bạn có thể biến chức năng này thành một chức năng tiện ích, nhập nó vào bất kỳ thành phần nào của bạn và sử dụng nó thay vì cài đặt toàn bộ thư viện (trừ khi bạn cần nhiều chức năng hơn).

Hãy mã hóa vui vẻ!



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status