تابع Date در جاوا اسکریپت – آنچه باید درباره کار با تاریخ و زمان بدانید

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

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

تابع Date در جاوا اسکریپت چیست؟

در جاوا اسکریپت، وقتی در مورد تاریخ صحبت می‌کنیم، اساساً واحدهای کوچکی به نام میلی‌ثانیه را از نقطه شروعی که به عنوان دوره «EcmaScript» شناخته می‌شود، می‌شماریم. این نقطه شروع همان زمان تولد جاوا اسکریپت است که در «۱ ژانویه ۱۹۷۰» (٩ شهريور ۱۳۴۹) در منطقه زمانی به نام «ساعت هماهنگ جهانی» (UTC) اتفاق افتاد. همین لحظه شروع به عنوان نقطه مرجع در رایانه‌ها برای پیگیری تاریخ و زمان نیز استفاده می‌شود. در اصل تابع Date در جاوا اسکریپت به روش‌ها و عملیات داخلی اشاره دارد که امکان دستکاری، قالب‌بندی و مقایسه مقادیر تاریخ و زمان را ارائه می‌دهد.

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

کلیک کنید

ایجاد تاریخ در جاوا اسکریپت

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

• با ارائه رشتهdate
• با استفاده از آرگومان‌های مرتبط با تاریخ
• با استفاده از مهر زمانی
• ایجاد تاریخ بدون آرگومان

همچنین چهار رویکرد برای ایجاد نمونه تاریخ وجود دارد که این رویکردها به‌صورت زیر هستند:

• new Date()‎
• new Date(milliseconds)
• new Date(Date string)
• new Date(year, month, day, hours, minutes, seconds, milliseconds)

استفاده از رویکرد رشته Date برای تعیین تاریخ در جاوا اسکریپت

هنگام استفاده از رویکرد رشته Date در جاوا اسکریپت، با وارد کردن نوعی «رشته» (استرینگ | String) Date به تابع Date در جاوا اسکریپت، تاریخ یا زمان شکل می‌گیرد. مانند مثال زیر:

1new Date('1988-03-21')

به طور طبیعی و در حالت معمولی کاربران هنگام تعیین تاریخ و زمان در جاوا اسکریپت ‌به سمت رویکرد رشته Dateتمایل پیدا می‌کنند و این نوعی عادت برنامه نویسی رایج است. برای مثال، اگر کاربری بنویسد «۲۱-۰۳-۱۹۸۸»، کاربران دیگر بدون متوجه می‌شوند که این تاریخ نشان‌دهنده ٢١ مارس ١٩٨٨ است. با این حال، در جاوا اسکریپت، درج مثلاً «۲۱-۰۳-۱۹۸۸» نوعی نتیجه «تاریخ نامعتبر» (Invalid Date) به کاربر نشان می‌دهد که دلیلی منطقی پشت این رفتار نهفته است.

1new Date('21-03-1988') returns Invalid Date.

تفاسیر تاریخ در مناطق مختلف جهانی متفاوت است. برای مثال نمونه تاریخ «۱۱-۰۶-۲۰۱۹» را در نظر بگیرید، بسته به کنوانسیون تاریخ منطقه‌ای، این تاریخ می‌تواند به معنای ۱۱ ژوئن یا ۶ نوامبر باشد. این ابهام تا زمانی که سیستم تاریخ مورد استفاده مشخص نباشد همچنان باقی خواهد ماند. در جاوا اسکریپت، استفاده از رشته Dateمستلزم پایبندی به نوعی قالب شناخته شده جهانی است. یکی از این قالب‌های رایج، قالب تاریخ و زمان «ISO 8601 Extended» به‌حساب می‌آید که به صورت زیر است.

1// ISO 8601 Extended format
2`YYYY-MM-DDTHH:mm:ss.sssZ`

تفسیر قالب تاریخ و زمان ISO 8601

در این بخش به تفکیک قالب رایج «ISO 8601 Extended» می‌پردازیم. این قالب به صورت زیر مفروض است:

1// ISO 8601 Extended format
2`YYYY-MM-DDTHH:mm:ss.sssZ`

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

فیلم آموزش پروژه محور جاوا اسکریپت، CSS و HTML – طراحی صفحه فرود واکنشگرا

کلیک کنید

