Alcance um público mais amplo adaptando seu conteúdo a qualquer idioma ou localidade com a API Internacional.
A API Internacional simplifica a formatação e manipulação de texto, números, datas e moedas internacionalizados. Ele permite lidar com vários formatos de dados de acordo com a localidade.
Essa API resolve o desafio de formatar dados para diferentes culturas e idiomas. Ele facilita a formatação de números com o símbolo de moeda apropriado ou datas usando o formato de data apropriado para uma região específica.
Usando a API Intl, você pode criar aplicativos da Web acessíveis e fáceis de usar para o público em todas as regiões e culturas.
Obtendo a localidade de um usuário
O Construtores JavaScript fornecidas pela API Internacional identificam a localidade que usarão para formatar a data, texto, número, etc., seguindo um padrão familiar. Cada construtor recebe um localidade e um opções objeto como argumentos. Usando esses argumentos, o construtor compara os locais solicitados com os locais que eles suportam atualmente.
Para obter a localidade de um usuário, você pode usar o navegador.idioma propriedade. Essa propriedade retorna uma string que representa a versão do idioma do navegador.
O valor do navegador.idioma A propriedade é uma tag de idioma BCP 47, que consiste em um código de idioma e, opcionalmente, um código de região e outras subtags. Por exemplo, "en-US" representa o inglês falado nos Estados Unidos.
Você também pode usar o navigator.languages para obter uma matriz dos idiomas preferidos do usuário, classificados por prioridade. O primeiro item na matriz representa a preferência de idioma principal do usuário.
Depois de obter a localidade do usuário, você pode personalizar a exibição de datas, horas, números e moedas do seu aplicativo usando o Internacional API.
Você pode criar um simples função JavaScript para ajudá-lo a obter a localidade de um usuário. Aqui está um trecho de código que pode ajudar:
const getUserLocale = () => {
se (navigator.idiomas && navigator.idiomas.comprimento) {
retornar navegador.idiomas[0];
}
retornar navegador.idioma;
};
console.log (getUserLocale());
Esse getUserLocale A função retorna o primeiro elemento da propriedade navigator.languages se estiver disponível. Caso contrário, ele retorna à propriedade navigator.language, que representa o idioma preferido do usuário em navegadores mais antigos.
Formatando datas para diferentes localidades
Para formatar datas usando o Internacional API, você pode usar o Internacional DateTimeFormat() construtor. Esse construtor recebe dois argumentos: uma string de localidade e um objeto de opções.
O objeto de opções pode conter propriedades que controlam a formatação da data.
Algumas das opções comumente usadas incluem:
- dia da semana: Esta opção especifica o formato do dia da semana. Você pode configurá-lo para qualquer um longo (Sexta-feira), curto (sexta) ou estreito (F).
- ano: Esta opção especifica o formato do ano. Você pode configurá-lo para qualquer um numérico (2023) ou 2 dígitos (23).
- mês: Esta opção especifica o formato do mês. Você pode configurá-lo para qualquer um numérico (3), 2 dígitos (03), longo (Marchar), curto (março), ou estreito (M).
- dia: Esta opção especifica o formato do dia. Você pode configurá-lo para qualquer um numérico (2) ou 2 dígitos (02).
Aqui está um exemplo que mostra como formatar uma data usando o Internacional DateTimeFormat() construtor:
const data = Data.agora()
const localidade = getUserLocale();const opções = {
dia da semana: "longo",
ano: "numérico",
mês: "longo",
dia: "numérico",
};const formatador = novoInternacional.DateTimeFormat (localidade, opções);
// dia da semana, data do mês, ano (sexta-feira, 24 de março de 2023)
console.log (formatter.format (data));
Este código configura um objeto formatador passando a localidade do usuário para Internacional DateTimeFormat(), juntamente com um conjunto de opções. Em seguida, ele usa o formatador para transformar a data atual em uma string. O opções O objeto contém propriedades que controlam a formatação da data.
Formatando Diferentes Tipos de Números
Você pode usar o Internacional API para formatar números usando o Internacional Formato numérico() construtor. Como Internacional DateTimeFormat(), esse construtor usa uma string de localidade e um objeto de opções como argumentos.
O objeto de opções contém propriedades que controlam a formatação do número. Essas propriedades variam de acordo com o especificado estilo do número.
Formatação de decimais e porcentagens
Você pode formatar números como decimais e porcentagens usando Internacional Formato numérico() construtor definindo a propriedade style como decimal para decimais e por cento para porcentagens.
Aqui está um exemplo que mostra como formatar um decimal:
const num = 123456;
const localidade = getUserLocale(); // en-USconst opções = {
estilo: "decimal",
mínimoFractionDigits: 2,
maximumFractionDigits: 2,
usarAgrupamento: verdadeiro,
};const formatador = novoInternacional.NumberFormat (localidade, opções);
console.log (formatter.format (num)); // 123,456.00
O bloco de código acima formata 123.456 como um decimal com separadores de agrupamento (,) e duas casas decimais.
Aqui está um exemplo que mostra como formatar uma porcentagem:
const num = 123456;
const localidade = getUserLocale();const opções = {
estilo: "por cento",
usarAgrupamento: verdadeiro,
};const formatador = novoInternacional.NumberFormat (localidade, opções);
console.log (formatter.format (num)); // 12,345,600%
O bloco de código acima expressa 123.456 como uma porcentagem com separadores de agrupamento.
Moedas de formatação
Você pode formatar números como moedas definindo a propriedade de estilo como moeda. Você deve definir outras opções ao lado dele, como:
- moeda: uma string que representa o código de moeda ISO 4217 (como "USD", "EUR" ou "JPY") a ser usado para formatação. Se você não fornecer essa opção, o formatador escolherá um código de moeda com base na localidade do usuário.
- moedaDisplay: esta propriedade especifica como o navegador deve exibir a moeda. pode ser símbolo (US$ 75), código (US$ 75) ou nome (75 dólares americanos).
Aqui está um exemplo mostrando como você pode formatar a moeda:
const num = 123456;
const localidade = getUserLocale(); // en-USconst opções = {
estilo: "moeda",
moeda: "USD",
moedaExibir: "código",
};const formatador = novoInternacional.NumberFormat (localidade, opções);
console.log (formatter.format (num)); // USD 123.456,00
O bloco de código acima formata 123.456 como uma moeda (USD).
Unidades de formatação
Você pode usar o Internacional Formato numérico() construtor para formatar números com unidades, como comprimento, volume e massa. Você pode fazer isso definindo o estilo para unidade. Ao definir o estilo como unidade, você deve especificar estas opções:
- unidade: Esta propriedade especifica a unidade a ser usada para formatação, como "metro", "quilograma", "litro", "segundo" e assim por diante.
- display da unidade: Esta propriedade especifica como o navegador deve exibir a unidade. Você pode configurá-lo para qualquer um longo (10 litros), curto (10 L), ou estreito (10 l).
Aqui está um exemplo mostrando como você pode formatar unidades:
const num = 123456;
const localidade = getUserLocale();const opções = {
estilo: "unidade",
unidade: "litro",
display da unidade: "longo",
};const formatador = novoInternacional.NumberFormat (localidade, opções);
console.log (formatter.format (num)); //123.456 litros
O bloco de código acima formata o número 123.456 como uma unidade em litros.
Alternativas à API Internacional
A API Internacional fornece um conjunto poderoso e flexível de ferramentas para formatar datas, números, moedas e unidades em aplicativos JavaScript. Ele oferece suporte a várias localidades e fornece uma maneira consistente de formatar dados em diferentes culturas e idiomas.
Você pode querer usar uma biblioteca alternativa, como Luxon ou Day.js, devido ao suporte limitado do navegador para Intl. Por fim, decidir entre a API Intl ou uma alternativa depende dos requisitos e restrições específicos do seu projeto.
