مدیریت تاریخ در جاوا اسکریپت — از صفر تا صد

۹۰۷ بازدید

آخرین به‌روزرسانی: ۷ شهریور ۱۴۰۲

زمان مطالعه: ۱۳ دقیقه

دانلود PDF مقاله

مدیریت تاریخ در جاوا اسکریپت — از صفر تا صد

مدیریت تاریخ و زمان در بسیاری از برنامه‌های جاوا اسکریپت از اهمیت بالایی برخوردار است. به همین دلیل است که جاوا اسکریپت یک شیء داخلی Date دارد که با آن به مدیریت دستکاری‌های تاریخ می‌پردازد. اشیای Date شامل یک عدد هستند که تعداد میلی‌ثانیه‌هایی که از 1 ژانویه 1970 گذشته است را در قالب زمان UTC نشان می‌دهد. این تاریخ خاص به نام epoch time لینوکس نامیده می‌شود. در این مقاله به طور مفصل در مورد روش‌های مختلف مدیریت تاریخ در جاوا اسکریپت صحبت خواهیم کرد.

با استفاده از شیء Date کارهای زیادی برای دستکاری تاریخ‌ها می‌توان انجام داد. با این حال این شیء مشکلات و نواقص کارکردی زیادی دارد. از این رو کتابخانه‌های شخص ثالث زیادی وجود دارند که از جهات مختلف، تاریخ را بهتر از شیء Date داخلی جاوا اسکریپت مدیریت می‌کنند. Moment.js یکی از محبوب‌ترین این کتابخانه‌ها است و از این رو به طور طبیعی نخستین گزینه‌ای است که برای دستکاری تاریخ در جاوا اسکریپت انتخاب می‌کنیم.

شیء Date جاوا اسکریپت

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

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

پارامترهایی که این شیء می‌پذیرد، شامل رشته تاریخ، شیء Date دیگر، یا مجموعه‌ای به شکل «سال، اندیس ماه، روز، ساعت، دقیقه، ثانیه و میلی‌ثانیه» است. ما می‌توانیم رشته Date را به صورت زیر به سازنده تاریخ ارسال کنیم:

1new Date('2019-01-01');

اگر نتیجه را لاگ کنیم نتیجه زیر را می‌بینیم:

‘Mon Dec 31 2018 16:00:00 GMT-0800 (Pacific Standard Time)’

نتیجه فوق به این دلیل به دست آمده است که تاریخ در قالب UTC ذخیره شده است و مرورگر روی رایانه‌ای در منطقه زمانی Pacific کار می‌کند که 8 ساعت پیش از 1 ژانویه 2019 است. چنان که می‌بینیم ارسال یک تاریخ به صورت رشته به سازنده Date سردرگم‌کننده است. مرورگرهای مختلف رشته‌ها را به صورت مختلفی تجزیه می‌کنند. به طور مشابه متد Date.parse نیز نباید برای تجزیه رشته‌های تاریخ مورد استفاده قرار گیرد. می‌توانیم ببینیم که رشته‌های فقط-تاریخ مانند آن چه در مثال قبلی ارسال کردیم، به صورت UTC و نه زمان محلی نگریسته می‌شوند.

اگر بخواهیم یک شیء Date را به سازنده ارسال کنیم، باید کد زیر را بنویسیم:

1new Date(new Date());

به این ترتیب چیزی مانند زیر به دست می‌آوریم:

‘Sun Oct 20 2019 10:57:58 GMT-0700 (Pacific Daylight Time)’

این زمان به صورت لوکال است.

همچنین امکان ارسال سال، اندیس ماه، روز، ساعت، دقیقه، ثانیه و میلی‌ثانیه به سازنده وجود دارد. تنها ماه و سال الزامی هستند. از این رو می‌توانیم چیزی مانند زیر بنویسیم:

1new Date(2019,0,1,0,0,0,0)

اجرای کد فوق نتیجه زیر را بازگشت می‌دهد:

‘Tue Jan 01 2019 00:00:00 GMT-0800 (Pacific Standard Time)’

توجه کنید که 0 در آرگومان دوم سازنده که به اندیس ماه مربوط است به معنی ماه ژانویه است و بدین ترتیب 1 ماه فوریه و همین طور تا آخر 11 دسامبر را نشان می‌دهد. بقیه آرگومان‌ها مقدار عدد مربوط به خود را نشان می‌دهند. آرگومان اول سال است، سومی روز، چهارمی ساعت، پنجمی دقیقه، ششمی ثانیه و آخری میلی‌ثانیه است.