• YYYY: سال ۴ رقمی
• MM: ماه ۴ رقمی (ژانویه به عنوان ۰١، دسامبر به عنوان ١٢)
• DD: روز ۴ رقمی (از ۰ تا ٣١)
• -: جداکننده‌های تاریخ
• T: نشان‌دهنده شروع زمان
• HH: ساعت ٢ رقمی در قالب ۲۴ ساعته (۰ تا ٢۳)
• mm : دقیقه (۰ تا ۵٩)
• ss: ثانیه (۰ تا ۵٩)
• sss: میلی‌ثانیه (۰ تا ٩٩٩)
• :: جداکننده‌های زمان
• Z: وجود آن نشان‌دهنده UTC و نبود آن به معنای زمان محلی است (در صورت ارائه زمان).

هنگام ایجاد تاریخ، گنجاندن ساعت، دقیقه، ثانیه و میلی‌ثانیه اختیاری است. بنابراین، برای ایجاد تاریخ برای مثال ١١ ژوئن ٢۰١٩، می‌توان از: new Date ('2019-06-11')استفاده کرد.

معایب رویکرد رشته Date در جاوا اسکریپت

با وجود همه مزایایی که رویکرد رشته Date در جاوا اسکریپت در ایجاد تاریخ و زمان دارد یک سری انتقادات نیز به آن وارد است. هنگام ساختن تاریخ‌ها با رشته‌های تاریخ مشکلی مهم وجود دارد که هنگام ثبت تاریخ این مشکل آشکار می‌شود. برای مثال در نمونه تاریخ بالا برای مناطق زمانی که زمان آن‌ها از زمان گرینویچ (GMT) عقب است، تاریخ ایجاد شده ١۰ ژوئن را نشان می‌دهد. برعکس، اگر قبل از GMT قرار داشته باشد، تاریخ به عنوان ١١ ژوئن نمایش داده می‌شود.

این ویژگی به این دلیل به وجود می‌آید که در این مورد خاص تاریخ رشته به شیوه‌ای غیرعادی رفتار می‌کند. وقتی تاریخ بدون تعیین زمان، مشخص شود، به طور پیش‌فرض روی UTC قرار می‌گیرد. در مثال قبلی، ('2019-06-11')به طور مؤثر تاریخ ١١ ژوئن ٢۰١٩، ساعت ١٢:۰۰ در UTC را می‌سازد. در نتیجه، افرادی که در مناطق قبل از GMT زندگی می‌کنند، به‌جای ١١ ژوئن، ١۰ ژوئن را دریافت خواهند کرد.

برای ایجاد تاریخ در زمان محلی به وسیله روش رشته Date در جاوا اسکریپت، باید بخش زمانی را وارد کرد. برای اطمینان از دقت، حداقل باید HHبه معنای ساعت و mmبه معنای دقیقه را ارائه داد، در غیر این صورت ممکن است برای مثال مرورگر گوگل کروم تاریخ نامعتبری را بازگرداند. به عنوان مثال تاریخ زیر مفروض است:

1('2019-06-11T00:00')

دوگانگی بین زمان محلی و UTC هنگام برخورد با رشته‌های تاریخ می‌تواند موجب ایجاد خطاهای پنهان شود. برای کاهش این خطاها، توصیه می‌شود که از رویکرد ایجاد تاریخ مبتنی بر رشته Dateخودداری شود. همچنین توجه به این نکته مهم است که «شبکه توسعه‌دهندگان موزیلا فایرفاکس» (Mozilla Developer Network) به دلیل تفاوت در نحوه تفسیر رشته‌های Dateبه وسیله مرورگرهای مختلف، از استفاده از رویکرد رشته تاریخ جلوگیری خواهد کرد. MDN پیشنهاد می‌کند هنگام ایجاد تاریخ، روش‌های مبتنی بر آرگومان یا مهر زمانی استفاده شوند.

استفاده از آرگومان های تاریخ در جاوا اسکریپت

روشی دیگر برای استفاده مؤثر از تابع Date در جاوا اسکریپت استفاده از آرگومان‌های تاریخ و زمان است که در حالت معمولی کاربران می‌توانند حداکثر هفت آرگومان برای ایجاد تاریخ و زمان به کار بگیرند.

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

کلیک کنید

این هفت آرگومان به صورت موارد زیر هستند:

