Plurais e seleção (ICU)
Trate plurais e textos com gênero.
Plurais e seleção (ICU) é uma aula grátis de Angular 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 Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
Por que marcadores de posição simples não são suficientes
"You have 1 messages" é um inglês incorreto. Os idiomas têm regras de plural diferentes, alguns com várias formas de plural, além de formulações baseadas em gênero ou categoria. O Angular lida com isso usando o formato de mensagem ICU: expressões plural e select.
A expressão plural
Um plural ICU escolhe a formulação com base em um número. Você lista os casos por categoria de plural e fornece o texto de cada um.
<p i18n>{count, plural,
=0 {No messages}
=1 {One message}
other {{{count}} messages}
}</p>Categorias de plural
As categorias incluem correspondências exatas (=0, =1) e palavras-chave CLDR: zero, one, two, few, many e a obrigatória other. Localidades diferentes usam subconjuntos diferentes automaticamente.
O marcador de posição hash
Dentro de um caso plural, # é uma abreviação para o número correspondente, portanto você não precisa repetir a vinculação.
<p i18n>{count, plural,
=1 {You have one item}
other {You have # items}
}</p>A expressão select
select escolhe o texto com base em um valor de cadeia, sendo ideal para categorias como gênero, status ou tipo.
<p i18n>{gender, select,
male {He replied}
female {She replied}
other {They replied}
}</p>other é obrigatório
Tanto plural quanto select exigem uma ramificação other. Ela é o fallback usado quando nenhum caso específico corresponde, e o Angular gerará um erro se ela estiver ausente.
Combinando com o texto ao redor
As expressões ICU podem aparecer dentro de um texto traduzido normal. Mantenha a frase completa em um único bloco i18n para que os tradutores controlem a ordem das palavras.
<p i18n>Hi {{ name }}, {count, plural,
=0 {you have no notifications}
other {you have # notifications}
}.</p>Aninhando select dentro de plural
As expressões ICU podem ser aninhadas, permitindo expressar quantidade e categoria juntas quando a gramática exigir.
{count, plural,
=0 {No guests}
other {# {type, select, vip {VIP} other {regular}} guests}
}Os tradutores ajustam as categorias
Durante a tradução, uma localidade pode adicionar as formas de plural exigidas por sua gramática, por exemplo, o russo usa one, few e many. O destino XLIFF de uma unidade ICU contém as ramificações localizadas.
ICU em TypeScript com $localize
A sintaxe ICU também funciona dentro de cadeias marcadas com $localize, portanto a lógica de plural no código dos componentes também permanece traduzível.
const label = $localize('{count, plural, =1 {1 file} other {{{count}} files}}');Por que ICU é melhor que if/else manual
Codificar count === 1 ? 'message' : 'messages' presume plurais binários no estilo do inglês. A ICU delega a regra aos dados CLDR de cada localidade, permitindo que idiomas com três ou seis formas de plural sejam exibidos corretamente sem alterações no código.
Verificação rápida
Qual ramificação ICU é sempre obrigatória?
Recapitulação
O plural ICU escolhe o texto pelo número usando categorias (=0, one, other) e # para a contagem, enquanto select escolhe pelo valor da cadeia. Ambos precisam de uma ramificação other, podem ser aninhados livremente, funcionam em $localize e permitem que cada localidade aplique suas próprias regras de plural.
Perguntas Frequentes
A aula “Plurais e seleção (ICU)” é grátis?
Sim — o texto completo de “Plurais e seleção (ICU)” é 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 Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Plurais e seleção (ICU)”?
Trate plurais e textos com gênero. Você pratica Angular 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 Angular Academy?
Nenhuma experiência prévia é necessária. Angular 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 “Plurais e seleção (ICU)”?
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 Angular Academy?
Sim. Cada aula de Angular 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
- Marcando texto para tradução
- Extraindo e traduzindo mensagens
- Plurais e seleção (ICU)
- Criando pacotes localizados