Formatar um número em JavaScript

Existem várias maneiras pelas quais pessoas de diferentes países e regiões seguem diferentes maneiras de formatar um número. E pode haver casos em que desejamos formatar um número em nossos sites com base na parte do mundo em que o visitante acessa nosso site.

Pode ser um desafio tentar fazer isso manualmente com base na localização do usuário. Mas não se preocupe, você não precisa fazer isso manualmente, pois existe uma maneira melhor de formatar um número em JavaScript, e isso é com a ajuda do método toLocalString(). Este método retorna uma string com a representação específica do idioma do número.

Formatar números com o método toLocaleString() em JavaScript

Leva dois parâmetros primeiro é locales, e o segundo é options. Ambos os parâmetros são opcionais, o que significa que não são obrigatórios. Você pode executar o método diretamente sem passar esses parâmetros também. Se você deseja formatar os números, neste caso, o fazemos, então precisamos passar esses parâmetros.

Vamos primeiro entender o que cada um desses parâmetros significa e, mais tarde, veremos como usá-los em nosso código.

1. O parâmetro locales

O locales é o primeiro parâmetro que o método toLocalString() aceita. Ele representa uma string de tags de idioma BCP 47 ou um array de tais strings. A tag de idioma BCP 47 é um código para identificar idiomas humanos.

Por exemplo, a tag ar-SA indica que se refere à língua árabe representada por ar, falada na região da Arábia Saudita SA. Portanto, se você passar esta string como primeiro argumento, ela formatará o número para que seja escrito na língua árabe.

let eArabic = (number => {
  return number.toLocaleString('ar-SA');
});

console.log(eArabic(12345));

Resultado:

١٢٬٣٤٥

Aqui, criamos uma função de seta chamada eArabic, que recebe um número como parâmetro. Agora, estamos passando o número 12345 para esta função de seta. Esta função tem como objetivo converter o número 12345 em seu formato equivalente árabe ar-SA com a ajuda do método toLocalString().

Você pode copiar e colar diretamente todo o código acima e executá-lo na janela do console do seu navegador para ver o resultado.

Para saber mais sobre todas as tags de idiomas BCP 47, você pode dar uma olhada neste recurso.

Você também pode passar undefined como localidades. Ele terá o idioma padrão definido no navegador do visitante. Portanto, se alguém alterou o idioma do navegador para alemão, o número será exibido no formato alemão.

2. O parâmetro opções

O options é um objeto, e é o segundo parâmetro que o método toLocalString() aceita. Por ser um objeto, este parâmetro pode ter várias propriedades como currency,currencySign,style,unitDisplay e muito mais.

Vamos pegar o mesmo exemplo que vimos acima e tentar modificá-lo para entender o parâmetro options. Anteriormente, apenas pegávamos o número 12345 e o formatávamos para o idioma árabe. Agora vamos também dar ao número uma formatação de moeda dando a ele um estilo de moeda com o símbolo da moeda e adicionar alguns dígitos fracionários no final desse número com a ajuda de opções.

let eArabic = (number => {
  return number.toLocaleString(
      'ar-SA', {style: 'currency', currency: 'SAR', minimumFractionDigits: 3});
});

console.log(eArabic(12345));

Resultado:

١٢٬٣٤٥٫٠٠٠ ر.س

Neste caso, ao método toLocaleString(), agora também adicionamos o parâmetro options, que é um objeto. Atualmente, leva 3 propriedades, a propriedade style formatará o número no formato de moeda, a propriedade currency dirá qual moeda ele representa, neste caso, Riyal saudita SAR e a propriedade minimumFractionDigits representa quantos dígitos fracionários que você deseja mostrar no final do número.

Aqui, se você está definindo a propriedade style com o valor currency, também deve definir a propriedade currency com algum valor. Caso contrário, você obterá um erro de tipo: Currency code is required with currency style.

Na saída do programa acima, primeiro temos o nome da moeda Saudi Riyal ر.س.. Se fosse USD, seria o símbolo $. Então temos o próprio número na língua árabe ١٢٬٣٤٥. Se fosse em dólares, seria 12,345. Por fim, temos os 3 dígitos fracionários após o ponto que é representado na língua árabe como ٫٠٠٠ e em USD como 0,000.

// USD format
$12, 345.000

Aqui, também fornecemos a saída para o formato da moeda dos Estados Unidos para relacioná-la facilmente com a saída do formato da moeda da Arábia Saudita, uma vez que pode ser difícil para as pessoas entenderem a língua árabe.

Você pode usar qualquer um desses parâmetros e propriedades de objeto em seu código, dependendo de como deseja formatar seu número. Você também pode visitar os vários links fornecidos neste artigo para saber mais sobre toLocalString() para formatar um número em JavaScript.