M

MLOG

Português

Desbloqueie o alcance global com a API Intl do JavaScript. Aprenda as melhores práticas de internacionalização para formatar datas, números, moedas e muito mais.

API Intl do JavaScript: Práticas Recomendadas de Internacionalização para um Público Global

No mundo interconectado de hoje, criar aplicações web que atendam a um público global é crucial. A API Intl do JavaScript fornece ferramentas poderosas para internacionalização (i18n), permitindo que você formate datas, números, moedas e muito mais de acordo com as convenções de diferentes localidades. Este artigo explora as melhores práticas para aproveitar a API Intl para construir aplicações verdadeiramente globais.

Entendendo a Internacionalização (i18n) e a Localização (l10n)

Antes de mergulhar nos detalhes da API Intl, é importante entender a distinção entre internacionalização (i18n) e localização (l10n). I18n é o processo de projetar e desenvolver aplicações de forma que possam ser facilmente adaptadas para diferentes idiomas e regiões sem exigir alterações de engenharia. L10n, por outro lado, é o processo de adaptar uma aplicação internacionalizada para uma localidade específica, traduzindo o texto e personalizando outros elementos específicos da localidade.

A API Intl se concentra no aspecto i18n, fornecendo os mecanismos para lidar com dados confidenciais à localidade, enquanto a localização normalmente envolve o fornecimento de traduções e configurações específicas da localidade.

Componentes-chave da API Intl

A API Intl consiste em vários objetos-chave, cada um responsável por lidar com aspectos específicos da internacionalização:

Melhores Práticas para Usar a API Intl

Para utilizar efetivamente a API Intl e garantir uma experiência de usuário positiva para seu público global, considere as seguintes práticas recomendadas:

1. Especifique a Localidade Correta

A base da internacionalização é especificar a localidade correta. A localidade identifica o idioma, a região e quaisquer variantes específicas a serem usadas para formatação. Você pode obter a localidade preferida do usuário na propriedade navigator.language ou no cabeçalho HTTP Accept-Language.

Ao criar objetos Intl, você pode especificar a localidade como uma string ou um array de strings. Se você fornecer um array, a API tentará encontrar a localidade que melhor corresponda às opções disponíveis.

Exemplo:

const locale = navigator.language || 'en-US';
const numberFormat = new Intl.NumberFormat(locale);

Se a localidade preferida do usuário não estiver disponível, você pode fornecer uma localidade de fallback. Por exemplo, você pode usar 'en-US' como padrão se o navegador do usuário relatar uma localidade não suportada.

2. Aproveite o Intl.DateTimeFormat para Formatação de Data e Hora

Formatar datas e horas corretamente é crucial para fornecer uma experiência localizada. O objeto Intl.DateTimeFormat permite formatar datas e horas de acordo com as convenções de uma localidade específica.

Você pode personalizar a formatação especificando várias opções, como o formato de ano, mês, dia, hora, minuto e segundo. Você também pode especificar o fuso horário para garantir que datas e horas sejam exibidas corretamente para usuários em diferentes partes do mundo.

Exemplo:

const locale = 'de-DE'; // Alemão (Alemanha)
const date = new Date();
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZone: 'Europe/Berlin'
};

const dateTimeFormat = new Intl.DateTimeFormat(locale, options);
const formattedDate = dateTimeFormat.format(date); // Output: z.B. "22. Mai 2024, 14:30"
console.log(formattedDate);

Este exemplo formata a data e hora atuais de acordo com a localidade alemã (Alemanha), incluindo o ano, mês, dia, hora e minuto. Também especifica o fuso horário 'Europe/Berlin'.

Lembre-se de considerar diferentes formatos de data e hora usados em todo o mundo. Por exemplo, os EUA usam MM/DD/AAAA, enquanto muitos outros países usam DD/MM/AAAA.

3. Use Intl.NumberFormat para Formatação de Número, Moeda e Porcentagem

O objeto Intl.NumberFormat fornece uma maneira flexível de formatar números, moedas e porcentagens de acordo com as convenções específicas da localidade. Você pode personalizar a formatação especificando opções como moeda, estilo (decimal, moeda ou porcentagem), dígitos de fração mínimos e máximos e muito mais.

Exemplo (Formatação de Moeda):

const locale = 'ja-JP'; // Japonês (Japão)
const amount = 12345.67;
const options = {
  style: 'currency',
  currency: 'JPY'
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedAmount = numberFormat.format(amount); // Output: z.B. "\u00A512,346"
console.log(formattedAmount);

Este exemplo formata o número 12345.67 como iene japonês (JPY). Observe como o símbolo da moeda (\u00A5) e o separador de agrupamento (,) são ajustados automaticamente de acordo com a localidade japonesa.

Exemplo (Formatação de Porcentagem):

const locale = 'ar-EG'; // Árabe (Egito)
const percentage = 0.75;
const options = {
  style: 'percent',
  minimumFractionDigits: 2
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedPercentage = numberFormat.format(percentage); // Output: z.B. "\u0667\u0665\u066B\u0660\u0660\u066A"
console.log(formattedPercentage);

Este exemplo formata o número 0.75 como uma porcentagem em árabe (Egito). A saída inclui o sinal de porcentagem árabe (\u066A) e duas casas decimais.

Considerações Importantes para Formatação de Moeda:

4. Lide com a Pluralização Corretamente com Intl.PluralRules

As regras de pluralização variam significativamente entre os idiomas. Por exemplo, o inglês tem regras simples com formas singulares e plurais, enquanto outros idiomas têm regras mais complexas com base no valor do número. O objeto Intl.PluralRules ajuda você a determinar a forma plural correta para um determinado número e localidade.

Exemplo:

const locale = 'ru-RU'; // Russo (Rússia)
const pluralRules = new Intl.PluralRules(locale);

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // tovar (singular)
    case 'few': return 'товара'; // tovara (few)
    case 'many': return 'товаров'; // tovarov (many)
    default: return 'товаров'; // Default to many
  }
}