می‌توان شیء Date را به UNIX timestamp تبدیل کرد که نشانگر تعداد میلی‌ثانیه‌هایی است که از تاریخ 1 ژانویه 1970 UTC گذشته است. به این منظور از عملگر + به صورت زیر استفاده می‌کنیم:

1+new Date(2019,0,1,0,0,0,0)

بدین ترتیب مقدار 1546329600000 در خروجی به دست می‌آید، زیرا تاریخ به صورت عددی درآمده است. روش دیگر برای به دست آوردن timestamp استفاده از متد ()getTime. است. برای تغییر دادن مؤلفه‌های منفرد شیء Date مانند تعیین ساعت یا روز یا به دست آوردن مؤلفه‌ی یک Date مانند روز هفته یا روز ماه، متدهایی وجود دارند که روی شیء Date عمل می‌کنند.

متدهای شیء Date

شیء Date متدهایی دارد که برای تعیین و به دست آوردن اجزای تاریخ و تبدیل زمان به UTX یا تعیین آفست منطقه زمانی مورد استفاده قرار می‌گیرند. برخی متدهای مهم شیء Date شامل موارد زیر هستند:

()Date.now

این متد زمان را به شکل UNIX timestamp با نادیده گرفتن ثانیه کبیسه بازگشت می‌دهد. این متد استاتیک است.

()Date.UTC

این متد زمان جاری را به شکل UNIX timestamp با نادیده گرفتن ثانیه کبیسه بازگشت می‌دهد. این متد استاتیک است. این متد همان پارامترهای آرگومان‌های سازنده Date را می‌گیرد که شامل سال، اندیس ماه، روز، ساعت، دقیقه، ثانیه میلی‌ثانیه است، اما تنها ماه و سال الزامی هستند. از آن می‌توان به صورت زیر استفاده کرد:

1Date.UTC(2019,0,1,1,0,0,0)

کد فوق مقدار زیر را بازگشت می‌دهد:

1546304400000

تابع‌های Getter

در این بخش به معرفی تابع‌های Getter شیء Date می‌پردازیم.

()Date.getDate

این تابع روز ماه را بر اساس زمان محلی بازگشت می‌دهد. برای نمونه اگر داشته باشیم:

1const date = new Date(2019,0,1,0,0,0,0);
2console.log(date.getDate());

مقدار 1 دریافت خواهیم کرد، زیرا به عنوان روز ماه در آرگومان‌های سازنده عنوان شده است.

()Date.getDay

روز هفته (0 تا 6) را برای تاریخ مشخص‌شده بر اساس زمان محلی بازگشت می‌دهد که 0 نشان‌دهنده روز یکشنبه و 6 نشان‌دهنده روز شنبه است و 1 تا 5 نیز روزهای بین این دو را به ترتیب نمایش می‌دهند. برای نمونه می‌توانیم کد زیر را بنویسیم:

1const date = new Date(2019,0,1,0,0,0,0);
2console.log(date.getDay());

خروجی آن عدد 2 است که نماینده روز سه‌شنبه است.

()Date.getFullYear

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

1const date = new Date(2019,0,1,0,0,0,0);
2console.log(date.getFullYear());

خروجی کد فوق عدد 2019 است که قالب 4 رقمی سال برای تاریخ date محسوب می‌شود.

()Date.getHours

ساعت (0-23) تاریخ تعیین‌شده را برحسب زمان محلی بازگشت می‌دهد. برای نمونه می‌توانیم کدی به صورت زیر بنویسیم:

1const date = new Date(2019,0,1,0,0,0,0);
2console.log(date.getHours());

که خروجی آن چیزی است که در آرگومان‌های ساعت در سازنده تعیین‌شده است.

()Date.getMilliseconds

میلی‌ثانیه‌های تاریخ تعیین‌شده از 0 تا 999 را بر اساس زمان محلی نمایش می‌دهد. برای نمونه می‌توانیم بنویسیم:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2console.log(date.getMilliseconds());

خروجی کد فوق تعداد میلی‌ثانیه‌های تعیین‌شده در شیء date است که باید چنان که در سازنده ذکر کرده‌ایم، 0 باشد.

