Moment.js: הסבר מלא ודוגמאות מעשיות של ספריית התאריכים

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

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

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

מה זה Moment.js ומדוע הוא הפך כל כך פופולרי?

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

הליבה של Moment.js סובבת סביב האובייקט `moment()` , שיכול לבנות תאריכים כמעט מכל קלט תקין: מחרוזות טקסט, אובייקטי Date, חותמות זמן, או ישירות עם ארגומנטים מספריים. זה הופך אותו לגמיש ושימושי ביותר בכל מיני פרויקטים, החל מסקריפטים קטנים ועד ליישומים ארגוניים המנהלים אזורי זמן בינלאומיים או רשומות היסטוריות.

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

תכונות ויתרונות עיקריים של Moment.js

• ממשק API פשוט ואינטואיטיביאחת מיתרונותיה הגדולים ביותר של Moment.js היא התחביר הברור שלה. ניתן לבצע פעולות פשוטות, כגון קבלת התאריך הנוכחי או המרת מחרוזת לפורמט מסוים, או חישובים מורכבים ואימותים בכמה שורות בלבד.
• ניתוח ועיצוב גמישיםניתוח מחרוזות תאריכים כמעט מכל פורמט והמרתן לפלט הרצוי מעולם לא היה קל יותר. Moment.js מאפשר עיצוב מהיר וקל של תאריכים במצגות מותאמות אישית..
• מניפולציה של תאריךהוספה או חיסור של ימים, חודשים, שנים, שבועות או כל יחידת זמן אחרת הן פשוטות כמו שימוש בשיטות הבאות הוסף () y להחסיר()זה מאוד שימושי כשצריך לעבוד עם תאריכים יחסיים, תאריכי יעד או מסגרות זמן שמשתנות באופן דינמי.
• אימות חזקאם אתם צריכים לבדוק אם תאריך תקף או קיים (לדוגמה, 30 בפברואר), Moment.js מקל עליכם. השיטה תקף() הוא מסוגל לזהות שגיאות עדינות בפורמט או בלוגיקה של תאריכים.
• תמיכה באזורי זמן ולוקליזציהתודה לתוסף שלך אזור זמן רגעיקל מאוד להמיר תאריכים בין אזורי זמן שונים. ניתן גם להציג תאריכים המותאמים לשפת המשתמש ולמוסכמות האזוריות, וזהו מפתח ביישומים גלובליים.
• מערכת אקולוגית של תוספיםמלבד הספרייה הראשית, ישנה מערכת אקולוגית של תוספים להרחבת הפונקציונליות שלה (לוח שנה, תאימות עם מסגרות אחרות, פורמטים אקזוטיים...).

איך להתחיל להשתמש ב-Moment.js בפרויקט שלך

ההתקנה פשוטה מאוד . ניתן לכלול את Moment.js בקובץ ה-HTML שלך בשורה אחת:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

אם אתם עובדים עם Node.js או סביבת פיתוח מודרנית, מקובל להתקין אותה באמצעות npm או yarn:

npm install moment

לאחר שתסיים, תוכל לייבא את Moment.js בהתאם לתחביר בו אתה משתמש:

// Versión CommonJS
var moment = require('moment');
moment().format();

// ES6
import moment from 'moment';
moment().format();

יצירת תאריכים: דרכים שונות ודוגמאות מעשיות

צור תאריכים בקלות

כדי לקבל את התאריך והשעה הנוכחיים, פשוט להשתמש moment():

console.log(moment()); // Devuelve la fecha actual en formato ISO8601

ניתן לבנות תאריך ספציפי על ידי העברת ארגומנטים:

moment("2022-10-14"); // Crea el 14 de octubre de 2022

ניתן גם להתחיל ממחרוזת ופורמט נתונים, אפילו במצב Strict:

moment("25/12/1995", "DD/MM/YYYY", true); // Analiza y comprueba el formato

האם יש לך אובייקט Date מקורי?

const fechaJS = new Date();
const miFecha = moment(fechaJS);

עיצוב והצגת תאריכים

Moment.js מאפשר לך להציג תאריכים בכל פורמט שניתן להעלות על הדעת . לדוגמה, כדי להציג את התאריך הנוכחי כיום/חודש/שנה:

moment().format('DD/MM/YYYY');

אם אתם רוצים שרשרת אנושית יותר, תוכלו להשתמש ב:

moment().format('MMMM Do YYYY, h:mm:ss a'); // Ejemplo: "marzo 8º 2024, 3:21:10 pm"

כמה אסימונים שימושיים לעיצוב :

