0Pricing
React Academy · Aula

Pluralização e interpolação

Lide com formas plurais baseadas em contagem e insira valores dinâmicos em textos traduzidos.

Pluralização e interpolação é uma aula grátis de React Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Boas-vindas

Nesta lição, você lidará com formas plurais baseadas em quantidades e inserirá valores dinâmicos em textos traduzidos usando a interpolação e o suporte a plurais do i18next.

Noções básicas de interpolação

Use chaves duplas em seus textos de tradução como marcadores de posição. Passe um objeto com os valores das variáveis como segundo argumento para t().
// JSON: "greeting": "Hello, {{name}}!"
t('greeting', { name: 'Alice' }); // Hello, Alice!

Várias variáveis de interpolação

Você pode usar quantas variáveis de interpolação forem necessárias em um único texto.
// JSON: "summary": "You have {{count}} messages in {{folder}}"
t('summary', { count: 5, folder: 'Inbox' });
// You have 5 messages in Inbox

Escapando HTML

Por padrão, o i18next escapa os caracteres HTML nos valores interpolados. Para renderizar HTML dentro de um valor interpolado, defina `escapeValue: false` na configuração de inicialização (isso já é seguro no React, pois o React escapa JSX).

Formas plurais

O i18next oferece suporte automático a formas plurais. Defina `key` para o singular e `key_other` (ou `key_plural`) para o plural. Passe `count` no objeto de interpolação.
// JSON:
// "item": "{{count}} item"
// "item_other": "{{count}} items"

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

Regras de plural específicas do idioma

Idiomas diferentes têm regras de plural diferentes. O russo tem quatro formas plurais; o árabe tem seis. O i18next usa automaticamente as regras Unicode CLDR de cada idioma. Defina todas as formas necessárias no arquivo de tradução.
// Russian (ru):
// key_one, key_few, key_many, key_other

Forma zero

O i18next também oferece suporte à forma especial `key_zero` quando count é 0, permitindo uma redação diferente (por exemplo, 'Nenhum item' em vez de '0 itens').
// JSON:
// "messages_zero": "No messages"
// "messages_one": "{{count}} message"
// "messages_other": "{{count}} messages"

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

Chaves aninhadas com plurais

Você pode ter chaves de plural dentro de objetos aninhados. Use a notação com ponto para acessá-las, assim como faz com chaves aninhadas comuns.
// JSON: { "cart": { "items_one": "item", "items_other": "items" } }
t('cart.items', { count: 3 }); // items

Formatação de datas e números

O i18next integra-se à API Intl para formatar datas e números de acordo com a localidade. Use i18n.format() ou o plug-in intlify para formatar datas como parte das traduções.
t('lastSeen', { date: new Date(), formatParams: {
  date: { month: 'long', day: 'numeric' }
}});

Traduções baseadas em contexto

Use a opção `context` para formas gramaticalmente diferentes em contextos distintos (por exemplo, palavras que variam conforme o gênero). Defina as variantes `key_male` e `key_female` no arquivo de tradução.
// JSON: { "hero_male": "Hero", "hero_female": "Heroine" }
t('hero', { context: 'female' }); // Heroine

Verificação rápida

Como você passa um valor dinâmico chamado 'username' para um texto de tradução com o i18next?

Recapitulação

Use {{variable}} para interpolação, key_other/key_one para plurais e key_zero para formas de zero. O i18next aplica automaticamente as regras de plural Unicode CLDR para cada idioma. Use o contexto para variantes gramaticais.

A seguir

Próxima lição: **Seletor de idioma e carregamento sob demanda de traduções** — você criará um seletor de localidade e carregará pacotes de tradução quando necessário.

Perguntas Frequentes

A aula “Pluralização e interpolação” é grátis?

Sim — o texto completo de “Pluralização e interpolação” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Pluralização e interpolação”?

Lide com formas plurais baseadas em contagem e insira valores dinâmicos em textos traduzidos. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Pluralização e interpolação”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Configurando o react-i18next
  2. Usando o hook useTranslation
  3. Pluralização e interpolação
  4. Seletor de idioma e carregamento sob demanda de traduções
← Voltar para React Academy