0Pricing
Vue Academy · Lekcja

Liczba mnoga i komunikaty powiązane

Reguły liczby mnogiej, składnia @:key|@:key, liczba mnoga zależna od count oraz komunikaty powiązane z @:path.

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

Liczenie zależy od języka

„1 element”, ale „5 elementów” — a inne języki mają jeszcze więcej form. Wpisywanie form liczby mnogiej na stałe prowadzi do niezgrabnych napisów, takich jak „5 element(ów)”. Vue I18n ma wbudowaną pluralizację, która wybiera właściwą formę na podstawie liczby.

Formy liczby mnogiej rozdzielone pionową kreską

Formy zapisz w jednym komunikacie, rozdzielając je znakiem pionowej kreski (|). W języku angielskim typowe są dwie lub trzy formy.

const en = {
  items: "no items | one item | {count} items",
}

Wybieranie formy liczby mnogiej na podstawie liczby

Przekaż liczbę jako drugi argument funkcji t. Vue I18n wybierze pasującą formę na podstawie liczby.

const { t } = useI18n()

t("items", 0) // "no items"
t("items", 1) // "one item"
t("items", 9) // "9 items"

Domyślna reguła liczby mnogiej

Przy trzech formach obowiązuje reguła: 0 używa pierwszej, 1 drugiej, a każda inna liczba trzeciej. Przy dwóch formach 0 i większe liczby korzystają z jednej wspólnej formy.

const en = {
  // two-form version: 0 and N share the plural
  files: "no file | one file | {count} files",
}

Symbol zastępczy {count}

W komunikacie z formami liczby mnogiej specjalny symbol zastępczy {count} (lub {n}) jest wypełniany przekazaną liczbą, dzięki czemu można ją wyświetlić.

const en = { photos: "no photos | {count} photo | {count} photos" }

t("photos", 3) // "3 photos"

Liczba mnoga w szablonach

W szablonach używaj $t, przekazując liczbę jako drugi argument, tak jak w skrypcie.

<template>
  <p>{{ $t("items", cartCount) }}</p>
</template>

Łączenie liczby z nazwanymi wartościami

Możesz przekazać zarówno liczbę, jak i nazwane symbole zastępcze, podając liczbę oraz obiekt wartości.

const en = { greeting: "Hi {name}, no messages | Hi {name}, {count} messages" }

t("greeting", 2, { named: { name: "Ada" } })
// or per API: t("greeting", { name: "Ada" }, 2)

Czym są komunikaty powiązane?

Czasami jeden komunikat powinien zawierać inny, aby uniknąć duplikowania treści. Komunikaty powiązane odwołują się do innego klucza za pomocą składni @:.

const en = {
  brand: "Acme",
  welcome: "Welcome to @:brand",
}

Rozwiązywanie odwołania

Podczas tłumaczenia welcome token @:brand jest zastępowany przetłumaczoną wartością brand. Zmień brand w jednym miejscu, a każdy powiązany komunikat zostanie zaktualizowany.

t("welcome") // "Welcome to Acme"
// change brand -> all linked messages reflect it

Odwołania z kluczami zagnieżdżonymi

Odwołania działają również z zagnieżdżonymi kluczami rozdzielanymi kropkami. W razie potrzeby wielowyrazowe odwołania należy umieścić w nawiasach.

const en = {
  app: { name: "MyApp" },
  footer: "Thanks for using @:(app.name)",
}

Modyfikatory w odwołaniach

Komunikaty powiązane obsługują modyfikatory, takie jak @.upper, które przekształcają powiązaną wartość (upper, lower, capitalize).

const en = {
  brand: "acme",
  banner: "@.upper:brand sale!", // "ACME sale!"
}

Szybkie sprawdzenie

Sprawdź swoje rozumienie form liczby mnogiej i odwołań.

Podsumowanie

Poznałeś formy liczby mnogiej i ponowne używanie komunikatów:

  • Rozdzielaj formy liczby mnogiej znakiem |: "no items | one item | {count} items".
  • Przekaż liczbę do t(key, count), aby wybrać właściwą formę.
  • Symbol zastępczy {count} wyświetla liczbę.
  • Komunikaty powiązane ponownie używają innego klucza za pomocą @:otherKey (dla kluczy zagnieżdżonych użyj @:(nested.key)).
  • Modyfikatory, takie jak @.upper, przekształcają powiązaną wartość.

Często zadawane pytania

Czy lekcja „Liczba mnoga i komunikaty powiązane” jest bezpłatna?

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

Co nauczysz się w „Liczba mnoga i komunikaty powiązane”?

Reguły liczby mnogiej, składnia @:key|@:key, liczba mnoga zależna od count oraz komunikaty powiązane z @:path. Ćwiczysz Vue 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ąć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue 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 komunikaty powiązane”?

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

Tak. Każda lekcja Vue 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 vue-i18n i pliki komunikatów
  2. Composable useI18n i funkcja t()
  3. Liczba mnoga i komunikaty powiązane
  4. Formatowanie liczb, dat i walut
← Powrót do Vue Academy