Formatando Dados em Múltiplos Idiomas com JavaScript

Introdução

Vamos explorar a biblioteca Intl do JavaScript, essencial para programar sites em múltiplos idiomas. Aprenderemos a formatar números, datas e listas para diferentes locais e idiomas.

Com Intl, seu projeto será mais acessível e amigável a usuários do mundo inteiro. Este artigo te guiará por suas principais funcionalidades de forma clara e objetiva.

Formatação de Valores Monetários

Veja como usar Intl.NumberFormat para formatar moedas em diferentes idiomas.

// Formatação para o Real Brasileiro (BRL)
const valorBR = 1234.56;
const formatadorBR = new Intl.NumberFormat('pt-BR', {
  style: 'currency',
  currency: 'BRL'
}).format(valorBR);
console.log(formatadorBR); // Saída: R$ 1.234,56

// Formatação para o Dólar Americano (USD)
const valorUS = 1234.56;
const formatadorUS = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(valorUS);
console.log(formatadorUS); // Saída: $1,234.56

A formatação reflete convenções locais: no Brasil, "R$ 1.234,56" (vírgula para centavos), nos EUA, "$1,234.56" (ponto para centavos). Intl.NumberFormat adapta automaticamente a apresentação da moeda ao contexto local do usuário.

Formatação de Datas e Horas

Veja como utilizar Intl.DateTimeFormat para exibir datas e horas de acordo com as preferências locais.

// Formatação de data e hora específica no Brasil
const dataEspecificaBR = new Date('2015-10-21T16:29:00');
const formatadorDataHoraBR = new Intl.DateTimeFormat('pt-BR', {
  year: 'numeric', month: '2-digit', day: '2-digit',
  hour: '2-digit', minute: '2-digit', hour12: false
}).format(dataEspecificaBR);
console.log(formatadorDataHoraBR); // Saída: 21/10/2015 16:29

// Formatação da mesma data e hora nos Estados Unidos
const dataEspecificaUS = new Date('2015-10-21T16:29:00');
const formatadorDataHoraUS = new Intl.DateTimeFormat('en-US', {
  year: 'numeric', month: '2-digit', day: '2-digit',
  hour: '2-digit', minute: '2-digit', hour12: true
}).format(dataEspecificaUS);
console.log(formatadorDataHoraUS); // Saída: 10/21/2015 4:29 PM

Esta abordagem simplificada mostra como formatar datas e horas de acordo com as convenções locais, usando o formato de 24 horas sem am/pm no Brasil e o formato de 12 horas com am/pm nos Estados Unidos. Assim, as informações são apresentadas de maneira clara e familiar aos usuários, conforme suas expectativas locais.

Formatação de Tempo Relativo

Descubra como o Intl.RelativeTimeFormat facilita a exibição de períodos de tempo de forma relativa, adaptando-se ao idioma do usuário.

// Exemplo de formatação de tempo relativo em Português do Brasil
const rtfBR = new Intl.RelativeTimeFormat('pt-BR', { numeric: 'auto' });
console.log(rtfBR.format(-1, 'day')); // Saída: "ontem"
console.log(rtfBR.format(1, 'day'));  // Saída: "amanhã"
console.log(rtfBR.format(-3, 'hour')); // Saída: "há 3 horas"
console.log(rtfBR.format(2, 'month')); // Saída: "em 2 meses"

// Exemplo de formatação de tempo relativo em Inglês Americano
const rtfUS = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });
console.log(rtfUS.format(-1, 'day')); // Saída: "yesterday"
console.log(rtfUS.format(1, 'day'));  // Saída: "tomorrow"
console.log(rtfUS.format(-3, 'hour')); // Saída: "3 hours ago"
console.log(rtfUS.format(2, 'month')); // Saída: "in 2 months"

O Intl.RelativeTimeFormat é uma ferramenta incrível para comunicar períodos de tempo de maneira relativa, adaptando-se perfeitamente ao idioma do usuário. Seja informando sobre eventos que ocorreram no passado ou que ocorrerão no futuro, esta API ajuda a criar interfaces mais dinâmicas e compreensíveis para usuários ao redor do mundo.

Formatação de Listas

Aprenda a utilizar Intl.ListFormat para formatar listas de itens de maneira que se adeque ao idioma do usuário.

// Lista de itens em Português do Brasil
const itensBR = ['maçã', 'banana', 'laranja'];
const formatadorListaBR = new Intl.ListFormat('pt-BR', { style: 'long', type: 'conjunction' }).format(itensBR);
console.log(formatadorListaBR); // Saída: maçã, banana e laranja

// Lista de itens em Inglês Americano
const itensUS = ['apple', 'banana', 'orange'];
const formatadorListaUS = new Intl.ListFormat('en-US', { style: 'long', type: 'conjunction' }).format(itensUS);
console.log(formatadorListaUS); // Saída: apple, banana, and orange

O Intl.ListFormat ajusta a formatação de listas conforme o idioma, observando as regras gramaticais locais. Em português, itens são unidos por "e" sem vírgula antes do último elemento. Em inglês, além do "and", usamos uma vírgula antes do último item da lista, alinhando-se às práticas de pontuação do idioma.

Comparação de Strings

Veja como o Intl.Collator aprimora a comparação de strings, considerando as nuances linguísticas como acentos.

// Lista de palavras em Português, incluindo palavras com a primeira letra acentuada
const palavras = ['último', 'âmbito', 'avião'];

// Ordenação padrão em JavaScript
const ordenacaoPadrao = [...palavras].sort();
console.log(ordenacaoPadrao); // Saída: ['avião', 'último', 'âmbito']

// Ordenação com Intl.Collator em Português do Brasil
const ordenacaoCollatorBR = [...palavras].sort(new Intl.Collator('pt-BR').compare);
console.log(ordenacaoCollatorBR); // Saída: ['âmbito', 'avião', 'último']

A ordenação padrão não considera acentos de forma adequada, levando a uma sequência inesperada de palavras. Já a ordenação realizada com o Intl.Collator respeita os acentos, colocando 'âmbito' antes de 'avião' e 'último', alinhado com as expectativas do idioma português. Isso ilustra a importância de uma comparação sensível ao idioma para uma apresentação correta e culturalmente informada.

Conclusão

As funcionalidades da biblioteca Intl permitem criar aplicações globais com facilidade, adaptando números, datas e mais ao idioma do usuário. Para mais informações, consulte a documentação completa da Intl.