• سال: نمایش ۴ رقمی سال.
• ماه: عددی که ماه را نشان می‌دهد (١١-۰). این اندیس در حالت پیش‌فرض صفر بوده و صفر مربوط به ماه ژانویه است. در صورت عدم ارائه به صورت پیش‌فرض مقدار ۰ لحاظ می‌شود.
• روز: نشان‌دهنده روز ماه (٣١-١) است. در صورت عدم ارائه به صورت پیش‌فرض مقدار آن ١ در نظر گرفته می‌شود.
• ساعت: نشان‌دهنده ساعت روز است (٢٣-۰). در صورت عدم ارائه به صورت پیش‌فرض ۰ در نظر گرفته خواهد شد.
• دقیقه: بیانگر دقیقه (۵٩-۰) است. در صورت عدم ارائه به صورت پیش‌فرض ۰ در نظر می‌شود.
• ثانیه: ثانیه‌ها (۵٩-۰) را مشخص می‌کند. در صورت عدم ارائه به صورت پیش‌فرض ۰ به آن اختصاص می‌شود.
• میلی‌ثانیه: این آرگومان میلی‌ثانیه‌ها را توصیف می‌کند (٩٩٩-۰). در صورت عدم ارائه به صورت پیش‌فرض ۰ در نظر می‌شود. مثال زیر نحوه استفاده از این رویکرد ایجاد تاریخ در جاوا اسکریپت را نشان می‌دهد:

1// 11th June 2019, 5:23:59am, Local Time
2new Date(2019, 5, 11, 5, 23, 59)

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

• سال
• ماه
• روز
• ساعت
• دقیقه
• ثانیه
• میلی‌ثانیه

مثال زیر نحوه استفاده از این رویکرد را نشان می‌دهد:

1new Date(2017, 3, 22, 5, 23, 50)
2// Interpretation:
3// Year: 2017
4// Month: April (since months are zero-indexed)
5// Date: 22
6// Hours: 05
7// Minutes: 23
8// Seconds: 50

یکی از جنبه‌های قابل توجه تابع Date در جاوا اسکریپت این است که مقدار ماه آن از اندیس‌سازی مبتنی بر صفر استفاده می‌کند. این بدان معناست که ماه ژانویه به صورت ۰، فوریه به عنوان ١، مارس به عنوان ٢ و غیره نمایش داده می‌شوند. در زیر مثال‌های بیشتری برای آشنایی با این رویکرد آورده شده است:

1// 21st March 1988, 12am, Local Time.
2new Date(1988, 2, 21)
3
4// 25th December 2019, 8am, Local Time.
5new Date(2019, 11, 25, 8)
6
7// 6th November 2023, 2:20am, Local Time.
8new Date(2023, 10, 6, 2, 20)
9
10// 11th June 2019, 5:23:59am, Local Time.
11new Date(2019, 5, 11, 5, 23, 59)

باید به این نکته توجه داشت که تاریخ‌هایی که با استفاده از آرگومان‌ها ساخته شده‌اند، همه در زمان محلی هستند. این کار سردرگمی بین زمان محلی و «ساعت جهانی هماهنگ» (UTC) را دور می‌زند و کار برنامه‌نویس را راحت می‌کند، با این حال اگر کاربری به تاریخ مبتنی بر UTC نیاز داشته باشد، می‌تواند آن را به صورت زیر ایجاد کند:

1// 11th June 2019, 12am, UTC.
2new Date(Date.UTC(2019, 5, 11))

ایجاد تاریخ با مهر زمانی

در جاوا اسکریپت، مهر زمانی نشان دهنده مدت‌زمان برحسب میلی‌ثانیه است که از ۱ ژانویه ۱۹۷۰ اتفاق افتاده است که این زمان به عنوان زمان دوره «یونیکس» (Unix) نیز شناخته می‌شود. در عمل، مهرهای زمانی به ندرت برای شروع تاریخ استفاده می‌شوند. در عوض، هدف آن‌ها مقایسه تاریخ‌ها با یکدیگر است. مثال زیر در این رابطه اهمیت زیادی دارد.

1// 11th June 2019, 8am (in my Local Time, Singapore)
2new Date(1560211200000)

ایجاد تاریخ در جاوا اسکریپت بدون آرگومان

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

1new Date()

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

از خروجی بالا می‌توان متوجه شد که تاریخ ٣۰ ماه آگوست و ساعت ١٢:٣٧:٣٣ به وقت ایران است.

مثالی برای new Date(milliseconds)

این بخش مربوط به ارائه مثالی برای استفاده از میلی‌ثانیه برای ایجاد تاریخ است. تابع Date در جاوا اسکریپت شامل نوعی مقدار عددی است که با تعداد میلی‌ثانیه از ١ ژانویه ١٩٧۰ در زمان هماهنگ جهانی (UTC) مطابقت دارد. با فراخوانی new Date(milliseconds)نوعی شی Dateتازه با افزودن تعدادی مشخص شده میلی‌ثانیه به نقطه مرجع زمان صفر، تشکیل می‌شود. مانند مثال زیر:

