Moment.js: Kompletní vysvětlení a praktické příklady knihovny dat

Informatec Digital » Idiomy » Moment.js: Kompletní vysvětlení a praktické příklady knihovny dat

Práce s daty a časy v JavaScriptu může být pro webové vývojáře skutečnou výzvou . Naštěstí nástroje jako Moment.js tento proces výrazně zjednodušují a usnadňují vše od základního formátování data až po složité manipulační a ověřovací operace. Pokud jste se někdy cítili frustrovaní při snaze o správný převod, porovnání nebo zobrazení dat ve vašich projektech, Moment.js byl pravděpodobně jedním z vašich nejlepších přátel, nebo byste alespoň měli zvážit jeho použití.

V tomto článku vám řeknu vše, co potřebujete vědět o knihovně Moment.js : od jejích hlavních funkcí a méně známých triků, přes praktické příklady a integraci s dalšími knihovnami, včetně jasného vysvětlení její syntaxe a úkolů, které s ní můžete vykonávat. Podíváme se také na její omezení, nedávné aktualizace a alternativy, které máte k dispozici, pokud hledáte něco modernějšího.

Co je Moment.js a proč se stal tak populárním?

Moment.js je JavaScriptová knihovna navržená pro snadnou práci s daty a časy . Umožňuje vytvářet, analyzovat, manipulovat a zobrazovat data prakticky v jakémkoli myslitelném formátu s jednoduchou, ale výkonnou syntaxí. Tato knihovna je již léta primárním řešením komunity pro překonávání omezení nativního objektu Date() v JavaScriptu.

Jádro knihovny Moment.js se točí kolem objektu `moment()` , který dokáže konstruovat data z téměř jakéhokoli platného vstupu: textových řetězců, objektů Date, časových razítek nebo přímo s číselnými argumenty. Díky tomu je knihovna extrémně flexibilní a užitečná ve všech typech projektů, od malých skriptů až po podnikové aplikace, které spravují mezinárodní časová pásma nebo historické záznamy.

Co ho učinilo tak úspěšným? Jeho spolehlivost, snadné použití a rozmanitost doprovodných nástrojů a pluginů . I když projekt přešel do režimu údržby, Moment.js si udržuje velkou uživatelskou základnu a rozsáhlou dokumentaci , což posiluje jeho pozici předního datového řešení v JavaScriptu a Node.js.

Klíčové vlastnosti a výhody Moment.js

• Jednoduché a intuitivní APIJednou z největších silných stránek Moment.js je jeho jasná syntaxe. Můžete provádět jednoduché operace, jako je získání aktuálního data nebo převod řetězce do určitého formátu, nebo složité výpočty a validace v pouhých několika řádcích.
• Flexibilní parsování a formátováníAnalýza datových řetězců téměř jakéhokoli formátu a jejich převod na požadovaný výstup nebyla nikdy snazší. Moment.js umožňuje rychlé a bezproblémové formátování dat ve vlastních prezentacích..
• Manipulace s datyPřidávání nebo odčítání dnů, měsíců, let, týdnů nebo jakékoli jiné časové jednotky je stejně jednoduché jako použití metod přidat() y odčítat()To je velmi užitečné, když potřebujete pracovat s relativními daty, termíny nebo časovými rámci, které se dynamicky mění.
• Robustní validacePokud potřebujete zkontrolovat, zda je datum platné nebo existuje (například 30. února), Moment.js vám to usnadní. Metoda je platná() Dokáže detekovat jemné chyby ve formátu nebo logice dat.
• Podpora časových pásem a lokalizaceDíky vašemu pluginu moment-timezonePřevod dat mezi různými časovými pásmy je velmi snadný. Můžete také zobrazit data přizpůsobená jazyku uživatele a regionálním konvencím, což je klíčové v globálních aplikacích.
• Ekosystém pluginůKromě hlavní knihovny existuje ekosystém pluginů pro rozšíření její funkcionality (kalendář, kompatibilita s jinými frameworky, exotické formáty...).

Jak začít s Moment.js ve vašem projektu

Instalace je velmi jednoduchá . Moment.js můžete do HTML kódu vložit jediným řádkem:

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

