Làm cách nào để lấy định dạng tiền tệ trong JavaScript?

Question

Psssst. TRẠI BOOTC PHÁT TRIỂN WEB 2023 sẽ bắt đầu chỉ sau vài ngày nữa. Tham gia danh sách chờ, giữ chỗ trong khóa học thuần tập kéo dài 10 tuần của tôi và tìm hiểu các nguyên tắc cơ bản, HTML, CSS, JS, Tailwind, React, Next. jsvà hơn thế nữa. ✨

Nội dung chính Show

TLDR – TRANG TRÌNH BÀY NHANH
TẢI XUỐNG & LƯU Ý
GHI CHÚ NHANH
MÃ VÍ DỤ TẢI XUỐNG
SỐ SANG TIỀN TỆ
PHƯƠNG PHÁP 1) ĐỊNH DẠNG SỐ
PHƯƠNG PHÁP 2) BIỂU THỨC CHÍNH XÁC
PHƯƠNG PHÁP 3) CHUỖI TIỀN TỆ THỦ CÔNG
BIT BỔ SUNG & LIÊN KẾT
KIỂM TRA TÍNH TƯƠNG THÍCH
LIÊN KẾT và THAM KHẢO
BẢNG CHEAT INFOGRAPHIC
Làm cách nào để hiển thị ký hiệu tiền tệ trong JavaScript?
Làm cách nào để chuyển đổi chuỗi thành định dạng tiền tệ trong JavaScript?
Làm cách nào để đặt định dạng số trong JavaScript?
Làm cách nào để thay đổi tiền tệ trong JavaScript?

Giả sử bạn có một số như