1const time1 = new Date(0);
2
3// epoch time
4console.log(time1); // Thu Jan 01 1970 05:30:00
5
6// 100000000000 milliseconds after the epoch time
7const time2 = new Date(100000000000)
8console.log(time2); // Sat Mar 03 1973 15:16:40

باید به این نکته توجه داشت که ١۰۰۰ میلی‌ثانیه برابر با ١ ثانیه است.

فیلم آموزش تعریف توابع در جاوا اسکریپت (JavaScript) (رایگان) در فرادرس

کلیک کنید

مثالی برای ایجاد تاریخ با رشته Date

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

١. از فرمت تاریخ ISO می‌توان در حالت معمولی استفاده کرد. این قالب تاریخ در بالا هم بحث شد و کاربران می‌توانند شی Dateرا با این فرمت ایجاد کنند که مثال زیر برای بیان این مفهوم است.

1// ISO Date (International Standard)
2const date = new Date("2020-07-01");
3
4// The resulting date corresponds to UTC
5console.log(date); // Wed Jul 01 2020 05:45:00 GMT+0545

٢. علاوه بر این، می‌توان فقط سال و ماه یا فقط سال را مانند مثال زیر به آن وارد کرد:

1const date = new Date("2020-07");
2console.log(date); // Wed Jul 01 2020 05:45:00 GMT+0545
3
4const date1 = new Date("2020");
5console.log(date1); // Wed Jul 01 2020 05:45:00 GMT+0545

٣. همچنین زمان‌های مشخصی را نیز می‌توان به تاریخ‌های ISO به صورت زیر اضافه کرد.

1const date = new Date("2020-07-01T12:00:00Z");
2console.log(date); // Wed Jul 01 2020 17:45:00 GMT+0545

باید به این نکته توجه کرد که در قالب‌های تاریخ ISO، تاریخ و زمان با استفاده از حرف Tبزرگ از هم جدا می‌شوند. علاوه بر این، ساعت جهانی هماهنگ (UTC) با حرف بزرگ Zمشخص می‌شود.

قالب تاریخ کوتاه و بلند

دو فرمت رایج دیگر برای استفاده از تابع Date در جاوا اسکریپت، قالب تاریخ کوتاه و قالب تاریخ طولانی هستند.

١. قالب تاریخ کوتاه «MM/DD/YYYY»:

در قالب تاریخ کوتاه، تاریخ‌ها به صورت «MM/DD/YYYY» نشان داده می‌شوند که ماه، روز و سال با علامت اسلش از هم جدا شده‌اند. مانند مثال زیر:

1const date = new Date("03/25/2015");
2console.log(date); // Wed Mar 25 2015 00:00:00 GMT+0545

٢. قالب تاریخ بلند «MMM DD YYYY»:

قالب تاریخ بلند از ساختار «MMM DD YYYY» پیروی می‌کند که در آن پارامترهای ماه با استفاده از مخفف سه‌حرفی و به دنبال آن روز و سال نشان داده می‌شود. مثال این قالب تاریخ و زمان به صورت زیر است:

1const date1 = new Date("Jul 1 2020");
2console.log(date1); // Wed Jul 01 2020 00:00:00 GMT+0545
3
4const date2 = new Date("1 Jul 2020");
5console.log(date2); // Wed Jul 01 2020 00:00:00 GMT+0545

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

1const date1 = new Date("Jul 1 2020");
2console.log(date1); // Wed Jul 01 2020 00:00:00 GMT+0545
3
4const date2 = new Date("1 Jul 2020");
5console.log(date2); // Wed Jul 01 2020 00:00:00 GMT+0545

مثال ایجاد تاریخ با اطلاعات دقیق

تابع new Date(year, month, day, hours, minutes, seconds, milliseconds)ایجاد شی Dateجدید با مشخصات دقیق تاریخ و زمان را امکان‌پذیر می‌کند. مثال زیر برای بیان این مفهوم است: در مثال زیر طبق سینتکس این رویکرد، آرگومان‌های ارائه شده از نوعی توالی خاص پیروی می‌کنند.

1const time1 = new Date(2020, 1, 20, 4, 12, 11, 0);
2console.log(time1); // Thu Feb 20 2020 04:12:11

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

1const time1 = new Date(2020, 1, 20, 4);
2console.log(time1); // Thu Feb 20 2020 04:00:00

٢. به همین ترتیب، دو آرگومان مربوط به سال و ماه خواهند بود مانند مثال زیر:

1const time1 = new Date(2020, 1);
2console.log(time1); // Sat Feb 01 2020 00:00:00

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

متدهای تابع Date در جاوا اسکریپت

