Cách định dạng tiền tệ trong javascript (3 cách)

Bởi

Có rất nhiều ứng dụng cần hiển thị giá tiền, ví dụ như ứng dụng thương mại điện tử, ứng dụng về thuế phí,v.v… Có nhiều lý do, các giá trị này được lưu trong database là giá trị thô (kiểu number) – vì để phục vụ việc tính toán dễ hơn chẳng hạn.

Do đó, để hiển thị giá trị tiền cho người dùng được thân thiện hơn, bạn cần phải định dạng lại.

Chưa kể, mỗi một quốc gia lại có quy tắc định dạng tiền tệ khác nhau. Có nơi dùng dấu phẩy để ngăn hàng nghìn, có nơi lại dùng dấy phẩy để ngăn phần thập phân. Ví dụ: bạn có 21450 USD (hai mươi mốt nghìn bốn trăm năm mươi đô la mỹ), sẽ hiển thị là $21,450.00. Tương tự, với tiền euro thì lại ngược lại €21.450,00

Trong bài viết này, mình sẽ chia sẻ cách định dạng các con số theo định dạng tiền tệ (tiếng Anh người ta hay gọi là format Number as currency).

Let’s go 😊

Nội dung chính của bài viết

Phương pháp 1: Sử dụng hàm có sẵn Intl.NumberFormat()
Phương pháp 2: Sử dụng thư viện
Phương pháp 3: Tự code
Tạm kết

Phương pháp 1: Sử dụng hàm có sẵn Intl.NumberFormat()

Trong Javascript, cách đơn giản nhất để định dạng giá trị tiền tệ là sử dụng hàm có sẵn Intl.NumberFormat(). Hàm này nó có hỗ trợ cả định dạng theo từng quốc gia.

Cú pháp:

Intl.NumberFormat(locales, options). format(price)

Trong đó:

locales: mã quốc gia tương ứng khi hiển thị định dạng tiền. Bạn có thể tham khảo danh sách mã quốc gia này tại đây.
options: Có nhiều tùy chỉnh trong options này lắm, nhưng trong đó bạn chỉ cần quan tâm tới 2 tùy chỉnh chính: style và currency

Mình sẽ giải thích chi tiết về hai option trên nhé.

style: Bạn sử dụng tùy chỉnh này để xác định kiểu định dạng. Bạn có thể truyền vào một trong ba giá trị sau: số thập phân bình thường (decimals), tiền tệ (currency), hay đơn vị đo lường (units). Trong bài viết này, chúng ta là currency.
currency: tùy chọn này để chỉ định đơn vị tiền tệ, ví dụ: USD, VND, CAD… Tùy chọn này nó cũng hỗ trợ hiển thị ký hiệu tiền tệ tương ứng với locale.

Ví dụ bằng code:

const price = 21450;

const USDollar = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});

const VND = new Intl.NumberFormat('vi-VN', {
  style: 'currency',
  currency: 'VND',
});

console.log('Dollars: ' + USDollar.format(price)); // Dollars: $21,450.00
console.log('Việt Nam đồng: ' + VND.format(price)); // Việt Nam đồng: 21.450 ₫

Phương pháp 2: Sử dụng thư viện

Trong trường hợp bạn muốn tùy biến nhiều hơn nữa, bạn có thể xem xét sử dụng thư viện bên thứ 3. Cá nhân hay sử dụng thư viện currency.js

Với thư viện này, bạn có thể sử dụng trên cả frontend hoặc backend đều được.

Cách cài đặt thư viện:

Với NodeJS:

npm install --save currency.js

Với HTML, bạn thêm vào thẻ script như bình thường:

<script src="https://unpkg.com/currency.js@~2.0.0/dist/currency.min.js"></script>

Cách sử dụng:

const price = 21450;
console.log(currency(price, {symbol: "đ"}).format()) // đ21,450.00
console.log(currency(price, {symbol: "$"}).format()) // $21,450.00

Thư viện này khá là mạnh, bạn có thể tùy biến rất nhiều. Trong đó, bạn có thể thay đổi ký tự phân tách hàng nghìn và ký tự phân tách chữ thập phân.

Mặc định, ký tự dấu phẩy “,” dùng để phân tách hàng nghìn. Bạn hoàn toàn có thể đổi lại.

const price = 21450;
console.log(currency(price, 
  { symbol: 'đ', separator: '.',  decimal: ',' }
).format()); // đ21.450,00

Còn rất nhiều tính năng và tùy chọn khác nữa, bạn có thể khám phá trong trang tài liệu chính thức của thư viện này nhé.

Phương pháp 3: Tự code

Ngoài 2 trường phái sử dụng thư viện hoặc hàm có sẵn, bạn thích tự mình làm tất cả. Với ưu điểm là code tự viết nên mình sẽ hiểu rõ và tối ưu chính xác với nhu cầu thực tế của dự án. Nhưng nhược điểm là khả năng sẽ bug nhiều đấy 😊

Dưới đây là một gợi ý dành cho bạn.

/**
 * Định dạnh số theo tiền tệ
 * @param price - giá trị tiền
 * @param symbol - ký tự đại diện cho đơn vị tiền
 */
function formatCurrency(price, symbol = "$") {
  var DecimalSeparator = Number('1.2').toLocaleString().substr(1, 1);

  var priceWithCommas = price.toLocaleString();
  var arParts = String(priceWithCommas).split(DecimalSeparator);
  var intPart = arParts[0];
  var decPart = arParts.length > 1 ? arParts[1] : '';
  decPart = (decPart + '00').substr(0, 2);

  return symbol + intPart + DecimalSeparator + decPart;
}

const price = 21450;
console.log(formatCurrency(price))