|Labs
Marcar uma demonstraçãoPlataforma
React (Lingo Compiler)
Alpha
React (MCP)React (i18n)
CLI antiga (v0)
Descontinuado

Visão geral

  • @lingo.dev/react

Introdução

  • Introdução rápida

Referência

  • LingoProvider
  • useLingo
  • Plurais e select
  • Formatação

Plurais e select

As formas de plural e select são os casos em que uma única string de origem não chega — a tradução depende de um número ou de uma categoria. @lingo.dev/react disponibiliza dois auxiliares simples de usar (l.plural e l.select) que compilam para ICU MessageFormat nos bastidores, para que os tradutores vejam a sintaxe padrão e o runtime continue igual.

Plurais#

l.plural(count, forms, { context }) escolhe a forma certa com base em count e nas regras de plural CLDR do idioma.

tsx
const l = useLingo();

l.plural(items.length, {
  one: "1 item",
  other: "{count} items",
}, { context: "Cart summary" });
// → "1 item" (en, count=1) / "5 items" (en, count=5)
// → "1 Eintrag" / "5 Einträge" (de, after translation)

Formas por idioma#

O mapa de formas aceita todas as categorias de plural do CLDR — zero, one, two, few, many, other. Cada idioma usa o que precisa:

  • O inglês usa one + other (1 vs tudo o resto)
  • O russo usa one + few + many + other (1; 2-4; 5-20; 21, 31, ...)
  • O árabe usa as seis
  • O japonês usa apenas other (sem distinção de plural)

Só precisa de fornecer as formas que o idioma de origem usa — os tradutores acrescentam as restantes para cada idioma de destino.

{count} é interpolado automaticamente em qualquer forma plural. Não o passa via values — vem do primeiro argumento.

Combinar com outros placeholders#

Para frases com uma contagem e outras variáveis, escreva essas variáveis nas strings das formas; serão passadas ao ICU.

tsx
l.plural(notifications.length, {
  one: "1 message from {sender}",
  other: "{count} messages from {sender}",
}, { context: "Inbox header" });

Depois, passe os valores na chamada — mas atenção: a assinatura de l.plural só inclui { context }. Para casos mistos, use l.text diretamente com a sintaxe plural do ICU:

tsx
l.text(`{count, plural, one {1 message from {sender}} other {# messages from {sender}}}`, {
  values: { count: notifications.length, sender: user.name },
  context: "Inbox header",
});

O token # é substituído pelo valor da contagem tal como está — útil quando o quer sem a forma de interpolação com chavetas.

Select#

l.select(value, forms, { context }) escolhe uma forma com base numa chave de texto (género, função, tipo de conteúdo — qualquer categoria).

tsx
l.select(user.gender, {
  male: "He uploaded a photo",
  female: "She uploaded a photo",
  other: "They uploaded a photo",
}, { context: "Activity feed" });

other é obrigatório como fallback. A correspondência é exata — não há correspondência aproximada nem distinção insensível entre maiúsculas e minúsculas.

Selectordinal#

Para números ordinais (1.º, 2.º, 3.º), use o ICU selectordinal diretamente através de l.text:

tsx
l.text(`You finished in {place, selectordinal, one {#st} two {#nd} few {#rd} other {#th}} place`, {
  values: { place: rank },
  context: "Leaderboard",
});
// → "You finished in 1st place" / "2nd" / "3rd" / "4th, 5th, ..."

No que isto compila#

Tanto l.plural como l.select constroem uma string ICU MessageFormat e passam-na a l.text. A forma compilada é a que é extraída por lingo extract e guardada nos seus ficheiros de idioma — os tradutores editam diretamente a sintaxe ICU, não o literal de objeto em JS.

Exemplo: l.plural(n, { one: "1 item", other: "{count} items" }, { context: "Cart" }) é extraído como:

text
{count, plural, one {1 item} other {{count} items}}

Isto significa que os tradutores podem adaptar as categorias a cada idioma, incluindo categorias que a origem não tem. O russo passa a {count, plural, one {...} few {...} many {...} other {...}} sem qualquer alteração ao código.

Quando não usar isto#

  • Um booleano simples de "1 ou muitos". Duas chamadas a l.text dentro de um if são perfeitamente válidas e mais fáceis de detetar pelos tradutores.
  • Um enum programático que não é visível para o utilizador. Plural / select destinam-se à tradução de mensagens categóricas, não a encaminhar a lógica da aplicação.

Onde ir a seguir#

  • useLingo — semântica base de l.text e l.rich.
  • Formatting — formatação de números, moeda, datas e listas com Intl nativo.

Esta página foi útil?

Max PrilutskiyMax Prilutskiy·Atualizado há aproximadamente 1 mês·3 min de leitura