()Date.getMinutes

تابع فوق دقیقه (0-59) مربوط به تاریخ را در زمان محلی بازگشت می‌دهد. برای نمونه می‌توانیم کدی به صورت زیر بنویسیم:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2console.log(date.getMinutes());

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

()Date.getMonth

ماه (از 0 برای ژانویه تا 11 برای دسامبر) را برای یک تاریخ مشخص‌شده برحسب زمان محلی بازگشت می‌دهد. برای نمونه می‌توانیم کدی مانند زیر بنویسیم:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2console.log(date.getMonth());

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

()Date.getSeconds

تعداد ثانیه‌های (0-59) تاریخ تعیین‌شده را برحسب زمان محلی بازگشت می‌دهد. برای نمونه می‌توانیم کد زیر را بنویسیم:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2console.log(date.getSeconds());

در این صورت مقدار ثانیه به دست می‌آید که مطابق آرگومان تعیین‌شده در سازنده است.

()Date.getTime

UNIX timestamp را برای تاریخ تعیین‌شده بازگشت می‌دهد که تعداد میلی‌ثانیه‌های گذشته از تاریخ 1 ژانویه 1970 و زمان 00:00:00 UTC است. در مورد اعدادِ قبل از این زمان، عدد خروجی منفی خواهد بود. برای مثال می‌توانیم کدی به صورت زیر بنویسیم:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2console.log(date.getTime());

در خروجی تابع ()getTime مقدار 1546329600000 به دست می‌آید. یک روش میانبر برای این تابع استفاده از عملگر + است. بدین ترتیب می‌توانیم کدی مانند زیر بنویسیم:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2console.log(+date);

اگر کد فوق را اجرا کنیم، همان نتیجه قبلی به دست می‌آید.

()Date.getTimezoneOffset

آفست منطقه زمانی را برحسب دقیقه برای مکان فعلی که روی سیستم میزبان تعیین‌شده بازگشت می‌دهد به مثال زیر توجه کنید:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2console.log(date.getTimezoneOffset());

در صورتی که دستگاه میزبان روی منطقه زمانی Pacific تنظیم شده باشد، خروجی آن مقدار 480 است زیرا در تاریخ 1 ژانویه 2018 منطقه زمانی Pacific 8 ساعت بعد از UTC است و از این رو آفست زمانی 480 دقیقه به دست می‌آید که برابر با 8 ساعت است.

()Date.getUTCDate

روز ماه را از 1 تا 31 برای تاریخ تعیین‌شده برحسب UTC بازگشت می‌دهد. برای نمونه اگر بنویسیم:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2console.log(date.getUTCDate());

مقدار 1 به دست می‌آید، زیرا تاریخ 1 ژانویه 2019 را تعیین کرده‌ایم.

()Date.getUTCDay

روز هفته را از 0 تا 6 برای تاریخ تعیین‌شده برحسب UTC بازگشت می‌دهد. به مثال زیر توجه کنید:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2console.log(date.getUTCDay());

خروجی آن برابر با 2 است، زیرا 1 ژانویه 2019، برابر با سه‌شنبه است.

()Date.getUTCFullYear

سال را در قالب عددی 4 رقمی برای تاریخ تعیین‌شده برحسب UTC بازگشت می‌دهد. برای نمونه می‌توانیم کد زیر را بنویسیم:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2console.log(date.getUTCFullYear());

که مقدار 2019 را بازگشت می‌دهد و این عددی است که در آرگومان‌های سازنده شیء ذکر شده است.

()Date.getUTCHours

ساعت را از 0 تا 23 برای تاریخ تعیین‌شده برحسب UTC بازگشت می‌دهد. به مثال زیر توجه کنید:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2console.log(date.getUTCHours());

اگر رشته locale روی منطقه زمانی Pacific تعیین‌شده باشد، عدد 8 به دست می‌آید، زیرا ساعت در زمان محلی 8 تعیین‌شده است که برابر با ساعت 8 در UTC در تاریخ 1 ژانویه 2019 است.

()Date.getUTCMilliseconds

تعداد میلی‌ثانیه‌های تاریخ تعیین‌شده را از 0 تا 999 بر حسب UTC بازگشت می‌دهد. برای نمونه می‌توانیم کدی مانند زیر بنویسیم:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2console.log(date.getUTCMilliseconds());

