React Academy · Lektion

Pluralisering och interpolation

Hantera pluralformer baserade på antal och infoga dynamiska värden i översatta strängar.

Lektion 3 av 413 steg

Pluralisering och interpolation är en gratis lektion i React Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Välkommen

I den här lektionen kommer ni att hantera pluralformer baserade på antal och infoga dynamiska värden i översatta strängar med hjälp av i18nexts interpolering och pluralstöd.

Grunderna i interpolering

Använd dubbla klammerparenteser i översättningssträngarna som platshållare. Skicka ett objekt med variabelvärdena som det andra argumentet till t().

// JSON: "greeting": "Hello, {{name}}!"
t('greeting', { name: 'Alice' }); // Hello, Alice!

Flera interpoleringsvariabler

Ni kan använda så många interpoleringsvariabler som behövs i en och samma sträng.

// JSON: "summary": "You have {{count}} messages in {{folder}}"
t('summary', { count: 5, folder: 'Inbox' });
// You have 5 messages in Inbox

Escaping av HTML

Som standard escaper i18next HTML-tecken i interpolerade värden. Om ni vill rendera HTML i ett interpolerat värde anger ni `escapeValue: false` i initieringskonfigurationen (det är redan säkert i React eftersom React escaper JSX).

Pluralformer

i18next har automatiskt stöd för pluralformer. Definiera `key` för singular och `key_other` (eller `key_plural`) för plural. Skicka med `count` i interpoleringsobjektet.

// JSON:
// "item": "{{count}} item"
// "item_other": "{{count}} items"

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

Språkspecifika pluralregler

Olika språk har olika pluralregler. Ryska har fyra pluralformer och arabiska har sex. i18next använder automatiskt Unicode CLDR-regler för varje språk. Definiera alla obligatoriska former i översättningsfilen.

// Russian (ru):
// key_one, key_few, key_many, key_other

Nollform

i18next har även stöd för den särskilda formen `key_zero` när count är 0, vilket gör det möjligt att använda en annan formulering (till exempel 'Inga objekt' i stället för '0 objekt').

// JSON:
// "messages_zero": "No messages"
// "messages_one": "{{count}} message"
// "messages_other": "{{count}} messages"

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

Nästlade nycklar med pluralformer

Ni kan ha pluralnycklar inuti nästlade objekt. Använd punktnotation för att komma åt dem, precis som med vanliga nästlade nycklar.

// JSON: { "cart": { "items_one": "item", "items_other": "items" } }
t('cart.items', { count: 3 }); // items

Formatering av datum och tal

i18next integreras med Intl API för lokaliserad formatering av datum och tal. Använd i18n.format() eller intlify-pluginet för att formatera datum som en del av översättningar.

t('lastSeen', { date: new Date(), formatParams: {
  date: { month: 'long', day: 'numeric' }
}});

Kontextbaserade översättningar

Använd alternativet `context` för grammatiskt olika former i olika sammanhang (till exempel genusmarkerade ord). Definiera varianterna `key_male` och `key_female` i översättningsfilen.

// JSON: { "hero_male": "Hero", "hero_female": "Heroine" }
t('hero', { context: 'female' }); // Heroine

Snabbkontroll

Hur skickar ni in ett dynamiskt värde med namnet 'username' i en översättningssträng med i18next?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Använd {{variable}} för interpolering, key_other/key_one för pluralformer och key_zero för nollformer. i18next tillämpar automatiskt Unicode CLDR:s pluralregler för varje språk. Använd context för grammatiska varianter.

Nästa steg

Nästa lektion: **Språkväxlare och lazy loading av översättningar** — ni kommer att bygga en lokalväxlare och läsa in översättningspaket vid behov.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Pluralisering och interpolation” gratis?

Ja – hela texten till ”Pluralisering och interpolation” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Pluralisering och interpolation”?

Hantera pluralformer baserade på antal och infoga dynamiska värden i översatta strängar. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Pluralisering och interpolation”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Konfigurera react-i18next
Använda useTranslation-hooken
Pluralisering och interpolation
Språkväljare och lazy loading av översättningar

← Tillbaka till React Academy