const count = 5;
const pluralForm = getPluralForm(count);
console.log(`${count} ${pluralForm}`); // Output: "5 товаров"

Este exemplo demonstra como usar Intl.PluralRules para obter a forma plural correta para a palavra "товар" (item) em russo. O russo tem diferentes formas plurais dependendo se o número termina em 1, 2-4 ou 5-9.

5. Formate Listas com Intl.ListFormat

Ao apresentar listas de itens, a formatação pode variar entre as localidades. O objeto Intl.ListFormat permite formatar listas de acordo com as convenções específicas da localidade, incluindo o uso de diferentes conjunções (por exemplo, "e", "ou") e separadores de lista (por exemplo, vírgulas, ponto e vírgulas).

Exemplo:

const locale = 'es-ES'; // Espanhol (Espanha)
const list = ['manzanas', 'naranjas', 'plátanos'];
const listFormat = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' });

const formattedList = listFormat.format(list); // Output: "manzanas, naranjas y plátanos"
console.log(formattedList);

Este exemplo formata uma lista de frutas em espanhol (Espanha), usando a conjunção "y" (e) para conectar os dois últimos itens.

6. Formate Horários Relativos com Intl.RelativeTimeFormat

Exibir horários relativos (por exemplo, "ontem", "em 2 horas") fornece uma maneira amigável de apresentar informações de horário. O objeto Intl.RelativeTimeFormat permite formatar horários relativos de acordo com as convenções específicas da localidade.

Exemplo:

const locale = 'fr-CA'; // Francês (Canadá)
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });

console.log(rtf.format(-1, 'day')); // Output: "hier"
console.log(rtf.format(2, 'day')); // Output: "dans 2 jours"

Este exemplo formata horários relativos em francês (Canadá). A saída mostra "hier" (ontem) e "dans 2 jours" (em 2 dias).

A opção `numeric` controla como os números são exibidos. `'auto'` exibe palavras relativas quando disponíveis (como "ontem") e números caso contrário. `'always'` sempre exibe números.

7. Intercale Strings com Intl.Collator

A comparação de strings é sensível à localidade. A maneira como as strings são classificadas varia dependendo do idioma. Por exemplo, em alemão, o caractere "ä" é normalmente classificado como "a", enquanto em sueco, é classificado após "z". O objeto Intl.Collator permite comparar strings de acordo com as regras de uma localidade específica.

Exemplo:

const locale = 'de-DE';
const collator = new Intl.Collator(locale);

const strings = ['äpfel', 'birnen', 'bananen', 'aprikosen'];
strings.sort(collator.compare);

console.log(strings); // Output: ["äpfel", "aprikosen", "bananen", "birnen"]

Este exemplo classifica um array de palavras alemãs usando o Intl.Collator. Observe que "äpfel" é classificado antes de "aprikosen", mesmo que "ä" venha depois no alfabeto.

8. Lide com Casos Limite e Dados Ausentes

Nem todas as localidades são suportadas por todos os navegadores ou ambientes. É essencial lidar com casos limite em que uma localidade não está disponível ou quando faltam dados. Considere as seguintes estratégias:

9. Teste Exaustivamente com Diferentes Localidades

Testes completos são cruciais para garantir que sua aplicação internacionalizada funcione corretamente para todas as localidades suportadas. Teste sua aplicação com uma variedade de localidades, incluindo idiomas que usam diferentes conjuntos de caracteres, formatos de data e hora, formatos de número e regras de pluralização.

Considere usar ferramentas de teste automatizadas para verificar se sua aplicação se comporta como esperado em diferentes localidades.

10. Considere Implicações de Desempenho

Embora a API Intl seja geralmente eficiente, criar objetos Intl pode ser relativamente caro. Para otimizar o desempenho, considere o seguinte:

Além da API Intl: Outras Considerações para Internacionalização

Embora a API Intl forneça ferramentas poderosas para formatar dados, a internacionalização envolve mais do que apenas formatação. Considere os seguintes aspectos adicionais:

Conclusão

A API Intl do JavaScript é uma ferramenta inestimável para construir aplicações web que atendam a um público global. Ao seguir as práticas recomendadas descritas neste artigo, você pode criar aplicações que não são apenas funcionais, mas também culturalmente sensíveis e fáceis de usar para usuários em todo o mundo. Abrace o poder da API Intl e desbloqueie o potencial da sua aplicação no cenário global. Dominar a API Intl resultará em uma experiência mais inclusiva e acessível para todos os seus usuários, independentemente de sua localização ou idioma.