Conteúdo

1. Introdução
2. Formato Numérico
3. Formato de Moeda
4. Formato de Unidades
5. Resumo

Introdução

Reduzir as dependências que você envia no seu front-end é sempre uma coisa boa!
Se você estiver usando uma biblioteca de formatação de número ou moeda, verifique no Bundlephobia e veja quanto tempo e bytes ela adiciona ao seu aplicativo.

Tudo isso pode ser feito com uma nova API para vários navegadores! Intl.NumberFormat.

Formato Numérico

Formatar números é difícil! Adicionando separadores de milhares, casas decimais e assim por diante. Vale lembrar a internacionalização também! Alguns idiomas usam separadores de vírgula, alguns separadores de ponto e isso é apenas o começo!

Entra o Intl.NumberFormat.

A API Intl tem alguns métodos realmente úteis, mas vamos nos concentrar na formatação de números neste blog.

Vamos pular direto com um exemplo:

const numberFormat = new Intl.NumberFormat('ru-RU');
console.log(numberFormat.format(654321.987));
// → "654 321,987"

Aqui, especificamos o local como Russo; no entanto, se você usar o construtor sem passar um local, ele será detectado automaticamente com base no navegador do usuário.

O que significa que mudará dependendo da preferência do usuário, localizando para seus usuários:

const numberFormat = new Intl.NumberFormat();
console.log(numberFormat.format(654321.987));

Isso é compatível com todos os navegadores hoje em dia, incluindo Safari!

Mas podemos ir ainda mais longe...

Formato de Moeda

Não apenas podemos formatar números dessa forma, mas também podemos oferecer suporte a moedas. Este é um suporte relativamente novo entre navegadores, então depende de quais versões do Safari seus usuários estão usando.

Isso funciona muito bem para formatar números:

const number = 123456.789;

console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// saída esperada: "123.456,79 €"

Existe suporte para todas as moedas que eu poderia imaginar.

Lembre-se de que isso não fará nenhuma conversão de valores de moeda entre elas, apenas o formato de exebição.

Formato de Unidades

Eu não sabia disso até fazer a pesquisa para esse artigo. Mas você pode até formatar unidades! Isso ainda não é compatível com o Safari, portanto, verifique novamente a compatibilidade do navegador.

new Intl.NumberFormat('en-US', {
    style: 'unit',
    unit: 'liter',
    unitDisplay: 'long'
}).format(amount);
// → '3,500 liters'

Há uma lista enorme de unidades com suporte, incluindo velocidade e muito mais. Ele até permite que você formate porcentagens, o que sempre achei uma dor de cabeça!

new Intl.NumberFormat("en-US", {
    style: "percent",
    signDisplay: "exceptZero"
}).format(0.55);
// → '+55%'

Resumo

O Intl.NumberFormat é uma ferramenta realmente poderosa no arsenal dos desenvolvedores web!

Não há necessidade de adicionar dependências adicionais ao seu aplicativo. Aumente a velocidade e o suporte internacional com a API Intl!

Bom código!

Créditos

• Never use a number or currency formatting library again!, escrito originalmente por Jordan Finneran.