که خروجی آن تعداد میلی‌ثانیه‌های سپری‌شده در شیء Date است که باید 0 باشد، چون در سازنده شیء چنین تعیین کرده‌ایم.

()Date.getUTCMonth

ماه را از 0 برای ژانویه تا 11 برای دسامبر، برای تاریخ تعیین‌شده برحسب UTC بازگشت می‌دهد. به مثال زیر توجه کنید:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2console.log(date.getUTCMonth());

خروجی آن اندیس ماه است که در شیء date تعیین‌شده است و باید برابر با 0 باشد، چون در سازنده چنین قید کرده‌ایم.

()Date.getUTCSeconds

تعداد ثانیه‌ها (0-59) را برای تاریخ تعیین‌شده برحسب UTC بازگشت می‌دهد. برای نمونه می‌توانیم کدی مانند زیر بنویسیم:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2console.log(date.getUTCSeconds());

که مقدار 0 در خروجی می‌دهد، زیرا در سازنده چنین تعیین کرده‌ایم.

()Date.getYear

عدد سال را بازگشت می‌دهد که معمولاً 2 تا 3 رقم برای تاریخ تعیین‌شده برحسب منطقه زمانی محلی است.

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2console.log(date.getUTCSeconds());

خروجی کد فوق عدد 119 است که برای تاریخ 2019 است. اگر به جای کد قبلی، کدی به صورت زیر بنویسیم:

1const date = new Date(1900, 0, 1, 0, 0, 0, 0);
2console.log(date.getYear());

عدد 1900 به دست می‌آید و اگر کدمان را به صورت زیر تغییر دهیم:

1const date = new Date(1900, 0, 1, 0, 0, 0, 0);
2console.log(date.getYear());

در این صورت برای تاریخ 2000 عدد 100 به دست می‌آید. بنابراین 1900 بر اساس متد ()getYear برابر با 0 سال است. بهتر است که از متد ()getYear به جای دریافت تاریخ کامل از شیء Date استفاده کنیم.

تابع‌های Setter

شیء Date تابع‌های Setter متناظری نیز همانند تابع‌های Getter که در بخش قبلی بررسی کردیم دارد. در ادامه فهرست آن‌ها را با هم مرور می‌کنیم.

()Date.setDate

روز ماه را بر اساس زمان محلی تعیین می‌کند. برای نمونه می‌توانیم بنویسیم:

1const date = new Date(2019,0,1,0,0,0,0);
2date.setDate(2)
3console.log(date);

خروجی کد فوق در صورت تعیین منطقه زمانی دستگاه میزبان روی Pacific برابر با مقدار زیر خواهد بود:

 ‘Wed Jan 02 2019 00:00:00 GMT-0800 (Pacific Standard Time)’

چون در تابع setDate عدد 2 ذکر شده است.

()Date.setFullYear

سال را در قالب 4 رقمی برای تاریخ مفروض برحسب زمان محلی تعیین می‌کند. به مثال زیر توجه کنید:

1const date = new Date(2019,0,1,0,0,0,0);
2date.setFullYear(2020)
3console.log(date.getFullYear());

در این صورت عدد 2020 به دست می‌آید که قالب 4 رقمی سال برای date است.

()Date.setHours

ساعت (0-23) را برای تاریخ مفروض برحسب زمان محلی تعیین می‌کند. برای نمونه می‌توانیم کد زیر را بنویسیم:

1const date = new Date(2019,0,1,0,0,0,0);
2date.setHours(3)
3console.log(date.getHours());

که در زمان فراخوانی getHours مقدار 3 به دست می‌دهد و این همان مقداری است که در آرگومان ساعت تابع setHours تعیین کرده‌ایم.

()Date. setMilliseconds

میلی‌ثانیه‌های تاریخ تعیین‌شده را از 0 تا 999 برحسب زمان محلی تعیین می‌کند. برای نمونه می‌توانیم کدی به صورت زیر بنویسیم:

1const date = new Date(2019,0,1,0,0,0,0);
2date.setMilliseconds(3)
3console.log(date.getMilliseconds());