// CREDIT: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// (A) CONVERT TO CURRENCY (DOLLARS)
function tocur (amount) {
  return "$" + amount
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// (B) TEST
var testA = tocur(1234567),
    testB = tocur(123456.78);
console.log(testA); // $1,234,567
console.log(testB); // $123,456.78

0 và nó đại diện cho giá của một thứ gì đó

Bạn muốn biến nó thành

// CREDIT: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// (A) CONVERT TO CURRENCY (DOLLARS)
function tocur (amount) {
  return "$" + amount
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// (B) TEST
var testA = tocur(1234567),
    testB = tocur(123456.78);
console.log(testA); // $1,234,567
console.log(testB); // $123,456.78

1

Tuy nhiên, nếu số có nhiều hơn 3 chữ số, số này sẽ được hiển thị khác, ví dụ:

// CREDIT: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// (A) CONVERT TO CURRENCY (DOLLARS)
function tocur (amount) {
  return "$" + amount
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// (B) TEST
var testA = tocur(1234567),
    testB = tocur(123456.78);
console.log(testA); // $1,234,567
console.log(testB); // $123,456.78

2 sẽ được hiển thị là

// CREDIT: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// (A) CONVERT TO CURRENCY (DOLLARS)
function tocur (amount) {
  return "$" + amount
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// (B) TEST
var testA = tocur(1234567),
    testB = tocur(123456.78);
console.log(testA); // $1,234,567
console.log(testB); // $123,456.78

3

Đây là bằng USD, tuy nhiên

Các quốc gia khác nhau có các quy ước khác nhau để hiển thị các giá trị

JavaScript giúp chúng tôi rất dễ dàng với API quốc tế hóa ECMAScript, API trình duyệt tương đối gần đây cung cấp nhiều tính năng quốc tế hóa, như định dạng ngày và giờ

Nó được hỗ trợ rất tốt

Làm cách nào để lấy định dạng tiền tệ trong JavaScript?

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2
})

formatter.format(1000) // "$1,000.00"
formatter.format(10) // "$10.00"
formatter.format(123233000) // "$123,233,000.00"

Thuộc tính

// CREDIT: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// (A) CONVERT TO CURRENCY (DOLLARS)
function tocur (amount) {
  return "$" + amount
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// (B) TEST
var testA = tocur(1234567),
    testB = tocur(123456.78);
console.log(testA); // $1,234,567
console.log(testB); // $123,456.78

4 đặt phần phân số luôn có ít nhất 2 chữ số. Bạn có thể kiểm tra các thông số khác mà bạn có thể sử dụng trong trang NumberFormat MDN

Chào mừng bạn đến với hướng dẫn nhanh về cách định dạng số dưới dạng chuỗi tiền tệ trong Javascript. Cần hiển thị một số ở "định dạng tiền tệ đẹp" sau một số phép tính?

Các cách dễ dàng để định dạng một số dưới dạng chuỗi tiền tệ trong Javascript là

Sử dụng đối tượng định dạng số gốc

// CREDIT: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// (A) CONVERT TO CURRENCY (DOLLARS)
function tocur (amount) {
  return "$" + amount
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// (B) TEST
var testA = tocur(1234567),
    testB = tocur(123456.78);
console.log(testA); // $1,234,567
console.log(testB); // $123,456.78

5

// CREDIT: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// (A) CONVERT TO CURRENCY (DOLLARS)
function tocur (amount) {
  return "$" + amount
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// (B) TEST
var testA = tocur(1234567),
    testB = tocur(123456.78);
console.log(testA); // $1,234,567
console.log(testB); // $123,456.78

6

Sử dụng biểu thức chính quy

// CREDIT: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// (A) CONVERT TO CURRENCY (DOLLARS)
function tocur (amount) {
  return "$" + amount
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// (B) TEST
var testA = tocur(1234567),
    testB = tocur(123456.78);
console.log(testA); // $1,234,567
console.log(testB); // $123,456.78

7

// CREDIT: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// (A) CONVERT TO CURRENCY (DOLLARS)
function tocur (amount) {
  return "$" + amount
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// (B) TEST
var testA = tocur(1234567),
    testB = tocur(123456.78);
console.log(testA); // $1,234,567
console.log(testB); // $123,456.78

8

Định dạng thủ công số

// CREDIT: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// (A) CONVERT TO CURRENCY (DOLLARS)
function tocur (amount) {
  return "$" + amount
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// (B) TEST
var testA = tocur(1234567),
    testB = tocur(123456.78);
console.log(testA); // $1,234,567
console.log(testB); // $123,456.78

9

// CREDIT: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// (A) CONVERT TO CURRENCY (DOLLARS)
function tocur (amount) {
  return "$" + amount
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// (B) TEST
var testA = tocur(1234567),
    testB = tocur(123456.78);
console.log(testA); // $1,234,567
console.log(testB); // $123,456.78

0

// CREDIT: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// (A) CONVERT TO CURRENCY (DOLLARS)
function tocur (amount) {
  return "$" + amount
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// (B) TEST
var testA = tocur(1234567),
    testB = tocur(123456.78);
console.log(testA); // $1,234,567
console.log(testB); // $123,456.78

1

// CREDIT: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// (A) CONVERT TO CURRENCY (DOLLARS)
function tocur (amount) {
  return "$" + amount
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// (B) TEST
var testA = tocur(1234567),
    testB = tocur(123456.78);
console.log(testA); // $1,234,567
console.log(testB); // $123,456.78

0

// CREDIT: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// (A) CONVERT TO CURRENCY (DOLLARS)
function tocur (amount) {
  return "$" + amount
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// (B) TEST
var testA = tocur(1234567),
    testB = tocur(123456.78);
console.log(testA); // $1,234,567
console.log(testB); // $123,456.78

1

Điều đó bao gồm những điều cơ bản nhanh chóng, nhưng hãy đọc tiếp để biết các ví dụ chi tiết

ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào

TLDR – TRANG TRÌNH BÀY NHANH

Tải xuống & Ghi chú

TẢI XUỐNG & LƯU Ý

Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa

GHI CHÚ NHANH

Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình

MÃ VÍ DỤ TẢI XUỐNG

Nhấp vào đây để tải xuống tất cả mã nguồn ví dụ, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên mã nguồn đó hoặc sử dụng nó trong dự án của riêng bạn

SỐ SANG TIỀN TỆ

Được rồi, bây giờ chúng ta hãy đi vào các ví dụ về chuyển đổi một số thành đơn vị tiền tệ trong Javascript

PHƯƠNG PHÁP 1) ĐỊNH DẠNG SỐ

định dạng 1 số. html

// (A) THE NUMBER
var amount = 123456;

// (B) TO USD - $123,456.00
var usd = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD"
}).format(amount);
console.log(usd);

// (C) TO JPY - ¥123,456
var jpy = new Intl.NumberFormat("jp-JP", {
  style: "currency",
  currency: "JPY"
}).format(amount);
console.log(jpy);

// (D) EURO - €123,456.00
var eur = new Intl.NumberFormat("en-GB", {
  style: "currency",
  currency: "EUR"
}).format(amount);
console.log(eur);

Đây là cách hiện đại và nhanh nhất để định dạng chuỗi tiền tệ trong Javascript. Chỉ cần sử dụng

// CREDIT: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// (A) CONVERT TO CURRENCY (DOLLARS)
function tocur (amount) {
  return "$" + amount
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// (B) TEST
var testA = tocur(1234567),
    testB = tocur(123456.78);
console.log(testA); // $1,234,567
console.log(testB); // $123,456.78

2 và Javascript sẽ thực hiện phần còn lại của phép thuật định dạng. Một vài lưu ý ở đây

Tham số đầu tiên là mã ngôn ngữ và ngôn ngữ. Ví dụ:

// CREDIT: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// (A) CONVERT TO CURRENCY (DOLLARS)
function tocur (amount) {
  return "$" + amount
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// (B) TEST
var testA = tocur(1234567),
    testB = tocur(123456.78);
console.log(testA); // $1,234,567
console.log(testB); // $123,456.78

3 là viết tắt của “US English” và

// CREDIT: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// (A) CONVERT TO CURRENCY (DOLLARS)
function tocur (amount) {
  return "$" + amount
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// (B) TEST
var testA = tocur(1234567),
    testB = tocur(123456.78);
console.log(testA); // $1,234,567
console.log(testB); // $123,456.78

4 là viết tắt của “UK English”

Mã ngôn ngữ là ISO 639-1, hãy xem Wikipedia để biết danh sách đầy đủ
Đối với mã ngôn ngữ, ISO 3166-1 alpha-2, hãy xem lại Wikipedia
Cuối cùng, ISO 4217 cho mã tiền tệ, hãy kiểm tra lại Wikipedia

P. S.

// CREDIT: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// (A) CONVERT TO CURRENCY (DOLLARS)
function tocur (amount) {
  return "$" + amount
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// (B) TEST
var testA = tocur(1234567),
    testB = tocur(123456.78);
console.log(testA); // $1,234,567
console.log(testB); // $123,456.78

5 được hỗ trợ tốt trong hầu hết các trình duyệt hiện đại. Nhưng nếu bạn phải làm việc với các trình duyệt cũ, định dạng thủ công là cách duy nhất

PHƯƠNG PHÁP 2) BIỂU THỨC CHÍNH XÁC

2-biểu thức chính quy. html

// CREDIT: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// (A) CONVERT TO CURRENCY (DOLLARS)
function tocur (amount) {
  return "$" + amount
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// (B) TEST
var testA = tocur(1234567),
    testB = tocur(123456.78);
console.log(testA); // $1,234,567
console.log(testB); // $123,456.78

Sẽ không giải thích quá nhiều các biểu thức thông thường, đó là một con sâu. Nhưng nói một cách đơn giản, những gì nó làm là

Chuyển đổi số thành một chuỗi
Thêm dấu phẩy cho mỗi 3 chữ số (dấu cách hàng nghìn)
Chuẩn bị một ký hiệu đô la ở phía trước

PHƯƠNG PHÁP 3) CHUỖI TIỀN TỆ THỦ CÔNG

3-chuỗi thủ công. html

// (A) CURRENCY CONVERSION FUNCTION (DOLLARS)
function tocur (amount) {
  // (A1) NUMBER TO STRING
  var amount = amount.toString(),
      dec = ".00",
      temp = amount.indexOf(".");

  // (A2) EXTRACT DECIMALS (IF ANY)
  if (temp != -1) {
    dec = amount.substring(temp);
    amount = amount.substring(0, temp);
  }

  // (A3) ADD THOUSAND SEPARATORS
  if (amount.length>3) {
    temp = "";
    for (let i=amount.length-1, j=1; i>=0; i--, j++) {
      temp = amount[i] + temp;
      if (j%3==0 && i!=0) { temp = "," + temp; }
    }
    amount = temp;
  }

  // (A4) RESULT
  return "$" + amount + dec;
}

 // (B) TEST
var testA = tocur(1234567),
    testB = tocur(123456.78);
console.log(testA); // $1,234,567.00
console.log(testB); // $123,456.78

Cuối cùng, đây là cách định dạng một số thành một chuỗi tiền tệ “kiểu cũ”. Yep, đó là cách chúng ta lăn trong những ngày xa xưa. Hơi dài dòng, nhưng ít nhất nó có khả năng tương thích ngược tốt

BIT BỔ SUNG & LIÊN KẾT

Đó là tất cả những gì dành cho hướng dẫn và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn

KIỂM TRA TÍNH TƯƠNG THÍCH

Định dạng số – CanIUse

LIÊN KẾT và THAM KHẢO

Thêm Dấu Phẩy Vào Số Trong Javascript – Code Boxx
Cách định dạng tiền tệ trong ES6 – Samantha Ming

BẢNG CHEAT INFOGRAPHIC

Cảm ơn bạn đã đọc, và chúng tôi đã đi đến cuối. Tôi hy vọng rằng nó đã giúp bạn hiểu rõ hơn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc

Làm cách nào để hiển thị ký hiệu tiền tệ trong JavaScript?

Cách hiển thị tiền tệ ở định dạng tiền tệ. Mặc định là "biểu tượng". .

"Biểu tượng". sử dụng ký hiệu tiền tệ được bản địa hóa, chẳng hạn như €

"biểu tượng thu hẹp". sử dụng ký hiệu định dạng hẹp ("$100" thay vì "US$100")

"mã số". sử dụng mã tiền tệ ISO

"Tên". sử dụng tên tiền tệ bản địa hóa, chẳng hạn như "đô la"

Làm cách nào để chuyển đổi chuỗi thành định dạng tiền tệ trong JavaScript?

Phương thức NumberFormat(). Một trong những cách tốt nhất trong JavaScript để định dạng số dưới dạng chuỗi tiền tệ là sử dụng Intl. Phương thức NumberFormat() . Bạn có thể chuyển ngôn ngữ cho phương thức dưới dạng tham số và đặt ký hiệu đô la trước số và số định dạng.

Làm cách nào để đặt định dạng số trong JavaScript?

Số JavaScript có thể được định dạng theo nhiều cách khác nhau như dấu phẩy, tiền tệ, v.v. Bạn có thể sử dụng phương thức toFixed() để định dạng số bằng dấu thập phân và phương thức toLocaleString() để định dạng số bằng dấu phẩy và Intl. Phương thức NumberFormat() để định dạng số bằng tiền tệ

Làm cách nào để thay đổi tiền tệ trong JavaScript?

NumberFormat() với toLocaleString() để định dạng số dưới dạng tiền tệ . Trong JavaScript, phương pháp phổ biến nhất và dễ dàng nhất để định dạng số dưới dạng chuỗi tiền tệ là sử dụng Intl. Phương thức NumberFormat(). Phương pháp này cho phép người dùng định dạng số vận hành tham số ngôn ngữ tùy chỉnh.

programming javascript

Làm cách nào để lấy định dạng tiền tệ trong JavaScript?

TLDR – TRANG TRÌNH BÀY NHANH

TẢI XUỐNG & LƯU Ý

GHI CHÚ NHANH

MÃ VÍ DỤ TẢI XUỐNG

SỐ SANG TIỀN TỆ

PHƯƠNG PHÁP 1) ĐỊNH DẠNG SỐ

PHƯƠNG PHÁP 2) BIỂU THỨC CHÍNH XÁC

PHƯƠNG PHÁP 3) CHUỖI TIỀN TỆ THỦ CÔNG

BIT BỔ SUNG & LIÊN KẾT

KIỂM TRA TÍNH TƯƠNG THÍCH

LIÊN KẾT và THAM KHẢO

BẢNG CHEAT INFOGRAPHIC

Làm cách nào để hiển thị ký hiệu tiền tệ trong JavaScript?

Làm cách nào để chuyển đổi chuỗi thành định dạng tiền tệ trong JavaScript?

Làm cách nào để đặt định dạng số trong JavaScript?

Làm cách nào để thay đổi tiền tệ trong JavaScript?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội