שימוש בזמנים ב-JavaScript

עבודה עם זמנים ב-JavaScript עלולה להיות מסובכת. במדריך זה, נבין את הנושא על אף מורכבותו.

האובייקט Date

JavaScript כולל את האובייקט Date לטיפול בזמנים.

האובייקט Date מטפל בתאריכים dates (שנים, חודשים, ימים) וגם בזמנים time (שעות, דקות, שניות).

איך לעבוד עם האובייקט Date?

כדי לעבוד עם האובייקט Date אנחנו צריכים לאתחל אותו:

new Date();

האובייקט מציין נקודה בזמן. לדוגמה, את הרגע שבו אתחלנו אותו:

var timeNow = new Date();
console.log(timeNow);

התוצאה:

Mon Jul 31 2020 16:53:22 GMT+0300 (Israel Daylight Time)

התאריך כולל את המידע הבא:

• Mon - קיצור שם היום (Monday)
• Jul 31 2020 - התאריך המלא הכולל את שם החודש המקוצר
• 16:53:22 - הזמן המדויק ברמת השניות
• GMT+0300 (Israel Daylight Time) - איזור הזמן

כיצד להגדיר תאריכים באמצעות האוביקט Date?

אנחנו יכולים להגדיר את התאריך על ידי כך שנעביר מחרוזת לאוביקט Date כשאנחנו מאתחלים אותו. לדוגמה:

var dt = new Date('2020-07-31');
console.log(dt); // Fri Jul 31 2020 03:00:00 GMT+0300 (Israel Daylight Time)

יש לנו חופש רב במחרוזות שנעביר ליצירת התאריך.

רק שנה:

new Date('2021');

שנה וחודש:

new Date('2021-03');
new Date('2021-3');

שנה, חודש ויום:

new Date('2021-03-08');
new Date('2021-3-8');

• עיצה! כדי למנוע בלבול נקפיד על הסדר. קודם השנה, אח"כ החודש ורק בסוף היום.

אנו יכולים להשתמש בקו נטוי במקום בקו מפריד:

new Date('2021/03/08');

ואפשר גם להכניס את מימד הזמן (שעה, דקות, שניות):

new Date('2021-03-08 13:54:16');

גישה חלופית היא להעביר את המידע כפרמטרים מופרדים בפסיקים. לדוגמה:

var year = 2021;
var month = 2;
var day = 8;
var hours = 7;
var minutes = 10;
var seconds = 0;
var milliseconds = 0;

var dt = new Date(year, month, day, hours, minutes, seconds, milliseconds);

• בשיטה זו מעבירים את חלקי התאריך כפרמטרים לאובייקט Date כשמאתחלים אותו.
• כשעובדים בשיטה זו חובה לשמור על סדר הזנת הפרמטרים.
• הפרמטרים היחידים שהכרחיים הם היום, החודש והשעה.
• צריך לשים לב! ספירת החודשים מתחילה מ-0, ולפיכך ינואר הוא 0, פברואר הוא 1 ודצמבר הוא 11.
• רמת הדיוק של התאריך היא עד לאלפיות השנייה milliseconds.

איך לגשת לחלקים שמרכיבים את האובייקט Date?

עד כה ראינו כיצד לאתחל אובייקט של זמן ב-JavaScript, ובחלק זה נלמד כיצד להשתמש במתודות כדי לגשת לרכיבים של התאריך.

ניצור את התאריך:

var dt = new Date('2020-07-31 16:34:02');

ניגש לחלקים שמרכיבים את התאריך באמצעות מתודות getter.

מה השנה?

dt.getFullYear() //2020

מה החודש?

dt.getMonth() //6

• ספירת החודשים מתחילה מ-0. לכן, ינואר הוא 0, פברואר הוא 1 ודצמבר הוא 11.
• גם ספירת הימים מתחילה מ-0. לכן, 0 הוא יום ראשון, 1 הוא שני, ושבת הוא 6.

קיימות אפשרויות נוספות:

dt.getDate() //31 
dt.getDay() //5 (0 is sunday, 1 is monday,.., 5 is friday) 
dt.getFullYear() //2020
dt.getMonth() //6 (starts from 0)
dt.getHours() //16 
dt.getMinutes() //34 
dt.getSeconds() //2 
dt.getMilliseconds() //0 (not specified)

המתודה getTime() מחזירה את הזמן באלפיות השניות מאז ה-epoch שהוא חצות של ה-1 בינואר 1970.

dt.getTime() //1596202442000

• ה-epoch מציין את הנקודה בזמן ממנה מחשבים מתחילים את הספירה. זמנים שבאים אחרי הנקודה מקבלים ערכים חיוביים וזמנים שלפניה ערכים שליליים.

נבדוק עם תאריך שקודם ל-epoch:

var dt = new Date('1492-07-31');
dt.getTime() // -15065913600000

• מועד ראשית העת החדשה מקבל ערך שלילי כי הוא קודם ל-epoch.

המתודה getTimezoneOffset() מחזירה את ההפרש בדקות בין הזמן האוניברסלי המתואם UTC שהוא השעון הבסיסי שביחס אליו נקבעים אזורי הזמן לבין הזמן המקומי.

בישראל UTC+2 בחורף ו- UTC+3 בקיץ. לכן ההפרש בדקות ביולי הוא 180 דקות:

dt.getTimezoneOffset()//-180

מתודות UTC

עד עכשיו, עבדנו עם פונקציות שמחזירות את התאריך בהתחשב בזמן המקומי. כשעובדים על אתרים בינ"ל שמיועדים לשרת את כל העולם כדאי לשקול להשתמש במתודות getUTC שהם דומות בכל למתודות ה-getter שראינו. רק שהם מחזירות את הזמן ביחס ל-UTC.

לדוגמה:

var dt = new Date();

console.log(dt.getHours()); // 16
console.log(dt.getUTCHours()); // 13

מה היום האחרון של החודש?

שאלה מעניינת היא מהו היום האחרון של החודש. לדוגמה, פברואר לרוב מסתיים ב-28 אבל בשנים מעוברות הוא מסתיים ב-29.

הקוד הבא יסייע לנו בכך:

var td = new Date('2020-02');
var lastDayOfMonth = new Date(td.getFullYear(), td.getMonth()+1, 0);
console.log(lastDayOfMonth.getDate());

• 0 הוא הפרמטר של היום ומשמעותו היום הלפני ראשון של החודש הבא, וכך מקבלים את היום האחרון של החודש הנוכחי.

התוצאה:

29

עכשיו אנחנו יודעים ש-2022 היא שנה מעוברת.

הצגה של התאריך בפורמט ידידותי

ראינו את הפורמט שבו משתמש JavaScript להצגת התאריך:

var timeNow = new Date();
console.log(timeNow);

Thu Jul 31 2020 17:12:46 GMT+0300 (Israel Daylight Time)

פורמט לא ידידותי למשתמש. נציג את התאריך כמקובל בישראל dd.mm.yyyy  באמצעות מתודות ה-getter שאותם אנחנו כבר מכירים:

var dt = new Date();
var israeliDate = dt.getDate() + "." + (dt.getMonth() + 1) + "." + dt.getFullYear();
console.log(israeliDate);

התוצאה:

31.7.20

כדי להציג את שם החודש במקום את מספרו אפשר להשתמש בפונקציה הבאה:

function getMonthName(monthIndex){
  var monthsNames = ['ינואר','פברואר','מרץ','אפריל','מאי','יוני','יולי','אוגוסט','ספטמבר','אוקטובר','נובמבר','דצמבר'];
  return monthsNames[monthIndex];
}

var dt = new Date();
var israeliDate = dt.getDate() + " ב" + (getMonthName(dt.getMonth())) + "." + dt.getFullYear();
console.log(israeliDate);

התוצאה:

31 ביולי 2020

כדי להוסיף אפסים לפני מספרים חד-ספרתיים נשתמש בפונקציה הבאה:

function appendLeadingZeros(int){
  if(int < 10){
    return '0' + int;
  }
  return int;
}

var dt = new Date('2020-7-9');
var formatedTime = appendLeadingZeros(dt.getDate()) + '/' +  appendLeadingZeros((dt.getMonth() + 1)) + '/' + appendLeadingZeros(dt.getFullYear());
console.log(formatedTime);

התוצאה:

09/07/2020

השוואה בין תאריכים