کد فوق میلی‌ثانیه‌های تعیین‌شده را در شیء date تنظیم می‌کند که در صورت فراخوانی تابع getMilliseconds باید مقدار 2 بازگشت می‌دهد، چون در زمان فراخوانی تابع setMilliseconds این مقدار را ارسال کرده‌ایم.

()Date.setMinutes

دقیقه‌ها (0-59) را برای تاریخ مفروض برحسب زمان محلی تعیین می‌کند برای نمونه می‌توانیم کدی مانند زیر بنویسیم:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2date.setMinutes(20)
3console.log(date.getMinutes());

در صورتی که تابع ()getMinutes را فراخوانی کنیم، مقدار 20 به دست می‌آید، چون در تابع setMinutes چنین تنظیم کرده‌ایم.

()Date.setMonth

ماه (از 0 برای ژانویه تا 11 برای دسامبر) را برای تاریخ مفروض برحسب زمان محلی تعیین می‌کند. به مثال زیر توجه کنید:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2date.setMonth(3)
3console.log(date.getMonth());

در این صورت در زمان فراخوانی ()getMonth مقدار 3 به دست می‌آید که از سوی تابع ()setMonth تنظیم شده است.

()Date.setSeconds

ثانیه‌ها (0-59) را در تاریخ مفروض برحسب زمان محلی تعیین می‌کند. برای نمونه می‌توانیم کدی مانند زیر بنویسیم:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2date.setSeconds(10);
3console.log(date.getSeconds());

در این صورت در زمان فراخوانی تابع ()getSeconds عدد 10 به دست می‌آید که از سوی تابع فوق تنظیم شده است.

()Date.setTime

UNIX timestamp را برای تاریخ مفروض تعیین می‌کند که برابر با تعداد میلی‌ثانیه‌های سپری‌شده از تاریخ January 1, 1970 00:00:00 UTC است. در مورد زمان‌های قبل‌تر از آن، مقدار بازگشتی عددی منفی خواهد بود. برای مثال می‌توانیم کدی مانند زیر بنویسیم:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2date.setTime(100)
3console.log(date.getTime());

در این صورت هنگام فراخوانی تابع ()getTime عدد 100 بازگشت می‌یابد که عددی است که با استفاده از تابع فوق تنظیم شده است.

()Date.setUTCDate

روز ماه را از 1 تا 31 برای تاریخ مفروض برحسب UTC تعیین می‌کند. برای نمونه می‌توانیم کدی مانند زیر بنویسیم:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2date.setUTCDate(2)
3console.log(date.getUTCDate(2));

که خروجی آن مقدار 2 است، زیرا عدد 2 در setUTCDate تعیین‌شده است.

()Date.setUTCFullYear

سال را در قالب 4 رقمی برای تاریخ مفروض برحسب UTC تعیین می‌کند. برای نمونه اگر بنویسیم:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2date.setUTCFullYear(2020)
3console.log(date.getUTCFullYear());

مقدار 220 در زمان فراخوانی ()getUTCFullYear به دست می‌آید، زیرا این همان عددی است که در تابع ()setUTCFullYear قید شده است.

()Date.setUTCHours

ساعت را از 0 تا 23 برای تاریخ مفروض برحسب UTC تعیین می‌کند. به مثال زیر توجه کنید:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2date.setUTCHours(2)
3console.log(date.getUTCHours());

به این ترتیب در زمان فراخوانی تابع ()getUTCHours عدد 2 به دست می‌آید، زیرا تابع ()setUTCHours این مقدار را ثبت کرده است.

()Date.setUTCMilliseconds

میلی‌ثانیه‌های تاریخ مفروض را از 0 تا 999 برحسب UTC تعیین می‌کند. برای نمونه می‌توانیم کدی مانند زیر بنویسیم:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2date.setUTCMilliseconds(10)
3console.log(date.getUTCMilliseconds());

این کد تعداد میلی‌ثانیه‌ها را با ()getUTCMilliseconds به دست می‌آورد که مقدار آن باید 10 باشد، چون این همان عددی است که در تابع ()getUTCMilliseconds تعیین کرده‌ایم.

()Date.setUTCMonth

عدد ماه را از 0 برای ژانویه تا 11 برای دسامبر برای تاریخ مفروض برحسب UTC بازگشت می‌دهد. برای نمونه می‌توانیم کدی به صورت زیر بنویسیم:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2date.setUTCMonth(3);
3console.log(date.getUTCMonth());