تابع Date در جاوا اسکریپت متدهای مختلفی را در برمی‌گیرد که عملکردهای متفاوتی را ارائه می‌دهند. در فهرست زیر مهم‌ترین این متدها بحث شده‌اند.

• now(): مقدار عددی مربوط به زمان حال را بازیابی می‌کند (میلی‌ثانیه از ١ ژانویه ١٩٧۰).
• getFullYear(): سال جاری را بر اساس زمان محلی واکشی می‌کند.
• getMonth(): ماه را بازیابی می‌کند که به صورت مقداری از ۰ تا ١١، مطابق با زمان محلی نمایش داده می‌شود.
• getDate(): روز ماه (از ١ تا ٢١) را بر اساس زمان محلی بازیابی خواهد کرد.
• getDay(): روز هفته (از ۰ تا ٦) را بر اساس زمان محلی واکشی می‌کند.
• getHours(): ساعت (۰ تا ٢٣) را بر اساس زمان محلی مورد بازیابی قرار می‌دهد.
• getMinutes(): دقیقه (۰ تا ۵٩) را بر اساس زمان محلی واکشی می‌کند.
• getUTCDate(): روز ماه (١ تا ٣١) را بر اساس زمان هماهنگ جهانی (UTC) بازیابی می‌کند.
• setFullYear(): کل سال را بر اساس زمان محلی تنظیم خواهد کرد.
• setMonth(): ماه را بر اساس زمان محلی تنظیم می‌کند.
• setDate(): روز ماه را بر اساس زمان محلی تنظیم خواهد کرد.
• setUTCDate(): روز ماه را بر اساس زمان هماهنگ جهانی (UTC) تنظیم می‌کند.

مثالی برای استفاده از متدهای تاریخ و زمان در جاوا اسکریپت به صورت زیر است:

1const timeInMilliseconds = Date.now();
2console.log(timeInMilliseconds); // 1593765214488
3
4const time = new Date;
5
6// get day of the month
7const date = time.getDate();
8console.log(date); // 30
9
10// get day of the week
11const year = time.getFullYear();
12console.log(year); // 2020
13
14const utcDate = time.getUTCDate();
15console.log(utcDate); // 30
16
17const event = new Date('Feb 19, 2020 23:15:30');
18// set the date
19event.setDate(15);
20console.log(event.getDate()); // 15
21
22// Only 28 days in February!
23event.setDate(35);
24
25console.log(event.getDate()); // 7

قالب‌ بندی تاریخ در جاوا اسکریپت

در بسیاری از زبان‌های برنامه‌ نویسی، ابزار داخلی برای قالب‌بندی تاریخ‌ها به قالب‌های دلخواه مختلف وجود دارد. به عنوان مثال، در زبان برنامه نویسی PHP، می‌توان از قالب date("d M Y")برای به دست آوردن قالبی مانند 23 Jan 2019استفاده کرد. با این حال، قالب‌بندی تاریخ در جاوا اسکریپت چندان ساده نیست. تابع Date در جاوا اسکریپت هفت روش قالب‌بندی را ارائه می دهد. این روش‌ها خروجی‌های خاصی دارند و ممکن است همیشه مفید نباشند.

فیلم آموزش پروژه محور جاوا اسکریپت – پیاده سازی سبد خرید فروشگاهی با JavaScript در فرادرس

کلیک کنید

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

1const date = new Date(2019, 0, 23, 17, 23, 42);
2
3date.toString();               // Gives: Wed Jan 23 2019 17:23:42 GMT+0800 (Singapore Standard Time)
4date.toDateString();           // Gives: Wed Jan 23 2019
5date.toLocaleString();         // Gives: 23/01/2019, 17:23:42
6date.toLocaleDateString();     // Gives: 23/01/2019
7date.toGMTString();            // Gives: Wed, 23 Jan 2019 09:23:42 GMT
8date.toUTCString();            // Gives: Wed, 23 Jan 2019 09:23:42 GMT
9date.toISOString();            // Gives: 2019-01-23T09:23:42.079Z

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

تصحیح شی Date در جاوا اسکریپت

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

1const date = new Date(2008, 0, 33);
2// January does not have 33 days
3
4console.log(date);

خروجی سناریوی بالا به صورت زیر است:

Sat Feb 02 2008

در سناریوی، هنگام تلاش برای تنظیم تاریخ به روز ٣٣ ژانویه، شی Dateبه طور خودکار ماه و روز را به ترکیبی معتبر تنظیم می‌کند که منجر به ٢ فوریه ٢۰۰٨ می‌شود.

ایجاد قالب تاریخ سفارشی در جاوا اسکریپت

