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

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

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 116 aulas
• 4 projetos
• 9h 23min

Conhecer formação

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

Tem um jeito ainda mais direto de fazer isso, e provavelmente é o que a maioria procura

O método padStart preenche o começo da string até ela bater um tamanho que você define

Como ele já trabalha em cima de string, o pulo do gato é converter o número primeiro com String() ou toString()

Veja na prática:

const n = String(5).padStart(4, ‘0’)

console.log(n) // 0005

O primeiro argumento é o tamanho final que a string precisa ter

O segundo é o caractere que vai ser adicionado até chegar nesse tamanho, no nosso caso o zero

Se o número já tiver o tamanho pedido ou for maior, nada é adicionado, ele fica igual

Então pra 4 dígitos, o 5 vira 0005 e o 1234 continua 1234

Bateu a dúvida de qual escolher?

Se você só quer encher de zero a esquerda, padStart é mais simples e direto de ler

Já o toLocaleString entrega mais quando você também precisa de formatação de número (separador de milhar, moeda, casas decimais) junto

Pra tarefa pura de zero a esquerda, padStart costuma ser o caminho mais enxuto

Repara que nos exemplos usei o número 5 direto, mas na vida real ele quase sempre vem de uma variável

Funciona igualzinho:

const numero = 5 const n = String(numero).padStart(4, ‘0’)

console.log(n) // 0005

Basta jogar a sua variável no lugar do valor fixo