که عدد ماه تعیین‌شده برای شیء date را که برابر با 3 است بازگشت می‌دهد.

()Date.setUTCSeconds

ثانیه‌ها (0-59) را برای تاریخ مفروض برحسب UTC تعیین می‌کند. برای نمونه به مثال زیر توجه کنید:

1const date = new Date(2019, 0, 1, 0, 0, 0, 0);
2date.setUTCSeconds(10);
3console.log(date.getUTCSeconds());

خروجی آن برای فراخوانی تابع ()getUTCSeconds عدد 10 است، زیرا این همان عددی است که در زمان فراخوانی ()setUTCSeconds قید کرده‌ایم. متد ()setYear نیز سال را تعیین می‌کند. البته استفاده از متد ()setFullYear بسیار بهتر از دریافت سال کامل از شیء Date است.

شیء Date چند محدودیت دارد. برای نمونه از مناطق زمانی پشتیبانی نمی‌کند. این وضعیت زمانی که می‌خواهیم از مناطق زمانی در تاریخ‌های خود استفاده کنیم، موجب بروز مشکلانی می‌شود. جاوا اسکریپت تنها از منطقه زمانی محلی، UTC و آفست‌های منطقه زمانی مرتبط با UTC پشتیبانی می‌کند. در زمان دستکاری اشیای Date تنها برخی از تبدیل‌ها بین این منطقه‌های زمانی مجاز هستند. برای مثال هنگامی که اشیای تاریخ را به رشته‌های تاریخ تبدیل می‌کنیم، تنها می‌توانیم بین منطقه زمانی و UTC انتخاب کنیم. شیء Date جاوا اسکریپت تاریخ‌ها را به صورت داخلی برحسب UTC ذخیره می‌کند.

Moment.js

به دلیل محدودیت‌هایی که در بخش قبلی توضیح دادیم، دستکاری تاریخ و زمان در جاوا اسکریپت کار دشواری است. حتی با استفاده از تابع‌هایی که در مورد شیء Date وجود دارد و در بخش قبل به‌تفصیل معرفی کردیم، احتمال بروز باگ و خطا زیاد است. ضمناً هیچ تابعی برای قالب‌بندی زمان و تاریخ وجود ندارد که مشکل عمده‌ای محسوب می‌شود. برای حل این مشکل، از Moment.js استفاده می‌کنیم. این بهترین کتابخانه موجود برای کار کردن با زمان محسوب می‌شود.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

اشیای Date بومی جاوا اسکریپت با مناطق زمانی و تاریخ‌های YYYY-MM-DD در زمان UTC برخلاف زمان محلی قرار می‌گیرند. بدین ترتیب باگ‌هایی برای توسعه‌دهندگان که با این مشکل آشنا نیستند، پیش می‌آید. ضمناً تفاوت‌هایی در پشتیبانی از اجزای تاریخ در مرورگرهای مختلف وجود دارد. همچنین جمع و تفریق timestamp-ها با استفاده از تابع‌های Date داخلی جاوا اسکریپت کار دشواری است. هیچ روشی برای انجام این کار به جز نوشتن کدهای زیاد و بررسی‌های فراوان وجود ندارد. ضمناً هیچ روشی برای مقایسه 2 زمان وجود ندارد. قالب‌بندی تاریخ‌ها نیز بدون نوشتن کد اختصاصی یا استفاده از کتابخانه‌های شخص ثالث میسر نخواهد بود.

Moment.js همه این مشکلات را با ارائه تابع‌هایی که همه این عملیات را انجام می‌دهند حل کرده است. این کتابخانه تابع‌هایی برای تجزیه و قالب‌بندی تاریخ‌ها ارائه کرده است. سازنده‌ی moment همان جایی است که رشته تاریخ را ارسال می‌کنیم و یک شیء moment ایجاد خواهد شد. برای نمونه می‌توانیم مقدار زیر را ارسال کنیم:

1moment('2019-08-04')

و شیء momnet بازگشت می‌یابد. می‌توان آن را با شیء moment دیگری مقایسه کرد تا تاریخ و زمان جاری به دست آید. همچنین یک آرگومان دوم نیز دارد. اگر بخواهیم مطمئن شویم که تاریخ به صورت YYYY-MM-DD تجزیه شده است باید کد زیر را بنویسیم:

1moment(‘2019–08–04’, 'YYYY-MM-DD')

اگر قالب تاریخ یا زمان را نمی‌دانید می‌توانید یک آرایه از قالب‌ها ارسال کنید تا Moment قالب صحیح را انتخاب کند:

1moment('2019–08–04', ['YYYY-MM-DD', 'DD-MM-YYYY']);

پس از ایجاد شیء Moment می‌توانید کارهای مختلفی از قبیل قالب‌بندی تاریخ را انجام دهید:

1const a = moment('2019–08–04', 'YYYY-MM-DD').format('MMMM Do YYYY, h:mm:ss a');
2console.log(a);// August 4th 2019, 12:00:00 am
3const b = moment('2019–08–04', 'YYYY-MM-DD').format('dddd');
4console.log(b);// Sunday
5const c = moment('2019–08–04', 'YYYY-MM-DD').format("MMM Do YY");
6console.log(c);// Aug 4th 19
7const d = moment('2019–08–04', 'YYYY-MM-DD').format('YYYY [escaped] YYYY');    
8console.log(d);// 2019 escaped 2019
9const e = moment('2019–08–04', 'YYYY-MM-DD').format();
10console.log(e);// 2019-08-04T00:00:00-07:00

در مثال فوق، می‌بینیم که تاریخ به روش‌های بسیار گوناگونی قالب‌بندی می‌شود. همچنین می‌توانیم نسبت یک زمان را با زمان دیگر با نوشتن کد زیر تعیین کنیم:

1const augDate = moment('2019–08–04', 'YYYY-MM-DD');
2const sepDate = moment('2019–09–04', 'YYYY-MM-DD');
3console.log(augDate.from(sepDate)); // a month ago

همچنین می‌توانیم تاریخ‌ها را به هم اضافه یا کسر کنیم:

1const augDate = moment('2019–08–04', 'YYYY-MM-DD');
2const sepDate = moment('2019–09–04', 'YYYY-MM-DD');
3console.log(augDate.add(10, 'days').calendar()); // 08/14/2019
4console.log(augDate.subtract(10, 'days').calendar()); // 07/25/2019

بدین ترتیب مقایسه 2 تاریخ کار آسانی است:

1moment('2010-01-01').isSame('2010-01-01', 'month'); // true
2moment('2010-01-01').isSame('2010-05-01', 'day');   // false, different month
3moment('2008-01-01').isSame('2011-01-01', 'month'); // false, different year

همچنین می‌توانید بررسی کنید آیا یک تاریخ دارای «زمان تابستانی» (Daylight Saving Time) است یا نه:

1const augDate = moment('2019–08–04', 'YYYY-MM-DD');
2const decDate = moment('2019–12–04', 'YYYY-MM-DD');
3console.log(augDate.isDST()) // true
4console.log(decDate.isDST()) // false

ضمناً می‌توانید هر زمان با فراخوانی تابع ()toDate روی شیء Moment به تاریخ بومی جاوا اسکریپت بازگردید.

سخن پایانی

چنانکه در این مقاله دیدیم، شیء Date جاوا اسکریپت ظرفیت‌های محدودی در زمینه دستکاری تاریخ‌ها دارد. همچنین از تجزیه و تحلیل تاریخ‌ها به خوبی پشتیبانی نمی‌کند و قابلیتی برای قالب‌بندی آسان تاریخ‌ها ندارد. به همین دلیل است که به کتابخانه‌هایی مانند Moment.js برای پر کردن این شکاف نیاز داریم تا بتوانیم کدی عاری از باگ برای دستکاری تاریخ‌ها به روشی آسان بنویسیم.

فیلم مجموعه آموزش جاوا اسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

بر اساس رای ۶ نفر

آیا این مطلب برای شما مفید بود؟

اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.

ثبت نظر

منابع:

gitconnected

میثم لطفی (+)

«میثم لطفی» در رشته‌های ریاضیات کاربردی و مهندسی کامپیوتر به تحصیل پرداخته و شیفته فناوری است. وی در حال حاضر علاوه بر پیگیری علاقه‌مندی‌هایش در رشته‌های برنامه‌نویسی، کپی‌رایتینگ و محتوای چندرسانه‌ای، در زمینه نگارش مقالاتی با محوریت نرم‌افزار با مجله فرادرس همکاری دارد.