Guia Completo sobre a API Intl no JavaScript

A internacionalização (i18n) é uma parte essencial do desenvolvimento de aplicações web modernas. Ao criar interfaces globais, você precisa garantir que números, datas, moedas e textos sejam formatados corretamente para diferentes localizações e idiomas. Felizmente, o JavaScript oferece a poderosa API Intl (Internationalization API) para facilitar essa tarefa.

Este post vai explorar os principais recursos da API Intl, explicando como ela pode ser utilizada para formatar números, datas, pluralizar frases e muito mais. Seja você um desenvolvedor júnior ou sênior, este guia será útil para aplicar as melhores práticas de internacionalização.

---

Sumário

1. O que é a API Intl no JavaScript?
2. Formatação de Números com Intl.NumberFormat
   • 2.1 Formatação Simples de Números
   • 2.2 Formatação de Moedas
   • 2.3 Formatação de Percentuais
3. Manipulação de Datas com Intl.DateTimeFormat
   • 3.1 Formatação Simples de Datas
   • 3.2 Formatação Completa de Data e Hora
4. Comparação de Strings com Intl.Collator
   • 4.1 Ordenação Sensível a Maiúsculas e Acentos
5. Pluralização com Intl.PluralRules
   • 5.1 Uso Simples para Singular e Plural
6. Formatação de Tempo Relativo com Intl.RelativeTimeFormat
   • 6.1 Diferenças de Tempo Relativo
7. Conclusão

---

O que é a API Intl no JavaScript?

A API Intl (Internationalization API) é uma ferramenta poderosa no JavaScript para lidar com a formatação de números, datas, textos e mensagens em diferentes localizações e idiomas. Vamos explorar alguns dos principais recursos dessa API e como ela pode ser aplicada no dia a dia.

Exemplo simples:

const number = 1234567.89;
console.log(new Intl.NumberFormat('en-US').format(number)); // Saída: 1,234,567.89

Neste exemplo, Intl.NumberFormat é usado para formatar um número de acordo com o padrão dos EUA, separando as casas decimais e os milhares conforme as convenções locais.

---

Formatação de Números com Intl.NumberFormat

2.1 Formatação Simples de Números

Você pode usar Intl.NumberFormat para formatar números inteiros e decimais de acordo com as convenções regionais.

const number = 1234567.89;
console.log(new Intl.NumberFormat('pt-BR').format(number)); // Saída: 1.234.567,89

2.2 Formatação de Moedas

Utilize Intl.NumberFormat para formatar valores monetários de acordo com diferentes moedas.

const currencyFormat = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
console.log(currencyFormat.format(1234567.89)); // Saída: $1,234,567.89

2.3 Formatação de Percentuais

Você também pode formatar percentuais de forma prática.

const percentFormat = new Intl.NumberFormat('en-US', { style: 'percent' });
console.log(percentFormat.format(0.4567)); // Saída: 45.67%

---

Manipulação de Datas com Intl.DateTimeFormat

3.1 Formatação Simples de Datas

const date = new Date();
console.log(new Intl.DateTimeFormat('en-US').format(date)); // Saída: 10/23/2024

3.2 Formatação Completa de Data e Hora

Você pode personalizar a formatação de datas, incluindo o fuso horário e os detalhes de hora.

const formattedDateTime = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZone: 'America/New_York',
}).format(new Date());
console.log(formattedDateTime); // Saída: October 23, 2024 at 12:00 PM

---

Comparação de Strings com Intl.Collator

4.1 Ordenação Sensível a Maiúsculas e Acentos

Use o Intl.Collator para ordenar strings de acordo com as regras de um idioma específico, levando em consideração acentos e maiúsculas/minúsculas.

const collator = new Intl.Collator('pt-BR', { sensitivity: 'base' });
const fruits = ['maçã', 'Banana', 'laranja', 'abacaxi'];
const sortedFruits = fruits.sort(collator.compare);
console.log(sortedFruits); // ['abacaxi', 'Banana', 'laranja', 'maçã']

---

Pluralização com Intl.PluralRules

5.1 Uso Simples para Singular e Plural

Utilize Intl.PluralRules para adaptar frases de acordo com o número de itens.

const pr = new Intl.PluralRules('en-US');
const count = 3;
const messages = { one: 'You have one message.', other: 'You have multiple messages.' };
console.log(messages[pr.select(count)]); // Saída: You have multiple messages.

---

Formatação de Tempo Relativo com Intl.RelativeTimeFormat

6.1 Diferenças de Tempo Relativo

Formate diferenças de tempo em relação ao presente, como "há 2 dias" ou "em 5 minutos".

const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
console.log(rtf.format(-2, 'day')); // Saída: 2 days ago
console.log(rtf.format(5, 'minute')); // Saída: in 5 minutes

---

Conclusão

A API Intl no JavaScript oferece diversas ferramentas úteis para lidar com internacionalização de forma eficiente. Seja para formatar números, datas, strings ou até mensagens dinâmicas, Intl facilita o desenvolvimento de interfaces globais sem a necessidade de reinventar a roda.