• YYYYשנה בת 4 ספרות
• MM: שלי
• DDיום בחודש
• hh o HHזמן (פורמט 12 שעות או 24 שעות)
• mmדקות
• ssשניות
• aבוקר/צהריים

לדוגמה, כדי להציג רק את השעה:

moment().format('HH:mm:ss');

עיצוב מתקדם עם טוקנים ותמיכה אזורית

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

moment.locale('es'); // Cambia a español
document.write(moment().format('LLLL'));
// Ejemplo: martes, 8 de marzo de 2024 15:21

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

עבודה עם תאריכים יחסיים היא אחת מיתרונותיה של Moment.js.

• הוסף ימים, חודשים או שנים:

  moment().add(3, 'days').format('DD/MM/YYYY');

• חיסור יחידות:

  moment().subtract(2, 'months').format('DD/MM/YYYY');

• התחלה וסוף תקופות:

  moment().startOf('month').format('DD/MM/YYYY'); // Primer día del mes
  moment().endOf('month').format('DD/MM/YYYY');   // Último día del mes

אימות תאריכים וזיהוי שגיאות

לפני שעובדים עם תאריכים, חיוני לוודא שהם נכונים:

moment('2024-02-30', 'YYYY-MM-DD').isValid(); // false, el 30 de febrero no existe

זה מונע באגים בלתי צפויים ביישומים שמקבלים תאריכים מהמשתמש.

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

Moment.js כולל מספר שיטות להשוואת תאריכים:

• לפני(): בודק אם תאריך אחד לפני תאריך אחר.
• isAfter(): בודק אם תאריך מאוחר יותר.
• בין(): מציין האם תאריך נמצא בין שני תאריכים נתונים.

let hoy = moment();
let ayer = moment().subtract(1, 'days');
console.log(hoy.isAfter(ayer)); // true

טיפול באזורי זמן ותאריכים בינלאומיים

כשעובדים עם משתמשים בחלקים שונים של העולם, אזורי זמן יכולים להיות כאב ראש אמיתי . בעזרת התוסף moment-timezone , ניתן להמיר בקלות תאריכים בין אזורים.

const moment = require('moment-timezone');
const fechaUTC = moment('2024-05-25');
const fechaNY = fechaUTC.tz('America/New_York').format('YYYY-MM-DD HH:mm:ss');
console.log(fechaNY);
// Ejemplo: "2024-05-24 20:00:00"

בנוסף, Moment.js מסוגל להציג תאריכים המותאמים להגדרות האזוריות של המשתמש , תוך הצגת שמות חודשים וימים מתורגמים כהלכה.

דוגמאות שימוש מרכזיות וטיפים מתקדמים

קבל הבדלים בין תאריכים

ניתן לחשב את הזמן שחלף בין שני תאריכים ביחידות שונות:

let inicio = moment('2024-01-01');
let fin = moment('2024-03-08');
let dias = fin.diff(inicio, 'days'); // Devuelve el número de días entre ambas

תאריכים יחסיים וזמנים אנושיים

Moment.js מצוין להצגת הודעות כמו "לפני 3 ימים" או "בעוד 5 שעות":

moment().subtract(3, 'days').fromNow(); // "hace 3 días"
moment().add(2, 'hours').fromNow();    // "en 2 horas"

לוח שנה אנושי

הפונקציה calendar () מציגה תאריכים יחסיים כגון "אתמול בשעה 17:00", "מחר בשעה 9:00", מה שהופך אותה לשימושית מאוד עבור אפליקציות לוח שנה.

moment().subtract(1, 'days').calendar(); // "Ayer a las..."
moment().add(3, 'days').calendar();     // "Próximo martes a las..."

תמיכה בקפיצות שנתיות וימים מיוחדים

האם אתה רוצה לדעת אם שנה היא שנה מעוברת?

moment([2024]).isLeapYear(); // true

שיטת isLeapYear() נותנת לך את התשובה ישירות.

התאמה אישית מתקדמת: פורמטים, טוקנים וניתוח קפדני

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

לדוגמה, כדי לנתח תאריך בפורמט "יום/חודש/שנה":

moment('12/03/2023', 'DD/MM/YYYY', true);

רשימת אסימונים נפוצים ודוגמאות

• שנהשנה שנה (2024), שנה (24), שנה (-500)
• חודש: MM (01 – 12), MMM (ינואר), MMMM (ינואר)
• Diaיום (01 – 31), ג (1 – 31)
• הורהשעות (00 – 23), שעות (01 – 12), מ"מ (דקות), שניות (ss)
• אזור זמןז, ז

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