Lidando com zeros à esquerda com JavaScript

Existem inúmeros casos nos quais um zero à esquerda não vale de nada. É inútil. Sua existência é perfeitamente prescindível. Mas existem alguns em que ele é fundamental.

Um caso não raro no dia a dia de um programador é a construção de datas a partir de uma string padrão ISO. A ausência de zeros à esquerda desrespeita o padrão e, consequentemente, impede a contrução de uma data usando JavaScript. Observe no exemplo abaixo o que acontece se dispensarmos o zero à esquerda dos números que representam mês e dia da data a ser construída:

new Date('2024-2-4T05:00:00.000Z');
// Invalid Date

Um outro caso, também baseado em um formato pré-definido, que demanda o uso de zeros à esquerda é o Código de Endereçamento Postal (CEP). Caso eu defina um CEP como 89203-85, ele será inválido, e eventuais buscas por esse código não retornarão resultados. O formato pré-definido para CEP obriga que o código contenha 5 dígitos seguidos de outros 3, separados por um traço. Para tornar o CEP válido, é necessário então adicionar um zero à esquerda do número 85: 89203-085.

Mas qual seria a maneira mais fácil de tratar uma string que precisa necessariamente ter um determinado número de caracteres? Até pouco tempo atrás, eu tinha o hábito de criar uma função auxiliar que tinha mais ou menos essa cara:

function formatLeadingZero(text) {
  return parseInt(text) < 10 ? `0${text}` : text;
}

A partir de então, bastava executar a função passando qualquer texto que precisasse ter obrigatoriamente dois caracteres:

formatLeadingZero('2');
// "02"

Mas como é possível notar logo de cara, essa função se limita a textos que precisam ter ao menos 2 caracteres. Caso eu precisasse garantir o caso 085 do CEP, ela já não seria mais suficiente. Foi então que recentemente, num pull request aberto por um colega de trabalho, descobri o método String.prototype.padStart(), suportado pelos mais populares browsers desde pelo menos 2017. Esse método não só resolve o formato de mês e dia respeitando o zero à esquerda, como também resolveria o caso do CEP. Uma verdadeira mão na roda:

'2'.padStart(2, '0');
// "02"

'85'.padStart(3, '0');
// "085"

O método tem uma assinatura bastante intuitiva. Primeiramente informamos o comprimento que a string deve ter, logo depois informamos o caracter que preencherá o número de caracteres faltantes à esquerda. Caso seja necessário preencher caracteres faltantes à direita, é possível usar o método String.prototype.padEnd().

Ao observar um pouco mais a fundo a assinatura desses dois métodos, percebemos que ambos os métodos podem satisfazer muitos outros casos de uso além de adicionar zeros à esquerda ou à direita de uma string. É possível por exemplo ofuscar dados sensíveis, como tokens ou números de cartão de crédito:

token.slice(-4).padStart(24, '*')
// "********************6fgh"

Nessa documentação disponível na MDN você pode conhecer melhor esses e outros métodos utilitários de String que podem facilitar o seu dia a dia, tornando seu código radicalmente mais simples.