אפשר להשוות בין תאריכים ולברר האם תאריך מסוים הוא גדול, קטן או שווה לתאריך אחר. נתחיל בהגדרת שני תאריכים:

var d1 = new Date('2020-07-09');
var d2 = new Date();

האם d1 גדול מ-d2?

console.log(d1 > d2); // false

האם d1 שווה ל-d2?

console.log(d1 == d2); // false

האם d1 קטן מ-d2?

console.log(d1 < d2); // true

נבחן את כל האפשרויות:

console.log(d1 > d2); // false
console.log(d1 >= d2); // false
console.log(d1 == d2); // false
console.log(d1 <= d2); // true
console.log(d1 < d2);  // true 

הפרש בין תאריכים

ניתן להפחית תאריך אחד משני כדי לקבל את ההפרש:

var dt1 = new Date('2019-07-31 00:00:00'); 
var dt2 = new Date('2020-07-31 00:00:00'); 
var delta = dt2 - dt1; // 31622400000

נמיר את ההפרש מאלפיות השנייה לימים:

var diffDays = delta / (1000 * 60 * 60 * 24); 

console.log(diffDays + ' days'); // 366 days

הסיבה שאורך השנה הוא 366 ימים היא ש-2022 היא שנה מעוברת.

עבודה עם חותמות זמן

חותמת זמן (timestamp) היא הזמן מאז ה-epoch, ראשית הספירה של המספרים שחלה בחצות של ה-1 בינואר 1970.

כדי למצוא את חותמת הזמן של הרגע משתמשים בשיטה הבאה: 

new Date().getTime(); // 1596163503082

חותמת הזמן היא באלפיות השניות, וכדי לקבל את הזמן בשניות צריך לחלק ב-1000:

var ts = new Date().getTime();
Math.floor(ts / 1000);

• אני משתמש ב-floor כדי לקבל שניות מלאות, ולא חלקי שניות.

הפונקציה הזו שימושית במיוחד כשאנחנו רוצים למדוד את משך הזמן שתהליך או פונקציה רצים:

var start = new Date().getTime();

for (var x = 0; x < 100000; x++) {
    // do something
}

var end = new Date().getTime();

var delta = end - start;

console.log(delta + ' milliseconds');

ההפרש נמדד באלפיות השנייה:

49 milliseconds

חיבור וחיסור תאריכים

ניתן לחבר ולחסר תאריכים.

נוסיף 30 דקות לתאריך:

var d1 = new Date('2020-07-31 16:00:00');
var diff = 30 * 60 * 1000;
var d2 = new Date(d1.getTime() + diff);
console.log(d2);

Fri Jul 31 2020 16:30:00 GMT+0300 (Israel Daylight Time)

נפחית יומיים:

var d1 = new Date('2020-07-31 16:00:00');
var diff = - 2 * 24 * 60 * 60 * 1000;
var d2 = new Date(d1.getTime() + diff);
console.log(d2);

Wed Jul 29 2020 16:00:00 GMT+0300 (Israel Daylight Time)

נשתמש בגישה דומה כדי לחשב את משך הזמן עד לתאריך מסויים. לדוגמה, מספר הימים עד לסוף השנה:

var td = new Date();
var d2 = new Date(td.getFullYear() + 1, 0).getTime();
var d1 = new Date().getTime(); // now

var delta = Math.ceil((d2 - d1) / (1000 * 60 * 60 * 24));
console.log(delta + ' days'); // 154 days

• new Date(td.getFullYear() + 1, 0) החודש הלפני ראשון של השנה הבאה.

עבודה עם ספריות

יש מי שמחשיב את העבודה עם תאריכים ב-JavaScript למטלה קשה ולכן מעדיף להשתמש בספרייה כדוגמת moment.js שנחשבת לידידותית יותר למפתח. שימוש בספרייה יכול להקל על העבודה אבל הוא גם מצריך לימוד של כללים נוספים ובנוסף גודל הספרייה נוטה להעמיס על טעינת הדף.

זה לא נגמר

יש עוד הרבה שאפשר ללמוד על שימוש בתאריכים ב-JavaScript.  מקור מקיף שבו אפשר למצוא את כל הפונקציות ולהתעדכן בחידושי הזמן הוא הדף של MDN המוקדש לאובייקט Date.

לכל מדריכי ה-javascript

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים