از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
رسیدگی به اعداد در فرمت های مختلف برای بسیاری از توسعه دهندگان، به ویژه آنهایی که با UI/UX کار می کنند، یک کار رایج است. یکی از این کارها نمایش اعداد به شکلی قابل خواندن برای انسان است، مانند جدا کردن ارقام با کاما. خواه برای یک برنامه مالی باشد، نمایش آمار روی داشبورد، یا صرفاً قابل هضم تر کردن اعداد بزرگ، قالب بندی اعداد با کاما می تواند به بهبود تجربه کاربر کمک کند. در این مقاله، ما راه‌های مختلفی را برای انجام این کار بررسی می‌کنیم، حتی چند روش محبوب کتابخانه‌ای را برای آسان‌تر کردن کار به کار می‌بریم.
روش های بومی جاوا اسکریپت
یکی از ساده‌ترین راه‌ها برای قالب‌بندی اعداد با کاما استفاده از Native است toLocaleString روش:
const number = 1234567.89;
const formattedNumber = number.toLocaleString();
console.log(formattedNumber); // Outputs: "1,234,567.89"
این روش به طور خودکار شماره را با توجه به موقعیت کاربر قالب بندی می کند و آن را به یک انتخاب عالی برای بین المللی سازی تبدیل می کند. برای منطقه من، بعد از هر رقم سوم از کاما استفاده می کند.
توجه داشته باشید: ما عادت کرده ایم که اعدادی را ببینیم، مانند آنچه در بالا نشان داده شده است، هنگامی که به عنوان ارز نمایش داده می شوند، تنها با دو رقم بعد از اعشار ارائه می شوند. با این حال، به خاطر داشته باشید که toLocaleString() تمام ارقام بعد از اعشار را حفظ می کند. بنابراین 1234567.890123 می شود “1,234,567.890123”.
استفاده از عبارات منظم
اگر به کنترل بیشتری روی قالب بندی نیاز دارید، عبارات منظم می توانند کمک کنند:
function formatNumberWithCommas(number) {
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
const number = 1234567.89;
console.log(formatNumberWithCommas(number)); // Outputs: "1,234,567.89"
با استفاده از کتابخانه لوداش
اگر ترجیح می دهید از کتابخانه ها استفاده کنید و از طرفداران آن هستید لوداش، کتابخانه ابزار محبوب یک _.comma روشی که می تواند کار را انجام دهد:
const _ = require('lodash');
const number = 1234567.89;
const formattedNumber = _.comma(number);
console.log(formattedNumber); // Outputs: "1,234,567.89"
نتیجه
قالب بندی اعداد با کاما یک نیاز رایج است که خوانایی و تجربه کلی کاربر را افزایش می دهد. در حالی که جاوا اسکریپت روش های بومی مانند toLocaleString، همچنین می توانید از طریق عبارات منظم به این امر دست یابید یا حتی از کتابخانه هایی مانند Lodash استفاده کنید. رویکردی که انتخاب می کنید ممکن است بستگی داشته باشد روی نیازهای خاص شما و زمینه ای که در آن کار می کنید. آنچه مهم است این است که اکنون ابزارهایی در اختیار دارید تا آن اعداد بزرگ و غیرقابل تحمل را کمی برای چشم انسان دوستانه تر کنید.
(برچسب‌ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1403-01-03 14:04:03
