تغییر فرمت زمان در جاوا اسکریپت

زبان جاوا اسکریپت یکی از سه تکنولوژی پیش‌نیاز برای توسعه وبسایت یا وب‌اپلیکیشن هاست. در طی روند توسعه این صفحات وب، گاهی اوقات بنا به دلایلی نیاز به استفاده از زمان یا تاریخ دارید مثل نمایش زمانی که یک محتوا آپلود شده یا زمان باقیمانده از یک تخفیف و... . در این مقاله یاد می‌گیریم چطور از فرمت‌های مختلف زمان (date) استفاده کنیم.

دسترسی به زمان در جاوا اسکریپت

در جاوا اسکریپت از ()new Date یا ()Date برای گرفتن زمان (چه زمان حال و چه یک زمان خاص) استفاده می‌کنیم. تفاوت در اینجاست که ()new Date یک آبجکت جدید زمان برمی‌گرداند، درحالیکه ()Date یک رشته که نشان دهنده‌ی زمان و تاریخ فعلی هست برمی‌گرداند.

let stringDate = Date();
console.log(stringDate); // "Sat Aug 27 2022 14:14:18 GMT+0430 (Iran Daylight Time)"
console.log(typeof(stringDate)); // string

let objectDate = new Date();
console.log(objectDate); // Sat Aug 27 2022 14:15:00 GMT+0430 (Iran Daylight Time)
console.log(typeof(objectDate)); // object

این فرمت‌های کاملِ زمان شامل روز، ماه، سال، ساعت، دقیقه و اطلاعات دیگری می‌شوند که همیشه به آن‌ها نیاز ندارید. دغدغه اصلی این است که بدانیم چگونه می‌توان فرمت این مقادیر زمان را تغییر داد که زمان را به صورت فرمت‌های با خوانایی بیشتر برگرداند تا بتوان از آن‌ها در صفحات وب استفاده کرد به صورتی که برای همه قابل فهم باشند.

تغییر فرمت زمان در جاوا اسکریپت

تغییر فرمت زمان بستگی به شما و نیازتان دارد. در بعضی از مناطق، ماه قبل از روز و بعد از آنها سال می‌آید (06/22/2022). در بعضی دیگر، روز قبل از ماه و سپس سال می‌آید (22/06/2022).

صرف نظر از این که فرمت‌های مختلف به چه شکلی هستند، در نهایت قصد داریم آبجکت زمان را به اطلاعات مورد نیاز خودمان تجزیه کنیم و از آنها بهره ببریم. این کار به کمک متدهای تاریخ در جاوااسکریپت قابل انجام خواهد بود. تعداد زیادی از این متدها وجود دارند اما از آنجایی که در این مقاله با تاریخ‌ها سروکار داریم، به سه تا از آنها نیاز داریم:

()getFullYear: این متد، سال را به صورت یک عدد چهار رقمی برمیگرداند. برای مثال 2022.
()getMonth: با استفاده از این متد می‌توانید ماه را به صورت عددی بین 0 تا 11 بگیرید که هر عدد به معنای ماه ها به ترتیب از ژانویه تا دسامبر هستند. برای مثال 2 اندیسِ ماه مارچ خواهد بود زیرا این اندیس‌ها مانند آرایه‌ها از 0 شروع می‌شوند.
()getDate: از این متد برای گرفتن روز استفاده می‌شود. این متد روز را به صورت یک عدد بین 1 تا 31 برمی‌گرداند. باید توجه داشت که این اعداد مانند متد قبل، اندیس نیستند، بلکه مقدار دقیق روز هستند. پس از 1 شروع می‌شوند (اولین روز ماه).

باید توجه داشت که این متدها فقط بر روی مقدار بازگردانده شده توسط ()new Date، که یک آبجکت زمان هست کار می‌کنند.

let objectDate = new Date();

let day = objectDate.getDate();
console.log(day); // 23

let month = objectDate.getMonth();
console.log(month + 1); // 8

