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

1. תגידו שלום ל Moment

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

ל JavaScript אין כלים טבעיים בשפה לטיפול ביחידות זמן והספריה הטובה ביותר שיש היום לטיפול ביחידות זמן נקראת Moment.JS. היא זמינה ב Node וגם בדפדפן, תומכת בעברית ויודעת להמיר ולהציג זמנים בכל פורמט שתוכלו לדמיין.

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

moment.duration(19017, 'seconds').humanize();
// 5 hours

הם גם יודעים לדבר בעברית ובעוד המון שפות, כך שאתם יכולים גם להפעיל:

moment.locale('he');
moment.duration(19017, 'seconds').humanize();
// 5 שעות

moment.locale('fr');
moment.duration(19017, 'seconds').humanize();
// 5 heures

2. מחרוזת זמן יותר מדויקת

השימוש ב humanize ממש נוח כשרוצים להראות פחות או יותר כמה זמן מספר מסוים מייצג אבל הוא עדיין לא מספיק כדי להציג את הזמן בצורה מדויקת. אם נרצה לפרק את הזמן לדקות, שעות ושניות נצטרך להמשיך לפונקציות נוספות של הסיפריה: minutes(), hours() ו seconds(). בואו נראה איך להשתמש בהן כדי לפרק את המספר למחרוזת זמן שכוללת את השעות והדקות:

function durationString(duration) {
  let res = '';
  if (duration.hours() == 1) {
    res += "שעה";
  } else if (duration.hours() === 2) {
    res += "שעתיים";
  } else if (duration.hours() > 2) {
    res += `${duration.hours()} שעות`
  }

  if (duration.minutes() === 0) {
    return res;
  } else if (duration.hours() > 0) {
    res += " ו ";
  }

  if (duration.minutes() === 1) {
    res += "דקה";
  } else if (duration.minutes() > 1) {
    res += `${duration.minutes()} דקות`;
  }

  return res;
}

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