0Pricing
React Academy · Lekcja

Liczba mnoga i interpolacja

Obsługa form liczby mnogiej zależnych od liczby oraz wstawianie dynamicznych wartości do przetłumaczonych ciągów.

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

Wprowadzenie

W tej lekcji będą Państwo obsługiwać formy liczby mnogiej zależne od liczby oraz wstawiać dynamiczne wartości do przetłumaczonych ciągów znaków za pomocą interpolacji i obsługi liczby mnogiej w i18next.

Podstawy interpolacji

W ciągach tłumaczeń należy używać podwójnych nawiasów klamrowych jako symboli zastępczych. Jako drugi argument funkcji t() należy przekazać obiekt zawierający wartości zmiennych.
// JSON: "greeting": "Hello, {{name}}!"
t('greeting', { name: 'Alice' }); // Hello, Alice!

Wiele zmiennych interpolacji

W jednym ciągu znaków można użyć dowolnej liczby zmiennych interpolacji.
// JSON: "summary": "You have {{count}} messages in {{folder}}"
t('summary', { count: 5, folder: 'Inbox' });
// You have 5 messages in Inbox

Escapowanie kodu HTML

Domyślnie i18next wykonuje escapowanie znaków HTML w interpolowanych wartościach. Aby renderować kod HTML wewnątrz interpolowanej wartości, należy ustawić `escapeValue: false` w konfiguracji init (w React jest to już bezpieczne, ponieważ React wykonuje escapowanie JSX).

Formy liczby mnogiej

i18next automatycznie obsługuje formy liczby mnogiej. Dla liczby pojedynczej należy zdefiniować `key`, a dla liczby mnogiej `key_other` (lub `key_plural`). W obiekcie interpolacji należy przekazać `count`.
// JSON:
// "item": "{{count}} item"
// "item_other": "{{count}} items"

t('item', { count: 1 }); // 1 item
t('item', { count: 5 }); // 5 items

Reguły liczby mnogiej zależne od języka

Różne języki mają różne reguły liczby mnogiej. Język rosyjski ma 4 formy liczby mnogiej, a arabski — 6. i18next automatycznie używa reguł Unicode CLDR odpowiednich dla każdego języka. W pliku tłumaczeń należy zdefiniować wszystkie wymagane formy.
// Russian (ru):
// key_one, key_few, key_many, key_other

Forma dla zera

i18next obsługuje również specjalną formę `key_zero`, używaną, gdy liczba wynosi 0. Pozwala to zastosować inne sformułowanie, na przykład „Brak elementów” zamiast „0 elementów”.
// JSON:
// "messages_zero": "No messages"
// "messages_one": "{{count}} message"
// "messages_other": "{{count}} messages"

t('messages', { count: 0 }); // No messages

Zagnieżdżone klucze z formami liczby mnogiej

Klucze form liczby mnogiej mogą znajdować się wewnątrz zagnieżdżonych obiektów. Należy uzyskiwać do nich dostęp za pomocą notacji kropkowej, tak samo jak do zwykłych zagnieżdżonych kluczy.
// JSON: { "cart": { "items_one": "item", "items_other": "items" } }
t('cart.items', { count: 3 }); // items

Formatowanie dat i liczb

i18next integruje się z API Intl, aby zapewnić formatowanie dat i liczb zgodne z locale. Do formatowania dat w ramach tłumaczeń należy użyć i18n.format() lub wtyczki intlify.
t('lastSeen', { date: new Date(), formatParams: {
  date: { month: 'long', day: 'numeric' }
}});

Tłumaczenia zależne od kontekstu

Proszę użyć opcji `context` dla form różniących się gramatycznie w zależności od kontekstu, na przykład słów zależnych od rodzaju. W pliku tłumaczeń należy zdefiniować warianty `key_male` i `key_female`.
// JSON: { "hero_male": "Hero", "hero_female": "Heroine" }
t('hero', { context: 'female' }); // Heroine

Szybkie sprawdzenie

Jak przekazać dynamiczną wartość o nazwie 'username' do ciągu tłumaczenia w i18next?

Podsumowanie

Do interpolacji należy używać {{variable}}, do form liczby mnogiej key_other/key_one, a do formy dla zera key_zero. i18next automatycznie stosuje reguły liczby mnogiej Unicode CLDR odpowiednie dla danego języka. Opcji context należy używać dla wariantów gramatycznych.

Następnie

Następna lekcja: **Przełącznik języka i leniwe ładowanie tłumaczeń** — zbudują Państwo przełącznik locale i będą ładować pakiety tłumaczeń na żądanie.

Często zadawane pytania

Czy lekcja „Liczba mnoga i interpolacja” jest bezpłatna?

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

Co nauczysz się w „Liczba mnoga i interpolacja”?

Obsługa form liczby mnogiej zależnych od liczby oraz wstawianie dynamicznych wartości do przetłumaczonych ciągów. Ćwiczysz React 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ąć React Academy?

Nie wymagamy żadnego doświadczenia. React 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 interpolacja”?

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

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

  1. Konfiguracja react-i18next
  2. Używanie hooka useTranslation
  3. Liczba mnoga i interpolacja
  4. Przełącznik języka i leniwe ładowanie tłumaczeń
← Powrót do React Academy