Contedo

1. Introduo
2. Formato Numrico
3. Formato de Moeda
4. Formato de Unidades
5. Resumo

Introduo

Reduzir as dependncias que voc envia no seu front-end sempre uma coisa boa!
Se voc estiver usando uma biblioteca de formatao de nmero 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 vrios navegadores! Intl.NumberFormat.

Formato Numrico

Formatar nmeros difcil! Adicionando separadores de milhares, casas decimais e assim por diante. Vale lembrar a internacionalizao tambm! Alguns idiomas usam separadores de vrgula, alguns separadores de ponto e isso apenas o comeo!

Entra o Intl.NumberFormat.

A API Intl tem alguns mtodos realmente teis, mas vamos nos concentrar na formatao de nmeros 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 usurio.

O que significa que mudar dependendo da preferncia do usurio, localizando para seus usurios:

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

Isso compatvel com todos os navegadores hoje em dia, incluindo Safari!

Mas podemos ir ainda mais longe...

Formato de Moeda

No apenas podemos formatar nmeros dessa forma, mas tambm podemos oferecer suporte a moedas. Este um suporte relativamente novo entre navegadores, ento depende de quais verses do Safari seus usurios esto usando.

Isso funciona muito bem para formatar nmeros:

const number = 123456.789;console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));// sada esperada: "123.456,79 "

Existe suporte para todas as moedas que eu poderia imaginar.

Lembre-se de que isso no far nenhuma converso de valores de moeda entre elas, apenas o formato de exebio.

Formato de Unidades

Eu no sabia disso at fazer a pesquisa para esse artigo. Mas voc pode at formatar unidades! Isso ainda no compatvel 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 cabea!

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!

No h necessidade de adicionar dependncias adicionais ao seu aplicativo. Aumente a velocidade e o suporte internacional com a API Intl!

Bom cdigo!

Crditos

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