فرض کنید قالبی مانند Thu, 23 January 2019را می‌خواهیم. دستیابی به این امر مستلزم استفاده از متدهای ارائه شده برای شی Date در جاوا اسکریپت است. برای به دست آوردن مقادیر موردنیاز، می‌توان از چهار متد زیر استفاده کرد:

1. «getFullYear»: سال ۴ رقمی را بر اساس زمان محلی بازیابی می‌کند.
2. «getMonth»: ماه سال (١١-۰) را بر اساس زمان محلی بازیابی می‌کند. ماه‌ها با اندیس صفر شروع می‌شوند.
3. «getDate»: روز ماه (٣١-١) را بر اساس زمان محلی واکشی می‌کند.
4. «getDay»: روز هفته (٦-۰) را بر اساس زمان محلی بازیابی می‌کند، جایی که یکشنبه ۰ و شنبه ٦ است.

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

کلیک کنید

ایجاد مقادیر ٢٣ و ٢۰١٩ برای Thu, 23 January 2019با استفاده از «getFullYear» و «getDate» ساده است که کد زیر این مفهوم را بیان می‌کند:

1const d = new Date(2019, 0, 23)
2const year = d.getFullYear() // 2019
3const date = d.getDate() // 23

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

1const months = [
2  'January', 'February', 'March', 'April', 'May', 'June',
3  'July', 'August', 'September', 'October', 'November', 'December'
4];

حال برای به دست آوردن Januaryباید به صورت زیر عمل کرد:

• از «getMonth» برای به دست آوردن ماه باید از اندیس صفر برای شروع ماه‌ها استفاده کرد.
• نام ماه باید از آرایه بالا واکشی شود. که قطعه کد انجام این کار به صورت زیر است:

1const monthIndex = d.getMonth();
2const monthName = months[monthIndex];
3console.log(monthName); // January

نسخه مختصرتر کد بالا به صورت زیر است:

1The more concise version:
2

رویکردی مشابه را می‌توان برای بازیابی Thuاعمال کرد. این بار، آرایه‌ای شامل هفت روز هفته به صورت زیر ایجاد می‌شود:

1const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

حال برای بازیابی Thuباید به صورت زیر عمل کرد:

• به دست آوردن dayIndexبا استفاده از getDay
• به دست آوردن dayNameبا استفاده از dayIndex

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

1const dayIndex = d.getDay();
2const dayName = days[dayIndex]; // Thu

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

1const dayName = days[d.getDay()]; // Thu

با ادغام این متغیرها، می‌توان رشته فرمت شده موردنظر را به صورت زیر ایجاد کرد:

1const formatted = `${dayName}, ${date} ${monthName} ${year}`;
2console.log(formatted); // Thu, 23 January 2019

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

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

• getHours: ساعت‌ها (٢٣-۰) را بر اساس زمان محلی بازیابی می‌کند.
• getMinutes: دقیقه (۵٩-۰) را بر اساس زمان محلی واکشی می‌کند.
• getSeconds: ثانیه‌ها (۵٩-۰) را بر اساس زمان محلی بازیابی خواهد کرد.
• getMilliseconds: میلی‌ثانیه (٩٩٩-۰) را بر اساس زمان محلی مورد بازیابی قرار می‌دهد.

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

مقایسه تاریخ‌ها در جاوا اسکریپت با استفاده از عملگرهای «>» و «<» ،«>=» ،«<=»امکان‌پذیر است که مثال زیر نحوه انجام این مقایسه‌ها را نشان می‌دهد:

1const earlier = new Date(2019, 0, 26);
2const later = new Date(2019, 0, 27);
3
4console.log(earlier < later); // true

ارزیابی اینکه دو تاریخ دقیقاً چه رابطه‌ای باهم دارند حاوی پیچیدگی‌های خاص خود است و استفاده از «==» یا «===» برای مقایسه برابری این تاریخ‌ها روشی کاملاً مؤثر به‌حساب نمی‌آید.

1const a = new Date(2019, 0, 26);
2const b = new Date(2019, 0, 26);
3
4console.log(a == b);    // false
5console.log(a === b);   // false

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

1const isSameTime = (a, b) => {
2  return a.getTime() === b.getTime();
3};
4
5const a = new Date(2019, 0, 26);
6const b = new Date(2019, 0, 26);
7console.log(isSameTime(a, b)); // true

برای بررسی اینکه آیا دو تاریخ در یک روز قرار دارند، مقادیر getFullYear، getMonthو getDateآن‌ها باید مانند مثال زیر مورد ارزیابی قرار بگیرد:

