Angular Academy · Lekcja

Liczba mnoga i select (ICU)

Obsługiwać liczbę mnogą i tekst zależny od płci

Liczba mnoga i select (ICU) to bezpłatna lekcja Angular 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 Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Dlaczego same symbole zastępcze nie wystarczą

Zdanie „Masz 1 wiadomości” jest niepoprawne po polsku. Języki mają różne reguły liczby mnogiej (niektóre mają kilka jej form), a także formy zależne od rodzaju lub kategorii. Angular obsługuje to za pomocą formatu komunikatów ICU: wyrażeń plural i select.

Wyrażenie plural

Wyrażenie ICU plural wybiera tekst na podstawie liczby. Listujesz przypadki według kategorii liczby mnogiej i podajesz tekst dla każdego z nich.

<p i18n>{count, plural,
  =0 {No messages}
  =1 {One message}
  other {{{count}} messages}
}</p>

Kategorie liczby mnogiej

Kategorie obejmują dokładne dopasowania (=0, =1) oraz słowa kluczowe CLDR: zero, one, two, few, many i wymagane other. Poszczególne lokalizacje automatycznie używają różnych podzbiorów.

Symbol zastępczy hash

W przypadku plural symbol # jest skrótem oznaczającym dopasowywaną liczbę, więc nie trzeba ponownie umieszczać wiązania.

<p i18n>{count, plural,
  =1 {You have one item}
  other {You have # items}
}</p>

Wyrażenie select

select wybiera tekst na podstawie wartości tekstowej, co sprawdza się idealnie w przypadku kategorii takich jak rodzaj, status lub typ.

<p i18n>{gender, select,
  male {He replied}
  female {She replied}
  other {They replied}
}</p>

other jest wymagane

Zarówno plural, jak i select wymagają gałęzi other. Jest ona używana jako domyślna, gdy żaden konkretny przypadek nie pasuje. Angular zgłosi błąd, jeśli jej zabraknie.

Łączenie z otaczającym tekstem

Wyrażenia ICU mogą znajdować się wewnątrz zwykłego tłumaczonego tekstu. Umieść całe zdanie w jednym bloku i18n, aby tłumacze mogli kontrolować kolejność słów.

<p i18n>Hi {{ name }}, {count, plural,
  =0 {you have no notifications}
  other {you have # notifications}
}.</p>

Zagnieżdżanie select wewnątrz plural

Wyrażenia ICU można zagnieżdżać, co pozwala jednocześnie wyrażać ilość i kategorię, gdy wymaga tego gramatyka.

{count, plural,
  =0 {No guests}
  other {# {type, select, vip {VIP} other {regular}} guests}
}

Tłumacze dostosowują kategorie

Podczas tłumaczenia lokalizacja może dodać formy liczby mnogiej wymagane przez jej gramatykę (np. język rosyjski używa one, few i many). Element target XLIFF dla jednostki ICU zawiera zlokalizowane gałęzie.

ICU w TypeScript z $localize

Składnia ICU działa również wewnątrz ciągów oznaczonych za pomocą $localize, dzięki czemu logika liczby mnogiej w kodzie komponentu także pozostaje możliwa do tłumaczenia.

const label = $localize('{count, plural, =1 {1 file} other {{{count}} files}}');

Dlaczego ICU jest lepsze niż ręczne if/else

Ręczne kodowanie count === 1 ? 'message' : 'messages' zakłada angielskie, binarne reguły liczby mnogiej. ICU przekazuje regułę do danych CLDR danej lokalizacji, dlatego języki z trzema lub sześcioma formami liczby mnogiej są wyświetlane poprawnie bez zmian w kodzie.

Szybkie sprawdzenie

Jaka gałąź ICU jest zawsze wymagana?

Podsumowanie

ICU plural wybiera tekst na podstawie liczby, korzystając z kategorii (=0, one, other) oraz symbolu # oznaczającego liczbę, natomiast select wybiera tekst na podstawie wartości tekstowej. Oba wyrażenia wymagają gałęzi other, można je swobodnie zagnieżdżać, działają w $localize i pozwalają każdej lokalizacji stosować własne reguły liczby mnogiej.

Często zadawane pytania

Czy lekcja „Liczba mnoga i select (ICU)” jest bezpłatna?

Tak — pełny tekst „Liczba mnoga i select (ICU)” 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 Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Liczba mnoga i select (ICU)”?

Obsługiwać liczbę mnogą i tekst zależny od płci Ćwiczysz Angular 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ąć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular 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 „Liczba mnoga i select (ICU)”?

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 Angular Academy?

Tak. Każda lekcja Angular 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 Angular Academy