JavaScript

Como formatar números com zero a esquerda em JavaScript

13 de julho de 2022

Como formatar números com zero a esquerda em JavaScript

Neste artigo você vai aprender a como formatar números com zero a esquerda em JavaScript, utilizando funções simples da linguagem

formatar números com zero a esquerda em JavaScript capa

Fala programador(a), beleza? Bora aprender mais sobre números em JavaScript

Você já deve ter notado que digitar um número no padrão 005, por exemplo, resulta em 5

Há casos que esses zeros são importantes, então como podemos ter um número neste formato?

É simples, porém precisamos entender que o tipo number nunca será o tipo deste dado final, sempre será uma string

Então, basicamente vamos formatar este número para texto e adicionar os zeros antes, chamados também de leading zeroes

Veja o código necessário:

const n = (5).toLocaleString('en-US', {
  minimumIntegerDigits: 4, 
  useGrouping: false
})

console.log(n) // 0005

Neste caso temos o número 5 e queremos o número 0005, com três zeros

Então precisamos utilizar o método toLocaleString para transformar em uma string

A linguagem precisa ser definida e neste caso não importa, você pode mudar para pt-BR também se quiser

Depois temos minimumIntegerDigits que é quem dá o toque final no que precisamos, aqui delimitamos quantos dígitos o número vai ter, se o original não preencher todos, teremos zeros adicionados a esquerda

Neste caso escolhi 4, e você deve alterar para o que deseja

A configuração useGrouping serve para o JS não adicionar uma vírgula ao número, mantendo ele no padrão de número inteiro, por isso configuramos como false

E pronto! Temos o nosso número com quantos zeros a esquerda for preciso 🙂

Conclusão

Neste artigo você viu como formatar números com zero a esquerda em JavaScript

Precisamos primeiramente converter para string com toLocaleString

E depois configurar alguns parâmetros deste método, para que tenhamos o resultado final desejado

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos

Subscribe
Notify of
guest

0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x