1const isSameDay = (a, b) => {
2  return a.getFullYear() === b.getFullYear() &&
3         a.getMonth() === b.getMonth() &&
4         a.getDate() === b.getDate();
5};
6
7const a = new Date(2019, 0, 26, 10); // 26 Jan 2019, 10am
8const b = new Date(2019, 0, 26, 12); // 26 Jan 2019, 12pm
9console.log(isSameDay(a, b)); // true

گرفتن تاریخ از تاریخی دیگر در جاوا اسکریپت

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

• تنظیم مقدار تاریخ و زمان خاص با استفاده از اطلاعات تاریخ دیگری
• افزودن یا تفریق یک فاصله زمانی خاص از تاریخ دیگری یا به اصطلاح افزودن یا تفریق مقدار دلتا از تاریخی خاص

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

فیلم آموزش کاربردی HTML5، CSS3 و jQuery در طراحی وب – بخش یکم در فرادرس

کلیک کنید

تنظیم زمان و تاریخ خاص از اطلاعات تاریخی دیگر

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

• «setFullYear»: سال ۴ رقمی را در زمان محلی تنظیم می‌کند.
• «setMonth»: ماه سال را به وقت محلی تغییر می‌دهد.
• «setDate»: روز ماه را به وقت محلی تغییر خواهد داد.
• «setHours»: ساعت‌ها را در زمان محلی تنظیم می‌کند.
• «setMinutes»: دقیقه‌ها را در زمان محلی تنظیم خواهد کرد.
• «setSeconds»: ثانیه‌ها را در زمان محلی تغییر می‌دهد.
• «setMilliseconds»: میلی‌ثانیه‌ها را در زمان محلی به‌روز می‌کند.

به عنوان مثال، برای تعیین تاریخ برای پانزدهمین روز ماه، می‌توان از setDate(15)به صورت زیر استفاده کرد:

1const d = new Date(2019, 0, 10);
2d.setDate(15);
3
4console.log(d); // 15 January 2019

برای تنظیم ماه به عنوان مثال روی ژوئن، از setMonthاستفاده می‌شود و باید این نکته را یادآوری کرد که ماه‌ها در جاوا اسکریپت دارای اندیس صفر هستند.

1const d = new Date(2019, 0, 10);
2d.setMonth(5);
3
4console.log(d); // 10 June 2019

همچنین باید به این نکته توجه داشت که متدهای تنظیم کننده، Date در جاوا اسکریپت را تغییر می‌دهند. در عمل، تغییر این شی توصیه نمی‌شود . بهتر است به‌جای این کار، این عملیات را روی شی Dateجدیدی به صورت زیر انجام داد:

1const d = new Date(2019, 0, 10);
2const newDate = new Date(d);
3newDate.setMonth(5);
4
5console.log(d);       // 10 January 2019
6console.log(newDate); // 10 June 2019

افزودن یا تفریق مقدار دلتا از تاریخی دیگری

رویکرد دیگری برای ایجاد تاریخی جدید از تاریخی دیگر که در کار با شی یا توابع Date در جاوا اسکریپت باید به آن اهمیت داد، رویکرد افزودن یا تفریق یک فاصله زمانی خاص از تاریخ دیگر است. وقتی به اضافه یا تفریق دلتایی از تاریخ دیگری اشاره می‌کنیم، اساساً منظور از آن تغییر زمان است. این دلتا می‌تواند افزایش‌های مختلفی مانند سال، ماه، روز و موارد دیگر را نشان دهد. برای رسیدن به این هدف، می‌توان از مؤلفه‌های تاریخ زیر استفاده کرد:

• «getFullYear»: سال ۴ رقمی را با توجه به زمان محلی بازیابی می‌کند.
• «getMonth»: ماه سال (۱۱-۰) را بر اساس زمان محلی واکشی خواهد کرد.
• «getDate»: روز ماه (۳۱-۱) را بر اساس زمان محلی بازیابی می‌کند.
• «getHours»: ساعت (۲۳-۰) را به وقت محلی مورد بازیابی قرار می‌دهد.
• «getMinutes»: دقیقه‌ها (۵۹-۰) را به وقت محلی بازیابی می‌کند.
• «getSeconds»: ثانیه‌ها (۵۹-۰) را به وقت محلی واکشی خواهد کرد.
• «getMilliseconds»: میلی‌ثانیه‌ها (۹۹۹-۰) را به وقت محلی بازیابی می‌کند.

فیلم آموزش برنامه نویسی تایپ اسکریپت TypeScript در جاوا اسکریپت در فرادرس

کلیک کنید

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

رویکرد Set برای تنظیم تاریخ در جاوا اسکریپت

