Cada país tem sua moeda e diferentes padrões ou formas de exibir quantias monetárias. Quando expressamos um número adequadamente, é mais fácil de ler e compreender para os leitores. Ao utilizar dados de uma API ou de uma fonte externa, eles estarão em algum formato genérico. Por exemplo, se você estiver criando uma loja, poderá ter dados como preços, e os preços não são armazenados formatados.

Este artigo o guiará sobre como formatar um número como moeda em JavaScript.

Vamos lá!

Usaremos um número aleatório, como 17225, conforme mostrado nos arrays abaixo:

const livros = [
    {
        "id": 01,
        "name": "Desenvolvimento de Software",
        "price": 100.80,
    },
    {
        "id": 02,
        "name": "Introdução à Programação",
        "price": 1534,
    },
    {
        "id": 04,
        "name": "Programar ou ser programado",
        "price": 17225,
    }
]

Adicionar um sinal de moeda não resolve o problema, já que as vírgulas e os decimais devem ser adicionados nos locais corretos. Você também gostaria que cada saída de preço fosse formatada corretamente, dependendo da moeda.

Por exemplo, 17225 seria $17,225.00 (Dólares americanos), 17.225,00 (Rúpias) ou €17.225,00 (Euros), dependendo da moeda escolhida, local e estilo. Você também pode usar a função Intl.NumberFormat() do JavaScript para converter esses inteiros em moedas.

const price = 17225;

let KenyaShilling = new Intl.NumberFormat('en-Ke',
{
    style: 'currency',
    currency: 'KSH',
});

console.log(`A versão formatada de ${price} é ${KenyaShilling.format(price)}`);
// A versão formatada de 17225 é Ksh 17,225.00

Saída:

Ksh 17,225.00

Como formatar números como moeda usando o construtor Intl.NumberFormat()

Você pode criar objetos Intl.NumberFormat que permitem a formatação numérica sensível ao idioma, como a formatação de moeda, usando o construtor Intl.NumberFormat().

Este construtor considera dois fatores importantes: locais e opções, que são ambos opcionais.

new Intl.NumberFormat(locales, options) // também podemos usar Intl.NumberFormat(locales, options)

Lembre-se de que Intl.NumberFormat() pode ser usado com ou sem "new". Ambos criarão uma nova instância de Intl.NumberFormat.

Quando nenhum local ou opção é fornecido ao construtor Intl.NumberFormat(), ele simplesmente formata o inteiro adicionando vírgulas.

const price = 17225; console.log(new Intl.NumberFormat().format(price));

Saída:

17,225

Como observado anteriormente, você não está procurando uma formatação padrão de números. Em vez disso, você deseja estruturar esses números como moeda para que ele retorne o sinal da moeda com a formatação adequada, em vez de ter que escrevê-lo manualmente.

Agora podemos dar uma olhada e explorar ambos os parâmetros.

O Primeiro Argumento: locales

O argumento locale é um parâmetro opcional do tipo string que pode ser fornecido. Ele denota um território geográfico, político ou cultural específico. Ele apenas prepara o número de acordo com a localização e não inclui a formatação da moeda.

const price = 172250;
console.log(new Intl.NumberFormat('en-US').format(price)); // 172,250
console.log(new Intl.NumberFormat('en-IN').format(price)); // 1,72,250
console.log(new Intl.NumberFormat('en-DE').format(price)); // 172.250

Você verá que os números e preços foram formatados regionalmente com base em sua localização. Vamos ver o parâmetro options agora para ver como podemos alterar os números para representar uma moeda.

O Segundo Argumento: options (style, currency...)

Este é o parâmetro principal e você pode usá-lo para aplicar formatação adicional, como formatação de moeda. Este é um objeto JavaScript que possui argumentos adicionais, como:

style: Isso especifica o tipo de formatação que você deseja. Isso inclui valores como decimais, moedas e unidades.

currency: é uma escolha adicional. Você pode usar essa opção para indicar a moeda para formatar, como USD, CAD, GBP, INR, BRL e muitas outras.

// formatar número para dólar americano
let USDollar = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
});

// formatar número para libra britânica
let Pounds = Intl.NumberFormat('en-GB', {
    style: 'currency',
    currency: 'GBP',
});

// formatar número para rupia indiana
let Rupee = new Intl.NumberFormat('en-IN', {
    style: 'currency',
    currency: 'INR',
});

// formatar número para euro
let Euro = Intl.NumberFormat('en-DE', {
    style: 'currency',
    currency: 'EUR',
});

// formatar número para Real
let Real = Intl.NumberFormat('pt-BR', {
    style: 'currency',
    currency: 'BRL',
});

console.log('Dólares: ' + USDollar.format(price));
// Dólares: $ 172,250.00

console.log(`Libras: ${Pounds.format(price)}`);
// Libras: £ 172,250.00

console.log('Rúpias: ' + Rupee.format(price));
// Rúpias: ₹ 1,72,250.00

console.log(`Euros: ${Euro.format(price)}`);
// Euros: € 172,250.00

console.log(`Reais: ${Real.format(price)}`);
// Reais: R$ 172.250,00

O Terceiro Argumento: maximumSignificantDigits

maximumSignificantDigits é outra opção. Isso permite que você arredonde as variáveis de preço com base no número de figuras significativas que você escolher.

Por exemplo, se você alterar o valor para 3, 172250.00 se torna 172.000.

// formatar número para Real
let Real = Intl.NumberFormat('pt-BR', {
    style: 'currency',
    currency: 'BRL',
    maximumSignificantDigits: 3,
});

console.log(`Reais: ${Real.format(price)}`);
// Reais: R$ 172.000

Resumo

Saber lidar com formatação de números pode ser uma tarefa rotineira na vida de um programador, entender quais ferramentas temos a disposição e como utiliza-la facilita muito nossas tarefas, apesar de existirem várias bibliotecas que façam esse trabalho automatizado, trouxemos nesse tutorial como podemos realizar de maneira simples com uma função nativa de javascript, pois entender o core e as possibilidades que a linguagem oferece sem dúvidas te tornaram um programador acima da média entre os demais.

Espero que esse pequeno guia o tenha ajudado de alguma maneira.

Bora codar!