Formatando números em JavaScript com Intl.NumberFormat3 min de leitura

Fala aeee! Hoje, vamos ver como formatar número em JavaScript usando o objeto NumberFormat (que faz parte da API de internacionalização do ECMAScript). Com este objeto você será capaz de formatar um número para vários formatos de países utilizando o método format. Portanto, nos casos em que você precisa, por exemplo, fazer a formatação para o formato pt-BR (moeda BRL) esse método será capaz de te ajudar para atingir este objetivo.

A sintaxe

O método format pode ser chamada da seguinte forma:

new Intl.NumberFormat([locales[, options]]).format(number)

Veja que os dois parâmetros são opcionais, sendo que se você informar o segundo, o primeiro precisa ser informado. Vamos ver o que cada parâmetro representa:

• locales: representa uma tag que irá indicar o local de formatação do número. Esse parâmetro segue o padrão da linguagem BCP 47, mas você pode ver uma lista com as tags mais comuns clicando aqui.
• options: é um objeto JavaScript com a configuração que irá informar o estilo/formatação final do seu número. Nos exemplos, vamos ver algumas das configurações mais úteis e comuns.

O uso mais básico

const formatNumber = new Intl.NumberFormat()

let number = 9123456.79;
console.log(formatNumber.format(number));
// → 9.123.456,79

Este é modo mais básico para se usar método format da instância NumberFormat(). Veja que não é passado nunhum parâmetro para a criação da instância do objeto NumberFormat() e com isso, ele irá pegar o formato padrão do sistema em que está sendo executado o script. No exemplo acima, como estou executando em um navegador que está em pt-BR, o formato de exibição considerou que o caractere ponto (.) representa o separador de casa decimal.

Usando o parâmetro locales

Imaginando que você queira indicar a tag de localização da formatação, para forçar a formatação do número para um determinando país. Veja como fica no exemplo a seguir:

const formatNumber = new Intl.NumberFormat('en-GB')

let number = 9123456.79;
console.log(formatNumber.format(number));
// → 9,123,456.79

No exemplo acima, estou usando o padrão da linguagem BCP 47 para forçar a formatação do número para o padrão de inglês do Reino Unido. Lembrando que, você pode ver uma lista com as tags mais comuns clicando aqui.

Usando o parâmetro options

Por último, o exemplo de uso mais completo é usando o parâmetro options que irá lhe conferir maior controle sobre sua formatação. Veja no exemplo explicado abaixo:

const options = { style: 'currency', currency: 'BRL', minimumFractionDigits: 2, maximumFractionDigits: 3 }
const formatNumber = new Intl.NumberFormat('pt-BR', options)

let number = 9123456.7115544;
console.log(formatNumber.format(number));
// → R$ 9.123.456,712

Este exemplo, lhe confere maior controle, pois você pode especificar várias opções de formatação para o valor numérico. Veja que eu especifiquei quatro parâmetros que cumprem a seguinte função:

• style: estilo do formato a ser utilizado. Você pode especificar se quer um formato apenas com números "decimal", "currency" para que o símbolo monetário apareça (igual ao exemplo acima) e "percent" para formato percentual; o padrão é "decimal".

• currency: A moeda para usar na formatação monetária. Você pode conferir a lista de código das moedas clicando aqui.

• minimumFractionDigits: quantidade mínima de casas decimais.

• maximumFractionDigits: quantidade máxima de casas decimais.

Você pode consultar todos os parâmetros permitidos clicando aqui.