Prawie każdy rodzaj aplikacji napisanej w JavaScript działa z czasami i datami w pewnym zakresie. Na początku ograniczało się to do wbudowanego API Date. Ten interfejs API zawiera podstawową funkcjonalność, ale jego możliwości są dość ograniczone. Biblioteki innych firm, takie jak Moment.js, a także późniejsze wbudowane interfejsy API, takie jak Intl API i nowy Temporal API, zapewniają znacznie większą elastyczność pracy z godzinami i datami. Wzlot i upadek Moment.js Moment.js to biblioteka JavaScript zawierająca zaawansowane narzędzia do pracy z godzinami i datami. Zawiera brakujące funkcje podstawowego interfejsu API Date, takie jak manipulowanie strefą czasową, i upraszcza wiele typowych operacji. Moment zawiera także funkcje formatowania dat i godzin. Stała się powszechnie używaną biblioteką w wielu różnych zastosowaniach. Jednak Moment miał również swoje problemy. Jest to duża biblioteka, która może znacznie zwiększyć rozmiar pakietu aplikacji. Ponieważ biblioteka nie obsługuje wstrząsania drzewami (funkcja nowoczesnych programów pakujących, które mogą usuwać nieużywane części bibliotek), dołączona jest cała biblioteka Moment, nawet jeśli korzystasz tylko z jednej lub dwóch jej funkcji. Kolejnym problemem związanym z Momentem jest fakt, że tworzone przez niego obiekty można modyfikować. Wywołanie pewnych funkcji na obiekcie Moment ma skutki uboczne i zmienia wartość tego obiektu. Może to prowadzić do nieoczekiwanych zachowań lub błędów. W 2020 roku opiekunowie Momentu postanowili wprowadzić bibliotekę w tryb konserwacji. Nie są opracowywane żadne nowe funkcje, a opiekunowie zalecają, aby nie używać ich w nowych projektach. Istnieją inne biblioteki dat JavaScript, takie jak date-fns, ale pojawił się nowy gracz, API wbudowane bezpośrednio w JavaScript: Temporal. To nowy standard, który wypełnia luki w oryginalnym Date API, a także rozwiązuje niektóre ograniczenia występujące w Moment i innych bibliotekach. Co to jest tymczasowe? Temporal to nowy interfejs API czasu i daty dodawany do standardu ECMAScript, który definiuje nowoczesny JavaScript. Według stanu na marzec 2026 r.6 osiągnął on 4. etap procesu TC39 (komitet nadzorujący propozycje i dodatki do języka JavaScript) i zostanie uwzględniony w następnej wersji specyfikacji ECMAScript. Zostało już zaimplementowane w kilku przeglądarkach: Chrome 144+ i Firefox 139+, a wkrótce ma pojawić się także Safari. Polyfill jest również dostępny dla nieobsługiwanych przeglądarek i Node.js. Interfejs API Temporal tworzy obiekty, które ogólnie reprezentują momenty w czasie. Mogą to być znaczniki pełnego czasu pracy i daty w danej strefie czasowej lub mogą to być ogólne przykłady czasu „zegara ściennego” bez żadnych informacji o strefie czasowej ani dacie. Niektóre z głównych funkcji Temporal obejmują:
Godziny z datami lub bez. Obiekt Temporal może reprezentować określony czas w określonej dacie lub czas bez żadnych informacji o dacie. Można również przedstawić konkretną datę bez godziny. Obsługa stref czasowych. Obiekty tymczasowe są w pełni świadome stref czasowych i można je konwertować w różnych strefach czasowych. Moment obsługuje również strefy czasowe, ale wymaga dodatkowej biblioteki moment-timezone. Niezmienność. Po utworzeniu obiektu tymczasowego nie można go zmienić. Konwersje arytmetyczne czasu lub strefy czasowej nie modyfikują obiektu bazowego. Zamiast tego generują nowy obiekt Temporal. Indeksowanie oparte na 1. Częstym źródłem błędów w interfejsie Date API (a także w Moment) jest to, że miesiące są indeksowane zerem. Oznacza to, że styczeń to miesiąc 0, a nie miesiąc 1, jak wszyscy rozumiemy w prawdziwym życiu. Temporal rozwiązuje ten problem, używając indeksowania opartego na 1 — styczeń jest miesiącem 1. Jest wbudowany w przeglądarkę. Ponieważ Temporal jest interfejsem API samej przeglądarki, nie dodaje on nic do rozmiaru pakietu aplikacji.
Należy również pamiętać, że interfejs Date API nie zostanie wycofany. Chociaż Temporal zastępuje ten interfejs API, nie jest on usuwany ani przestarzały. Wiele aplikacji przestałoby działać, gdyby przeglądarki nagle usunęły interfejs API Date. Należy jednak pamiętać, że Moment jest obecnie uważany za przestarzały projekt w trybie konserwacji. W dalszej części artykułu przyjrzymy się niektórym „przepisom” na migrację kodu opartego na Moment do nowego interfejsu API Temporal. Zacznijmy refaktoryzację! Tworzenie obiektów daty i godziny Zanim będziemy mogli manipulować datami i godzinami, musimy stworzyć obiekty je reprezentujące. Aby utworzyć obiekt Moment reprezentujący bieżącą datę i godzinę, użyj funkcji momentu. stała teraz = chwila(); konsola.log(teraz); // Moment<2026-02-18T21:26:29-05:00>
Obiekt ten można teraz formatować i manipulować nim w razie potrzeby.
// konwertuj na UTC //ostrzeżenie: To mutuje obiekt Moment i ustawia go w trybie UTC! konsola.log(now.utc()); // Moment<2026-02-19T02:26:29Z>
// wypisz sformatowany ciąg znaków — zwróć uwagę, że używa on teraz czasu UTC console.log(now.format('MM/DD/RRRR gg:mm:ss a')); // 19.02.2026 02:27:07
Najważniejszą rzeczą do zapamiętania w przypadku Moment jest to, że obiekt Moment zawsze zawiera informację o godzinie i dacie. Jeśli potrzebujesz pracować tylko z informacjami o czasie, zwykle jest to w porządku, ale może powodować nieoczekiwane zachowanie w sytuacjach takich jak czas letni lub lata przestępne, gdzie data może mieć wpływ na obliczenia czasu. Czasowy jest bardziej elastyczny. Można utworzyć obiekt reprezentujący bieżącą datę i godzinę, tworząc obiekt Temporal.Instant. Oznacza to punkt w czasie określony przez czas od „epoki” (północ czasu UTC 1 stycznia 1970 r.). Temporal może odwoływać się do tej chwili z precyzją na poziomie nanosekund. const teraz = Temporal.Now.instant();
// zobacz surowe nanosekundy od epoki konsola.log(now.epochNanosekundy); // 1771466342612000000n
// format UTC konsola.log(teraz.toString()); // 2026-02-19T01:55:27.844Z
// format dla określonej strefy czasowej console.log(now.toString({timeZone: 'America/New_York' })); // 2026-02-18T20:56:57.905-05:00
Obiekty Temporal.Instant można także tworzyć na określoną godzinę i datę, korzystając ze statycznej metody from.
const myInstant = Temporal.Instant.from('2026-02-18T21:10:00-05:00');
// Sformatuj chwilę w lokalnej strefie czasowej. Pamiętaj, że to tylko kontroluje // formatowanie - nie powoduje mutacji obiektu jak moment.utc. console.log(myInstant.toString({timeZone: 'America/New_York' })); // 2026-02-18T21:10:00-05:00
Możesz także tworzyć inne typy obiektów Temporal, w tym:
Temporal.PlainDate: Data bez informacji o godzinie. Temporal.PlainTime: Czas bez informacji o dacie. Temporal.ZonedDateTime: data i godzina w określonej strefie czasowej.
Każdy z nich ma metodę from, którą można wywołać z obiektem określającym datę i/lub godzinę lub ciąg znaków daty do przeanalizowania. // Tylko randka const dzisiaj = Temporal.PlainDate.from({ rok: 2026, miesiąc: 2, // zauważ, że w lutym używamy liczby 2 dzień: 18 }); konsola.log(dzisiaj.toString()); // 2026-02-18
// Tylko raz const lunchTime = Temporal.PlainTime.from({ godzina: 12 }); konsola.log(Czas lunchu.toString()); // 12:00:00
// Data i godzina we wschodniej strefie czasowej Stanów Zjednoczonych const dueAt = Temporal.ZonedDateTime.from({ strefa czasowa: 'Ameryka/Nowy_Jork', rok: 2026, miesiąc: 3, dzień: 1, godzina: 12, minuta: 0, drugie: 0 }); konsola.log(dueAt.toString()); // 2026-03-01T12:00:00-05:00[Ameryka/Nowy_Jork]
Analizowanie Omówiliśmy programowe tworzenie informacji o dacie i godzinie. Przyjrzyjmy się teraz parsowaniu. Analizowanie to obszar, w którym Moment jest bardziej elastyczny niż wbudowany interfejs API Temporal. Możesz przeanalizować ciąg daty, przekazując go do funkcji momentu. W przypadku pojedynczego argumentu Moment oczekuje ciągu daty ISO, ale możesz użyć alternatywnych formatów, jeśli podasz drugi argument określający używany format daty.
const isoDate = moment('2026-02-21T09:00:00'); const formattedDate = moment('21/2/26 9:00:00', 'M/D/RR godz:mm:ss');
konsola.log(isoDate); // Moment<2026-02-21T09:00:00-05:00>
konsola.log(data sformatowana); // Moment<2026-02-21T09:00:00-05:00>
W starszych wersjach Moment najlepiej zgaduje, że analizuje dowolny dowolnie sformatowany ciąg daty. Może to prowadzić do nieprzewidywalnych rezultatów. Na przykład 02-03-2026 to 2 lutego czy 3 marca? Z tego powodu nowsze wersje Moment wyświetlają wyraźne ostrzeżenie o wycofaniu, jeśli zostaną wywołane bez ciągu daty w formacie ISO (chyba że podany zostanie również drugi argument z żądanym formatem). Temporal przeanalizuje tylko specjalnie sformatowany ciąg daty. Ciąg musi być zgodny z formatem ISO 8601 lub jego rozszerzeniem, RFC 9557. Jeśli do metody from zostanie przekazany niezgodny ciąg daty, Temporal zgłosi błąd RangeError.
// Użycie ciągu daty RFC 9557 const mojaData = Temporal.Instant.from('2026-02-21T09:00:00-05:00[Ameryka/Nowy_Jork]'); console.log(myDate.toString({timeZone: 'America/New_York' })); // 2026-02-21T09:00:00-05:00
// Użycie nieznanego ciągu daty const innaData = Temporal.Instant.from('2/21/26 9:00:00'); // RangeError: Błąd czasowy: Nieprawidłowy znak podczas analizowania wartości roku.
Dokładne wymagania dotyczące łańcucha daty zależą od rodzaju tworzonego obiektu Temporal. W powyższym przykładzie Temporal.Instant wymaga pełnego ISOCiąg daty zgodny z normą 8601 lub RFC 9557 określający datę i godzinę z przesunięciem strefy czasowej, ale można także tworzyć obiekty PlainDate lub PlainTime, korzystając tylko z podzbioru formatu daty. const mojaData = Temporal.PlainDate.from('2026-02-21'); konsola.log(mojaData.toString()); // 21.02.2026
const myTime = Temporal.PlainTime.from('09:00:00'); konsola.log(myTime.toString()); // 09:00:00
Należy pamiętać, że te ciągi muszą nadal być zgodne z oczekiwanym formatem, w przeciwnym razie zostanie zgłoszony błąd.
// Używanie niezgodnych ciągów czasu. Wszystkie one rzucą błąd RangeError. Temporal.PlainTime.from('9:00'); Temporal.PlainTime.from('9:00:00');
Wskazówka dla profesjonalistów: obsługa ciągów innych niż ISO Ponieważ Temporal stawia na niezawodność, nie będzie próbował odgadnąć formatu ciągu znaków, np. 01-02-2026. Jeśli Twoje źródło danych używa takich ciągów, przed próbą użycia go z Temporalem będziesz musiał wykonać pewne manipulacje na ciągach, aby zmienić układ wartości na ciąg ISO, np. 2026-02-01.
Formatowanie Kiedy już będziesz mieć obiekt Moment lub Temporal, prawdopodobnie będziesz chciał w pewnym momencie przekonwertować go na sformatowany ciąg znaków. To jest przypadek, w którym Moment jest nieco bardziej zwięzły. Wywołujesz metodę formatu obiektu z ciągiem tokenów opisujących żądany format daty. stała data = moment();
konsola.log(data.format('MM/DD/RRRR')); // 22.02.2026
console.log(date.format('MMMM Czy RRRR, h:mm:ss a')); // 22 lutego 2026, 20:18:30
Z drugiej strony Temporal wymaga nieco większej gadatliwości. Obiekty tymczasowe, takie jak Instant, mają metodę toLocaleString, która akceptuje różne opcje formatowania określone jako właściwości obiektu.
stała data = Temporal.Now.instant();
// bez argumentów otrzymamy domyślny format dla bieżących ustawień regionalnych konsola.log(data.toLocaleString()); // 22.02.2026, 20:23:36 (przy założeniu ustawień regionalnych en-US)
// przekaż opcje formatowania, aby wygenerować ciąg znaków w niestandardowym formacie console.log(date.toLocaleString('en-US', { miesiąc: „długi”, dzień: 'numeryczny', rok: „numeryczny”, godzina: '2-cyfrowa', minuta: „2-cyfrowa” })); // 22 lutego 2026 o 20:23
// Przekazuj tylko żądane pola w ciągu formatującym console.log(date.toLocaleString('en-US', { miesiąc: „krótki”, dzień: „numeryczny” })); // 22 lutego
Tymczasowe formatowanie daty faktycznie wykorzystuje pod maską interfejs API Intl.DateTimeFormat (który jest już łatwo dostępny w nowoczesnych przeglądarkach). Oznacza to, że możesz utworzyć obiekt DateTimeFormat wielokrotnego użytku z niestandardowymi opcjami formatowania, a następnie przekazać obiekty Temporal do jego metody formatowania. Z tego powodu nie obsługuje niestandardowych formatów dat, takich jak Moment. Jeśli potrzebujesz czegoś takiego jak „pierwszy kwartał 2026 r.” lub innego specjalistycznego formatowania, możesz potrzebować niestandardowego kodu formatowania daty lub sięgnąć po bibliotekę innej firmy. const formatter = new Intl.DateTimeFormat('en-US', { miesiąc: „2-cyfrowy”, dzień: „2-cyfrowy”, rok: „numeryczny” });
stała data = Temporal.Now.instant(); konsola.log(formater.format(data)); // 22.02.2026
Tokeny formatowania Moment są prostsze do napisania, ale nie są przyjazne dla ustawień regionalnych. Format zawiera ciągi „twardego kodu”, takie jak kolejność miesięcy/dni. Zaletą korzystania z obiektu konfiguracyjnego, tak jak robi to Temporal, jest to, że automatycznie dostosuje się on do dowolnych ustawień regionalnych i użyje prawidłowego formatu. stała data = Temporal.Now.instant();
opcje stałego formatu = { miesiąc: 'numeryczny', dzień: 'numeryczny', rok: „numeryczny” };
console.log(date.toLocaleString('en-US', formatOptions)); // 22.02.2026
console.log(date.toLocaleString('en-GB', formatOptions)); // 22.02.2026
Obliczenia dat W wielu zastosowaniach konieczne będzie wykonanie pewnych obliczeń na dacie. Możesz dodać lub odjąć jednostki czasu (dni, godziny, sekundy itp.). Na przykład, jeśli masz aktualną datę, możesz chcieć pokazać użytkownikowi datę za 1 tydzień od teraz. Obiekty momentów mają metody takie jak dodawanie i odejmowanie, które wykonują te operacje. Funkcje te przyjmują wartość i jednostkę, na przykład: add(7, 'dni'). Jednakże bardzo ważna różnica między Momentem a Temporalem polega na tym, że podczas wykonywania obliczeń dat obiekt bazowy ulega modyfikacji, a jego pierwotna wartość zostaje utracona. stała teraz = chwila();
konsola.log(teraz); // Moment<2026-02-24T20:08:36-05:00>
const następny tydzień = teraz.add(7, 'dni'); konsola.log(następny tydzień); // Moment<2026-03-03T20:08:36-05:00>
// Gotcha – oryginalny obiekt został zmutowany konsola.log(teraz); // Moment<2026-03-03T20:08:36-05:00>
Aby uniknąć utraty oryginalnej daty, możesz wywołać clone na obiekcie Moment, aby utworzyć kopię. stała teraz= chwila(); const następny tydzień = teraz.clone().add(7, 'dni');
konsola.log(teraz); // Moment<2026-02-24T20:12:55-05:00>
konsola.log(następny tydzień); // Moment<2026-03-03T20:12:55-05:00>
Z drugiej strony obiekty tymczasowe są niezmienne. Po utworzeniu obiektu takiego jak Instant, PlainDate itd. wartość tego obiektu nigdy się nie zmieni. Obiekty tymczasowe mają również metody dodawania i odejmowania. Temporal jest nieco wybredny w kwestii tego, jakie jednostki czasu można dodać do jakich typów obiektów. Na przykład nie możesz dodać dni do Instant:
const teraz = Temporal.Now.instant(); const następny tydzień = teraz.add({ dni: 7 }); // RangeError: Błąd czasowy: Największa jednostka nie może być jednostką daty
Dzieje się tak, ponieważ obiekty Instant reprezentują określony punkt w czasie w formacie UTC i są niezależne od kalendarza. Ponieważ długość dnia może się zmieniać w zależności od zasad strefy czasowej, takich jak czas letni, obliczenia te nie są dostępne w trybie natychmiastowym. Można jednak wykonać tę operację na obiektach innych typów, takich jak PlainDateTime: const teraz = Temporal.Now.plainDateTimeISO(); konsola.log(now.toLocaleString()); // 24.02.2026, 20:23:59
const następny tydzień = teraz.add({ dni: 7 });
// Należy pamiętać, że oryginalna wartość PlainDateTime pozostaje niezmieniona konsola.log(now.toLocaleString()); // 24.02.2026, 20:23:59
konsola.log(nextWeek.toLocaleString()); // 3.03.2026, 20:23:59
Można także obliczyć czas pomiędzy dwoma obiektami Moment lub Temporal. W przypadku funkcji różnicowej Moment należy podać jednostkę szczegółowości, w przeciwnym razie różnica zostanie zwrócona w milisekundach. stała data1 = moment('2026-02-21T09:00:00'); stała data2 = moment('2026-02-22T10:30:00');
konsola.log(data2.diff(data1)); // 91800000
konsola.log(data2.diff(data1, 'dni')); // 1
Aby to zrobić z obiektem Temporal, możesz przekazać inny obiekt Temporal do jego metod do lub od. Zwraca to obiekt Temporal.Duration zawierający informacje o różnicy czasu. Obiekt Duration ma właściwości dla każdego składnika różnicy, a także może generować ciąg czasu trwania ISO 8601 reprezentujący różnicę czasu.
const date1 = Temporal.PlainDateTime.from('2026-02-21T09:00:00'); const date2 = Temporal.PlainDateTime.from('2026-02-22T10:30:00');
// największa jednostka określa największą jednostkę czasu do reprezentowania // w obliczeniach czasu trwania const diff = data2.since(data1, {największajednostka: 'dzień' });
konsola.log(różnica.dni); // 1
konsola.log(różnica.godzin); // 1
konsola.log(różnica.minuty); // 30
konsola.log(diff.toString()); // P1DT1H30M // (ciąg czasu trwania ISO 8601: 1 dzień, 1 godzina, 30 minut)
Porównywanie dat i godzin Zarówno Moment, jak i Temporal umożliwiają porównywanie dat i godzin w celu ustalenia, która z nich jest wcześniejsza, ale w przypadku interfejsu API można zastosować różne podejścia. Moment udostępnia metody takie jak isBefore, isAfter i isSame umożliwiające porównanie dwóch obiektów Moment. stała data1 = moment('2026-02-21T09:00:00'); stała data2 = moment('2026-02-22T10:30:00');
konsola.log(data1.isBefore(data2)); // prawda
Temporal używa statycznej metody porównywania do porównywania dwóch obiektów tego samego typu. Zwraca -1, jeśli pierwsza data przypada przed drugą, 0, jeśli są one równe, lub 1, jeśli pierwsza data przypada po drugiej. Poniższy przykład pokazuje, jak porównać dwa obiekty PlainDate. Oba argumenty Temporal.PlainDate.compare muszą być obiektami PlainDate.
const date1 = Temporal.PlainDate.from({rok: 2026, miesiąc: 2, dzień: 24 }); const date2 = Temporal.PlainDate.from({rok: 2026, miesiąc: 3, dzień: 24 });
// data1 występuje przed datą2, więc -1 konsola.log(Temporal.PlainDate.compare(data1, data2));
// Błąd podczas próby porównania dwóch obiektów różnych typów konsola.log(Temporal.PlainDate.compare(data1, Temporal.Now.instant())); // TypeError: Błąd tymczasowy: podano nieprawidłowe pola PlainDate.
W szczególności ułatwia to chronologiczne sortowanie tablicy obiektów Temporal. // Tablica obiektów Temporal.PlainDate stałe daty = [ ... ];
// użyj Temporal.PlainDate.compare jako funkcji porównawczej daty.sort(Temporal.PlainDate.compare);
Konwersje stref czasowych Podstawowa biblioteka Moment nie obsługuje konwersji stref czasowych. Jeśli potrzebujesz tej funkcjonalności, musisz także zainstalować pakiet moment-timezone. Pakiet ten nie podlega wahaniom w drzewie i dlatego może znacznie zwiększyć rozmiar pakietu. Po zainstalowaniu programu moment-timezone możesz konwertować obiekty Moment na różne strefy czasowe za pomocą metody tz. Podobnie jak w przypadku innych operacji Moment, powoduje to mutację instrumentu bazowegoobiekt. // Zakładając, że czas wschodni w USA stała teraz = chwila(); konsola.log(teraz); // Moment<2026-02-28T20:08:20-05:00>
// Konwertuj na czas pacyficzny. // Oryginalny czas wschodni zaginął. now.tz('Ameryka/Los Angeles'); konsola.log(teraz); // Moment<2026-02-28T17:08:20-08:00>
Funkcja strefy czasowej jest wbudowana w interfejs API Temporal podczas korzystania z obiektu Temporal.ZonedDateTime. Obiekty te obejmują metodę withTimeZone, która zwraca nową wartość ZonedDateTime reprezentującą ten sam moment w czasie, ale w określonej strefie czasowej. // Ponownie, zakładając czas wschodni USA const teraz = Temporal.Now.zonedDateTimeISO(); konsola.log(now.toLocaleString()); // 28.02.2026, 20:12:02 EST
// Konwertuj na czas pacyficzny const nowPacific = now.withTimeZone('Ameryka/Los_Angeles'); konsola.log(nowPacific.toLocaleString()); // 28.02.2026, 17:12:02 PST
// Oryginalny obiekt pozostaje niezmieniony konsola.log(now.toLocaleString()); // 28.02.2026, 20:12:02 EST
Uwaga: Sformatowane wartości zwracane przez toLocaleString są, jak sama nazwa wskazuje, zależne od ustawień regionalnych. Przykładowy kod został opracowany w ustawieniach regionalnych en-USA, więc format jest następujący: 28.02.2026, 17:12:02 PST. W innym regionie może być inaczej. Na przykład w ustawieniach regionalnych en-GB otrzymasz mniej więcej datę 28.02.2026, 17:12:02 GMT-8. Refaktoryzacja w świecie rzeczywistym Załóżmy, że tworzymy aplikację do planowania wydarzeń w różnych strefach czasowych. Częścią tej aplikacji jest funkcja getEventTimes, która pobiera ciąg znaków ISO 8601 reprezentujący godzinę i datę zdarzenia, lokalną strefę czasową i docelową strefę czasową. Funkcja tworzy sformatowane ciągi czasu i daty zdarzenia w obu strefach czasowych. Jeśli funkcja otrzyma ciąg wejściowy, który nie jest prawidłowym ciągiem godziny/daty, zgłosi błąd. Oto oryginalna implementacja wykorzystująca Moment (wymagająca również użycia pakietu moment-timezone).
importuj moment z „moment-strefa czasowa”;
funkcja getEventTimes(inputString, userTimeZone, targetTimeZone) { const timeFormat = 'MMM D, RRRR, h:mm:ss a z';
// 1. Utwórz moment początkowy w strefie czasowej użytkownika const czas zdarzenia = moment.tz( ciąg wejściowy, moment.ISO_8601, // Oczekuj ciągu znaków ISO 8601 true, // Ścisła analiza Strefa czasowa użytkownika );
// Zgłasza błąd, jeśli ciąg wejściowy nie reprezentuje prawidłowej daty if (!eventTime.isValid()) { wrzuć nowy błąd('Nieprawidłowe wprowadzenie daty/godziny'); }
// 2. Oblicz docelowy czas // KRYTYCZNY: Musimy sklonować, w przeciwnym razie „eventTime” zmieni się na zawsze! const targetTime = eventTime.clone().tz(targetTimeZone);
zwrócić { lokalny: eventTime.format(timeFormat), cel: targetTime.format(timeFormat), }; }
stały harmonogram = getEventTimes( '2026-03-05T15:00-05:00', „Ameryka/Nowy_Jork”, „Europa/Londyn”, );
konsola.log(schedule.local); // 5 marca 2026 r., 15:00:00 czasu wschodniego
konsola.log(harmonogram.target); // 5 marca 2026 r., 20:00:00 GMT
W tym przykładzie używamy oczekiwanego formatu daty ISO 8601, który jest wbudowany w Moment. Stosujemy również ścisłą analizę składniową, co oznacza, że Moment nie będzie próbował odgadnąć ciągu daty, który nie pasuje do formatu. Jeśli zostanie przekazany ciąg daty inny niż ISO, spowoduje to powstanie nieprawidłowego obiektu daty i wygenerowanie błędu. Implementacja Temporal wygląda podobnie, ale ma kilka kluczowych różnic.
funkcja getEventTimes(inputString, userTimeZone, targetTimeZone) { // 1. Przeanalizuj dane wejściowe bezpośrednio w Instant, a następnie utwórz // ZonedDateTime w strefie użytkownika. const instant = Temporal.Instant.from(inputString); const eventTime = instant.toZonedDateTimeISO(userTimeZone);
// 2. Konwertuj na strefę docelową // To automatycznie zwraca NOWY obiekt; „eventTime” jest bezpieczny. const targetTime = eventTime.withTimeZone(targetTimeZone);
// 3. Formatuj przy użyciu Intl (wbudowane) stałe opcje = { rok: „numeryczny”, miesiąc: „krótki”, dzień: 'numeryczny', godzina: 'numeryczna', minuta: „2-cyfrowa”, drugie: „2-cyfrowe”, nazwastrefy czasowej: „krótka” };
zwrócić { lokalny: eventTime.toLocaleString(navigator.language, opcje), cel: targetTime.toLocaleString(navigator.language, opcje) }; }
stały harmonogram = getEventTimes( '2026-03-05T15:00-05:00', „Ameryka/Nowy_Jork”, „Europa/Londyn”, );
konsola.log(schedule.local); // 5 marca 2026 r., 15:00:00 czasu wschodniego
konsola.log(harmonogram.target); // 5 marca 2026 r., 20:00:00 GMT
W przypadku Moment musimy jawnie określić ciąg formatu dla wynikowych ciągów dat. Niezależnie od lokalizacji i ustawień regionalnych użytkownika, godziny wydarzeń będą zawsze sformatowane jako 5 marca 2026 r., 3:00:00po południu czasu wschodniego. Nie musimy też jawnie zgłaszać wyjątku. Jeśli do Temporal.Instant.from zostanie przekazany nieprawidłowy ciąg znaków, Temporal zgłosi dla nas wyjątek. Należy zauważyć, że nawet przy ścisłej analizie wersja Moment jest nadal łagodniejsza. Temporal wymaga przesunięcia strefy czasowej na końcu ciągu. Należy również pamiętać, że ponieważ używamy navigator.language, ten kod będzie działał tylko w środowisku przeglądarki, ponieważ navigator nie jest zdefiniowany w środowisku Node.js. Implementacja Temporal korzysta z bieżących ustawień regionalnych przeglądarki (navigator.language), więc użytkownik automatycznie otrzyma czasy zdarzeń w formacie czasu lokalnego. W lokalizacji en-USA jest to 5 marca 2026 r., godzina 15:00:00 czasu wschodniego. Jeśli jednak użytkownik znajduje się na przykład w Londynie, godziny wydarzeń zostaną sformatowane jako 5 marca 2026 r., 15:00:00 GMT-5. Podsumowanie
Akcja Moment.js Tymczasowe Aktualny czas chwila() Temporal.Now.zonedDateTimeISO() Parsowanie ISO moment (str) Tymczasowe.Natychmiastowe.od(str) Dodaj czas .add(7, 'dni') (mutuje) .add({ dni: 7 }) (nowy obiekt) Różnica .diff(inne, „godziny”) .od(inne).godziny Strefa czasowa .tz('Strefa/Nazwa') .withTimeZone('Strefa/Nazwa')
Na pierwszy rzut oka różnica może być nieco inna (a w przypadku Temporal czasami bardziej gadatliwa i bardziej rygorystyczna) składnia, ale istnieje kilka kluczowych zalet używania Temporal w porównaniu z Moment.js:
Bycie bardziej wyraźnym oznacza mniej niespodzianek i niezamierzonych błędów. Chwila może wydawać się łagodniejsza, ale wymaga „domysłów”, co czasami może skutkować podaniem nieprawidłowych dat. Jeśli podasz Temporalowi coś nieprawidłowego, zgłosi błąd. Jeśli kod się uruchomi, wiesz, że masz prawidłową datę. Moment może znacznie zwiększyć rozmiar pakietu aplikacji, szczególnie jeśli korzystasz z pakietu moment-strefa czasowa. Temporal nic nie dodaje (po wysłaniu do docelowych przeglądarek). Niezmienność daje pewność, że nigdy nie stracisz ani nie nadpiszesz danych podczas wykonywania konwersji i operacji na datach. Różne reprezentacje czasu (Instant, PlainDateTime, ZonedDateTime) w zależności od wymagań, gdzie Moment jest zawsze opakowaniem wokół znacznika czasu UTC. Temporal używa interfejsów API Intl do formatowania daty, co oznacza, że możesz mieć formatowanie uwzględniające ustawienia regionalne bez konieczności jawnego określania tokenów.
Uwagi na temat wypełnienia Jak wspomniano wcześniej, dostępny jest wypełniacz Temporal, dystrybuowany jako pakiet npm o nazwie @js-temporal/polyfill. Jeśli chcesz już dziś korzystać z Temporal, będziesz potrzebować tego wypełnienia do obsługi przeglądarek takich jak Safari, które nie dostarczyły jeszcze interfejsu API. Zła wiadomość jest taka, że zwiększy to rozmiar pakietu. Dobra wiadomość jest taka, że nadal dodaje znacznie mniej niż moment lub strefa czasowa chwili. Oto porównanie rozmiarów pakietów według Bundlefobii.com, strony internetowej prezentującej informacje na temat rozmiarów pakietów npm (kliknij nazwę każdego pakietu, aby zobaczyć analizę Bundlefobii):
Pakiet Zminimalizowane Zminifikowany i spakowany gzipem @js-temporal/polyfill 154,1 kB 44,1 kB chwila 294,4 kB 75,4 kB strefa czasowa chwili 1MB 114,2 kB
W przeszłości wypełniacz miał również pewne problemy z wydajnością związaną z wykorzystaniem pamięci i w chwili pisania tego tekstu uważa się, że znajduje się w stanie alfa. Z tego powodu możesz nie chcieć używać go w środowisku produkcyjnym, dopóki nie osiągnie bardziej dojrzałego stanu. Inną dobrą wiadomością jest to, że miejmy nadzieję, że wypełnienie nie będzie już potrzebne (chyba że oczywiście musisz obsługiwać starsze przeglądarki). W chwili pisania tego tekstu Temporal był dostępny w przeglądarkach Chrome, Edge i Firefox. Nie jest jeszcze całkiem gotowa w przeglądarce Safari, chociaż wydaje się, że jest dostępna z flagą środowiska wykonawczego w najnowszym przeglądzie technologii.