کار با مثالی شروع خواد شد و بفرض بر این است که تاریخ امروز ٢٨ مارس ٢۰١٩ است. حال رویکرد اول برای این فرض به صورت زیر خواهد بود:

1const today = new Date(2019, 2, 28);

در رویکرد فوق ابتدا شی Date در جاوا اسکریپت راه‌اندازی شده است و این کار برای اطمینان از اینکه تاریخ اصلی تغییر نمی‌کند، انجام گرفته است:

1const finalDate = new Date(today);

در مرحله بعد، کاربر باید مقداری را که قصد تغییر آن را دارد تعیین کند. همان‌طور که در این مثال خاص کاربر با روزها سروکار دارد، می‌تواند روز جاری را با استفاده از متد getDateبه دست آورد:

1const currentDate = today.getDate();

حال هدف کاربر این است که تاریخ سه روز بعد را از تاریخ امروز بازیابی کند و برای این هدف باید کاربر دلتایی با مقدار 3 را به تاریخ فعلی اضافه کند:

1finalDate.setDate(currentDate + 3);

کد کامل رویکرد اول به صورت زیر است:

1const today = new Date(2019, 2, 28);
2const finalDate = new Date(today);
3finalDate.setDate(today.getDate() + 3);
4
5console.log(finalDate); // 31st March 2019

این رویکرد مستقیماً شی finalDateرا تغییر می‌دهد، بنابراین به نتیجه مطلوب می‌رسد. توجه به این نکته ضروری است که این روش تاریخ اصلی را تغییر می‌دهد که امکان دارد با این قابلیت در برخی زمینه‌ها خوب عمل نکند.

رویکرد new Date برای تنظیم تاریخ در جاوا اسکریپت

حال رویکرد دوم هم با فرض همان تاریخ قبلی تشریح خواهد شد.

1const today = new Date(2019, 2, 28);

این کار با استخراج مقادیر اساسی سال، ماه و روز به صورت زیر شروع خواهد شد.

1const today = new Date(2019, 2, 28);

با در دست داشتن این مقادیر، می‌توان شی Date جدید ساخت و روز را با افزودن مقدار ٣ به صورت زیر تنظیم کرد:

1const finalDate = new Date(year, month, day + 3);

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

1const today = new Date(2019, 2, 28)
2
3// Getting required values
4const year = today.getFullYear()
5const month = today.getMonth()
6const day = today.getDate()
7
8// Creating a new Date (with the delta)
9const finalDate = new Date(year, month, day + 3)
10
11console.log(finalDate) // 31 March 2019

هر دو رویکرد نتیجه یکسانی دارند. انتخاب بین آن‌ها بستگی به ترجیحات و نیازهای کدنویسی کاربر دارد. این تکنیک‌ها انعطاف‌پذیری را در تنظیم تاریخ‌ها بر اساس نیاز کاربر فراهم می‌کنند و استفاده از آن‌ها با توابع Date در جاوا اسکریپت از اهمیت بالایی برخوردار است.

تصحیح خودکار تاریخ در جاوا اسکریپت چگونه انجام میشود؟

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

فیلم مجموعه آموزش طراحی و برنامه ‌نویسی سایت – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

فرض بر این است اگر کاربری سعی کند تاریخ را به عنوان ۳۳ مارس ۲۰۱۹ تنظیم کند چه اتفاقی می‌افتد؟ از آنجا که ماه مارس فقط ۳۱ روز دارد، جاوا اسکریپت به طور خودکار تاریخ را به ۲ آوریل تنظیم می‌کند که مثال زیر این مفهوم را نشان می‌دهد:

1// 33rd March => 2nd April
2new Date(2019, 2, 33);

در مثال فوق تاریخ ٣٣ مارس به طور خودکار به ٢ آوریل تبدیل می‌شود و این ویژگی قابلیت ذاتی جاوا اسکریپت برای تصحیح خودکار تاریخ را نشان می‌دهد. این ویژگی هنگام کار با دلتاهای تاریخ، نیاز به محاسبات دستی شامل دقیقه، ساعت، روز، ماه و موارد دیگر را از بین می‌برد و با افزودن مقدار دلتای خاصی به تاریخ مد نظر، جاوا اسکریپت بدون زحمت تنظیمات خودکار را مدیریت می‌کند. به عنوان مثال، این مثال را در نظر بگیرید که در آن کاربر سعی می‌کند ٣ روز به ٣۰ مارس اضافه کند:

1// 30 + 3 = 33. 33rd March => 2nd April
2new Date(2019, 2, 30 + 3);

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

سخن پایانی

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

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

کلیک کنید

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