let year = objectDate.getFullYear();
console.log(year); // 2022

همانطور که متوجه شدید به مقدار ماه، 1 واحد اضافه شد زیرا اندیس‎‌هایی که مقدار ماه را برمیگردانند از 0 شروع می‌شوند.

تا به اینجا شما قادر هستید که تمام مقادیر مورد نیاز تاریخ را از آبجکت زمان استخراج کنید و از آنها به هر شکلی که می‌خواهید استفاده کنید.

let format1 = month + "/" + day + "/" + year;
console.log(format1); // 7/23/2022

let format2 = day + "-" + month + "-" + year;
console.log(format2); // 23-7-2022

let format3 = `${month}/${day}/${year}`;
console.log(format3); // 7/23/2022

let format4 = `${day}-${month}-${year}`;
console.log(format4); // 23-7-2022

همچنین اگر بخواهید اعداد تک به همراه 0 نمایش داده شوند میتوانید شرط زیر را درون کدهای خود قرار دهید:

if (day < 10) {
    day = '0' + day;
}

if (month < 10) {
    month = `0${month}`;
}

let format1 = `${month}/${day}/${year}`;
console.log(format1); // 07/23/2022

فرمت زمان با کمک moment.js

Moment.js یک کتابخانه جاوا اسکریپت برای کار با تاریخ و زمان هاست که با استفاده از آن می‌توانید زمان و تاریخ را به هر فرمتی که می‌خواهید تغییر دهید بدون اینکه نیاز به نوشتن خطوط زیاد کد باشد. برای استفاده از این کتابخانه ابتدا باید پکیج مربوطه را در پروژه خود نصب کنید؛ این کار را می‌توان با هر یک از روش‌های پیشنهاد شده در مستندات moment.js انجام دهید.

این کتابخانه قابلیت‌های بسیاری دارد که برای این مقاله فقط تبدیل فرمت تاریخ مورد نیاز ما خواهد بود:

let date = moment().format();

console.log(date); // 2022-08-23T16:50:22-07:00

برای تبدیل این زمان به هر فرمت دلخواه فقط کافیست فرمت دلخواه خود را به عنوان آرگومان به متد ()format ارسال کنید:

let dateFormat1 = moment().format('D-MM-YYYY');
console.log(dateFormat1); // 23-08-2022

let dateFormat2 = moment().format('D/MM/YYYY');
console.log(dateFormat2); // 23/08/2022

let dateFormat3 = moment().format('MM-D-YYYY');
console.log(dateFormat3); // 08-23-2022

let dateFormat4 = moment().format('MM/D/YYYY');
console.log(dateFormat4); // 08/23/2022

جمع‌بندی

در این مقاله به صورت ساده و مقدماتی یاد گرفتیم چگونه تاریخ‌ها را با جاوا اسکریپت یا با کمک کتابخانه moment.js قالب‌بندی کنید. هنگام استفاده از کتابخانه برای پروژه‌های کوچک احتیاط کنید، زیرا کتابخانه‌ها حجم پروژه شما را افزایش می‌دهند. این به این دلیل است که این کتابخانه‌ها برای انجام عملیات‌های زیادی طراحی شده‌اند، اما حتی برای استفاده از تعداد کمی از عملیات آنها، باید کل کتابخانه را نصب کنید.

همیشه توصیه می‌شود اگر پروژه کوچکی دارید که حجم آن برای شما دارای اهمیت است عملیات ساده‌ای مانند این را بدون استفاده از کتابخانه‌های حجیم انجام دهید. مگر در صورتی که روی پروژه‌ای در مقیاس بزرگ کار کنید که نیاز به قالب‌بندی پیچیده‌ای برای تاریخ و زمان‌ها دارد.

توصیه میکنم نگاهی به متدهای زیر داشته باشید. مطمئنم جالب خواهد بود!

()toDateString
()toLocaleString
()toLocaleDateString
()toGMTString
()toUTCString
()toISOString