Pokud pracujete s Node.js nebo moderním vývojovým prostředím, je běžné jej instalovat pomocí npm nebo yarn:

npm install moment

Jakmile to uděláte, můžete importovat Moment.js podle použité syntaxe:

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

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

Vytváření dat: různé způsoby a praktické příklady

Snadno si vytvářejte data

Chcete-li získat aktuální datum a čas, jednoduše použijte moment():

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

Konkrétní datum můžete vytvořit předáním argumentů:

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

Můžete také začít od daného řetězce a formátu, a to i v striktním režimu:

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

Máte nativní objekt Date?

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

Formátování a zobrazení dat

Moment.js umožňuje zobrazit data v libovolném představitelném formátu . Například pro zobrazení aktuálního data jako den/měsíc/rok:

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

Pokud chcete humanizovanější řetězec, můžete použít:

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

Některé užitečné tokeny pro formátování :

• YYYY: 4místný rok
• MM: můj
• DDden v měsíci
• hh o HHčas (12hodinový nebo 24hodinový formát)
• mmminut
• sssekundy
• adopoledne/odpoledne

Například pro zobrazení pouze času:

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

Pokročilé formátování s tokeny a regionální podporou

Moment.js podporuje více lokalizovaných formátů a překladů . Je možné přepínat jazyky za chodu a zobrazovat názvy měsíců a dnů v jiném jazyce.

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

Manipulace s daty: sčítání, odčítání a porovnávání

Práce s relativními daty je jednou ze silných stránek Moment.js.

• Přidejte dny, měsíce nebo roky:

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

• Odečíst jednotky:

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

• Začátek a konec menstruace:

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

Ověřování dat a odhalování chyb

Před prací s daty je nezbytné ověřit, zda jsou správná:

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

Tím se zabrání neočekávaným chybám v aplikacích, které přijímají data od uživatele.

Porovnání dat: kontrola, zda se datum nachází mezi ostatními

Moment.js obsahuje několik metod pro porovnávání dat:

• jePřed()Zkontroluje, zda jedno datum předchází jinému.
• jePo()Zkontroluje, zda je datum pozdější.
• jeMezi()Označuje, zda se datum nachází mezi dvěma zadanými daty.

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

Zpracování časových pásem a mezinárodních dat

Při práci s uživateli v různých částech světa mohou být časová pásma skutečným problémem . S pluginem moment-timezone můžete snadno převádět data mezi regiony.

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"

Kromě toho je Moment.js schopen zobrazovat data přizpůsobená regionálnímu nastavení uživatele a zobrazovat správně přeložené názvy měsíců a dnů.

Klíčové příklady použití a pokročilé tipy

Získání rozdílů mezi daty

Čas uplynulý mezi dvěma daty můžete vypočítat v různých jednotkách:

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

Relativní data a lidské časy

Moment.js je skvělý pro zobrazování zpráv jako „před 3 dny“ nebo „za 5 hodin“:

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

Lidský kalendář

Funkce calendar () zobrazuje relativní data, například „včera v 17:00“ nebo „zítra v 9:00“, což ji činí velmi užitečnou pro kalendářové aplikace.

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

Podpora pro přechody do roku a zvláštní dny

Chcete vědět, jestli je rok přestupný?

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

Metoda isLeapYear() vám dá přímou odpověď.

Pokročilé přizpůsobení: formáty, tokeny a striktní parsování

Moment.js umožňuje pracovat s vlastními řetězci a tokeny pro vytváření nebo čtení dat v nesčetných formátech . Strict mode navíc vyžaduje přesné shody, čímž zabraňuje drobným chybám a nechtěným překvapením.

Například pro analýzu data ve formátu „den/měsíc/rok“:

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

Seznam běžných tokenů a příklady

• RokRRRR (2024), RR (24), RR (-500)
• Měsíc: MM (01 – 12), MMM (leden), MMMM (leden)
• Día: DD (01 – 31), C (1. – 31.)
• HoraHH (00–23), hh (01–12), mm (minuty), ss (sekundy)
• Časové pásmoZ, ZZ

Tyto tokeny lze kombinovat a vytvářet tak zcela přizpůsobené výstupy. Úplný seznam a speciální případy naleznete v dokumentaci.