JavaScript Academy · Lekcja

Czas względny i liczba mnoga

Proszę używać RelativeTimeFormat i PluralRules.

Czas względny i liczba mnoga to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Intl.RelativeTimeFormat

Intl.RelativeTimeFormat tworzy w języku użytkownika wyrażenia takie jak „3 dni temu” lub „za 2 godziny”.

const rtf = new Intl.RelativeTimeFormat("en-US");
console.log(rtf.format(-1, "day")); // "1 day ago"
console.log(rtf.format(2, "hour"));  // "in 2 hours"

Wartość ujemna oznacza przeszłość, dodatnia przyszłość

Znak liczby określa kierunek: wartość ujemna oznacza przeszłość, a dodatnia przyszłość.

const rtf = new Intl.RelativeTimeFormat("en-US");
console.log(rtf.format(-3, "week")); // "3 weeks ago"
console.log(rtf.format(5, "minute")); // "in 5 minutes"

Opcja numeric

numeric: "auto" używa naturalnych słów, takich jak „wczoraj” czy „jutro”, zamiast wyrażeń „1 dzień temu”.

const rtf = new Intl.RelativeTimeFormat("en-US", { numeric: "auto" });
console.log(rtf.format(-1, "day")); // "yesterday"
console.log(rtf.format(0, "day"));  // "today"

Czas względny zależny od lokalizacji

Zmiana lokalizacji automatycznie tłumaczy całe wyrażenie.

console.log(new Intl.RelativeTimeFormat("es").format(-2, "day")); // "hace 2 dias"
console.log(new Intl.RelativeTimeFormat("fr").format(3, "hour")); // "dans 3 heures"

Wybór właściwej jednostki

Rzeczywiste aplikacje wybierają największą sensowną jednostkę. Należy obliczyć różnicę w sekundach i przechodzić kolejno przez mniejsze jednostki.

function ago(date) {
  const diff = (date - Date.now()) / 1000;
  const rtf = new Intl.RelativeTimeFormat("en-US", { numeric: "auto" });
  if (Math.abs(diff) < 60) return rtf.format(Math.round(diff), "second");
  if (Math.abs(diff) < 3600) return rtf.format(Math.round(diff / 60), "minute");
  return rtf.format(Math.round(diff / 3600), "hour");
}
console.log(ago(new Date(Date.now() - 90000)));

Intl.PluralRules

Tworzenie liczby mnogiej to coś więcej niż dodanie litery „s”. Intl.PluralRules przypisuje liczbę do kategorii, takiej jak "one" lub "other", zgodnie z zasadami danego języka.

const pr = new Intl.PluralRules("en-US");
console.log(pr.select(1)); // "one"
console.log(pr.select(2)); // "other"
console.log(pr.select(0)); // "other"

Tworzenie komunikatów zależnych od liczby

Na podstawie kategorii należy wybrać właściwe słowo.

const pr = new Intl.PluralRules("en-US");
const forms = { one: "item", other: "items" };
function label(n) { return n + " " + forms[pr.select(n)]; }
console.log(label(1)); // "1 item"
console.log(label(5)); // "5 items"

Języki z większą liczbą form

Wiele języków ma kilka kategorii liczby mnogiej. Na przykład język polski rozróżnia "few" i "many" — logika zakodowana na stałe dla języka angielskiego byłaby niepoprawna.

const pr = new Intl.PluralRules("pl");
console.log(pr.select(1)); // "one"
console.log(pr.select(3)); // "few"
console.log(pr.select(5)); // "many"

Liczebniki porządkowe

Należy przekazać type: "ordinal", aby uzyskać kategorie dla liczebników porządkowych, takich jak 1., 2. czy 3.

const pr = new Intl.PluralRules("en-US", { type: "ordinal" });
const suffix = { one: "st", two: "nd", few: "rd", other: "th" };
function ordinal(n) { return n + suffix[pr.select(n)]; }
console.log(ordinal(1), ordinal(2), ordinal(3), ordinal(11)); // 1st 2nd 3rd 11th

Łączenie z liczbami

Należy połączyć PluralRules z NumberFormat, aby tworzyć w pełni zlokalizowane komunikaty dotyczące liczności.

const nf = new Intl.NumberFormat("en-US");
const pr = new Intl.PluralRules("en-US");
const forms = { one: "file", other: "files" };
function msg(n) { return nf.format(n) + " " + forms[pr.select(n)]; }
console.log(msg(1000)); // "1,000 files"

Intl.ListFormat

Dodatkowo Intl.ListFormat łączy elementy za pomocą spójników właściwych dla danej lokalizacji.

const lf = new Intl.ListFormat("en-US", { type: "conjunction" });
console.log(lf.format(["red", "green", "blue"])); // "red, green, and blue"

Szybki test

Proszę przetestować czas względny i liczby mnogie.

Podsumowanie: czas względny i liczby mnogie

Formatowali Państwo czas względny za pomocą RelativeTimeFormat (w tym z użyciem numeric: "auto"), wybierali progi jednostek, poprawnie tworzyli formy liczby mnogiej za pomocą PluralRules dla różnych języków i liczebników porządkowych oraz łączyli listy za pomocą ListFormat. Następny temat: sortowanie uwzględniające lokalizację.

Często zadawane pytania

Czy lekcja „Czas względny i liczba mnoga” jest bezpłatna?

Tak — pełny tekst „Czas względny i liczba mnoga” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Czas względny i liczba mnoga”?

Proszę używać RelativeTimeFormat i PluralRules. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Czas względny i liczba mnoga”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do JavaScript Academy