Đôi khi, điều rất quan trọng là đặt dấu phẩy vào số giúp hiểu giá trị chính xác hơn. Do đó, để làm điều này, có nhiều cách khác nhau được thảo luận dưới đây
- Sử dụng Phương thức toLocalString[]
- Sử dụng quốc tế. SốFormatter
- Tạo chức năng
In số bằng dấu phẩy dưới dạng dấu phân cách hàng nghìn bằng phương thức toLocalString[]
Để phân tách số bằng dấu phẩy dưới dạng dấu phân cách nghìn, chúng ta có thể sử dụng phương thức toLocalString[]. toLocalString[] là một hàm tích hợp trong JavaScript. Tham số ngôn ngữ tùy chọn được sử dụng để chỉ định định dạng của số
Ngôn ngữ 'en-US' được sử dụng để xác định rằng ngôn ngữ đó có định dạng của Hoa Kỳ và ngôn ngữ tiếng Anh. Điều này sẽ định dạng số bằng dấu phẩy ở hàng nghìn vị trí và trả về một chuỗi có số được định dạng
cú pháp
Number.toLocaleString['en-US']
ví dụ 1
const n = 589614832; const formatted = n.toLocaleString['en-US']; console.log[formatted]
đầu ra
In số bằng dấu phẩy dưới dạng dấu phân cách hàng nghìn bằng Intl. SốFormatter
Bạn có thể sử dụng không gian tên này [Intl] để định dạng số cho các bản địa hóa khác nhau. Để làm điều này, sử dụng Intl. NumberFormat[] bằng cách cung cấp cho nó mã bản địa hóa. Trong trường hợp bạn muốn sử dụng dấu phẩy làm dấu phân cách hàng nghìn, hãy sử dụng en-US
ví dụ 2
const n = 716298462; const numberFormatter = Intl.NumberFormat['en-US']; const formatted = numberFormatter.format[n]; console.log[formatted];
đầu ra
In số bằng dấu phẩy dưới dạng dấu phân cách hàng nghìn bằng cách tạo hàm
Một chức năng tùy chỉnh cũng có thể được tạo để thực hiện tác vụ này. Điều này sẽ bao gồm việc sử dụng một số Biểu thức chính quy [RE]. Để triển khai chức năng phân cách hàng nghìn bằng dấu phẩy, bạn cần chuyển đổi số thành chuỗi. Sau đó chia một chữ số thành một phần số và một phần thập phân có thể. Sử dụng regex để tìm hàng nghìn [nhóm 3 chữ số] trong phần số và thêm dấu phẩy ở giữa. Tách phần số và phần thập phân bằng dấu chấm
Chào mừng bạn đến với hướng dẫn ngắn về cách thêm dấu phẩy vào số trong Javascript. Vì vậy, bạn có một dự án cần hiển thị một số “con số đẹp mắt”?
Các cách dễ dàng để thêm dấu phẩy vào số trong Javascript là
- Sử dụng hàm
toLocaleString[]var num = 1234567.89;var commas = num.toLocaleString["en-US"];
- Chuyển đổi số thành một chuỗi và sử dụng biểu thức chính quy thay thế
var commas = num.toString[].replace[/\B[?=[\d{3}]+[?!\d]]/g, ","];
Điều đó bao gồm những điều cơ bản, nhưng chúng ta hãy xem qua các ví dụ khác trong hướng dẫn này – Đọc tiếp
ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn ví dụ 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 mã nguồn, 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
THÊM DẤU PHẢN VÀO SỐ
Được rồi, bây giờ chúng ta hãy đi vào các ví dụ về cách thêm dấu phẩy vào một số trong Javascript
PHƯƠNG PHÁP 1] CHUỖI ĐỊA PHƯƠNG
1 ngôn ngữ. html
// [A] THE NUMBER
var num = 1234567.89;
// [B] TO LOCALE STRING
console.log[num.toLocaleString["en-US"]]; // 1,234,567.89
console.log[num.toLocaleString["fr-FR"]]; // 1 234 567,89
console.log[num.toLocaleString["ja-JP", { style: "currency", currency: "JPY" }]];Như trong phần giới thiệu, toLocaleString["en-US"] là một trong những cách dễ nhất để thêm dấu phẩy vào một số. Đối với người mới bắt đầu, en-US fr-FR ja-JP đó là mã ngôn ngữ và ngôn ngữ
- Mã ngôn ngữ là 2 bảng chữ cái ISO 639-1. Kiểm tra Wikipedia để biết danh sách đầy đủ
- Mã ngôn ngữ là ISO 3166-1 alpha-2. Kiểm tra Wikipedia cho danh sách đầy đủ
P. S. Tôi có một hướng dẫn khác để định dạng số dưới dạng tiền tệ, liên kết bên dưới
PHƯƠNG PHÁP 2] THAY THẾ BIỂU THỨC CHÍNH XÁC
2-thay thế. html
// CREDIT: //stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// [A] THE NUMBER
var num = 1234567.89;
// [B] CONVERT TO STRING & REPLACE
var commas = num.toString[].replace[/\B[?=[\d{3}]+[?!\d]]/g, ","];
console.log[commas]; // 1,234,567.89
Ngày xửa ngày xưa trong Thời kỳ đen tối của Internet, đây là cách chúng ta cuộn. Về cơ bản, chuyển đổi số thành một chuỗi, sau đó sử dụng một mẫu [biểu thức chính quy] để chèn dấu phẩy. Không đi sâu vào chi tiết về cách thức hoạt động của biểu thức chính quy, vì nó là một đống sâu. Nhưng replace[/\B[?=[\d{3}]+[?!\d]]/g, ","] thực hiện phép thuật chèn dấu phẩy
PHƯƠNG PHÁP 3] CHÈN DẤU PHÉP THỦ CÔNG
3-thủ công. html
// [A] ADD COMMAS TO SEPERATE GIVEN NUMBER
// num : original number
// per : add comma per n digits [default 3]
// places : number of decimal places [default 2]
function addComma [num, per, places] {
// [A1] SET DEFAULTS
if [per==undefined] { per = 3; }
if [places==undefined] { places = 2; }
// [A2] NO DECIMAL PLACES - ROUND OFF
// REMOVE THIS IF YOU DON'T WANT TO ROUND OFF
if [places==0] { num = Math.round[num]; }
// [A3] SPLIT WHOLE & DECIMAL NUMBERS
var cString = num.toString[],
cDot = cString.indexOf["."],
cWhole = "", cDec = "";
if [cDot == -1] {
cWhole = cString;
cDec = 0;
} else {
cWhole = cString.substring[0, cDot];
cDec = cString.substring[cDot+1];
}
// [A4] ADD COMMAS TO WHOLE NUMBER
var aComma = "", count = 0;
if [cWhole.length > per] { for [let i=[cWhole.length-1]; i>=0; i--] {
aComma = cWhole.charAt[i] + aComma;
count++;
if [count == per && i!=0] {
aComma = "," + aComma;
count = 0;
}
}} else { aComma = cWhole; }
// [A5] ROUND OFF TO GIVEN DECIMAL PLACES
if [places==0] { cDec = ""; }
else {
cDec = +["0." + cDec];
cDec = cDec.toFixed[places].toString[].substring[1];
}
// [A6] RETURN "WHOLE WITH COMMA" PLUS DECIMAL PLACES
return aComma + cDec;
}
// [B] TEST
// [B1] WHOLE NUMBER
var whole = 123456789;
console.log[addComma[whole]]; // 123,456,789.00
console.log[addComma[whole, 4, 0]]; // 1,2345,6789
// [B2] DECIMAL
var dec = 23456.78;
console.log[addComma[dec]]; // 23,456.78
console.log[addComma[dec, 2, 0]]; // 2,34,57
Cuối cùng, đây là một cách thay thế thủ công khác để thêm dấu phẩy vào một số –
- [A1] “Cài đặt mặc định” nếu không được cung cấp
- [A2] Làm tròn nếu 0 chữ số thập phân. Bỏ dòng này nếu bạn không muốn làm tròn
- [A3] Chuyển số thành chuỗi, chia thành số nguyên và số thập phân
- [A4] Chỉ thêm dấu phẩy vào phần của số nguyên
- [A5] Làm tròn đến số chữ số thập phân đã cho
- [A6] Gộp lại phần nguyên và phần thập phân – Xong
BIT BỔ SUNG & LIÊN KẾT
Đó là tất cả cho hướng dẫn này 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
TÓM LƯỢC
FunctionDescriptionLink// CREDIT: //stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// [A] THE NUMBER
var num = 1234567.89;
// [B] CONVERT TO STRING & REPLACE
var commas = num.toString[].replace[/\B[?=[\d{3}]+[?!\d]]/g, ","];
console.log[commas]; // 1,234,567.89
// CREDIT: //stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
// [A] THE NUMBER
var num = 1234567.89;
// [B] CONVERT TO STRING & REPLACE
var commas = num.toString[].replace[/\B[?=[\d{3}]+[?!\d]]/g, ","];
console.log[commas]; // 1,234,567.89
LIÊN KẾT và THAM KHẢO
- Định dạng số dưới dạng tiền tệ trong Javascript – Code Boxx
VIDEO HƯỚNG DẪN
BẢNG CHEAT INFOGRAPHIC
Cảm ơn bạn đã đọc, và chúng tôi đã đi đến phần cuối của hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn với dự án của bạn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc