Introdução
Se você já precisou formatar números ou textos para que tenham um tamanho fixo (por exemplo, adicionar zeros à esquerda de um número) provavelmente escreveu alguma lógica manual para isso.
Felizmente, o JavaScript oferece uma solução nativa e elegante: String.prototype.padStart().
Esse método permite que você preencha o início de uma string com caracteres até que ela atinja um determinado comprimento.
O que é padStart()
O método padStart() adiciona caracteres no início de uma string até que ela atinja o tamanho especificado.
Sua sintaxe é:
str.padStart(targetLength [, padString])targetLength: comprimento final desejado da string.padString(opcional): string usada para preencher o início (por padrão é um espaço" ").
Se a string original já for igual ou maior que targetLength, padStart() não faz nada e retorna a própria string.
Exemplos Práticos
Adicionando zeros à esquerda
const numero = '7';
const numeroFormatado = numero.padStart(3, '0');
console.log(numeroFormatado); // "007"Acredito que este é um dos casos que mais utilizo em meu cotidiano, pois é muito útil para padronizar formatos, como IDs, códigos de pedido ou números de série.
Mascaramento de Informações (Cartões, Contas)
Outro exemplo é usar padStart() para mascarar informações confidenciais (como números de cartão de crédito) e exibir apenas os últimos dígitos, preenchendo o restante com um caractere de máscara (como *).
// Cenário: Mascarar um número de cartão de crédito
const numeroCompleto = "2034399002125581";
const ultimos4Digitos = numeroCompleto.slice(-4); // Pega os últimos 4 dígitos: "5581"
// Preenche o início com "*" até o comprimento total do número
const numeroMascarado = ultimos4Digitos.padStart(numeroCompleto.length, "*");
console.log(numeroMascarado);
// Saída: "************5581"Atenção a Detalhes
padStart()não altera a string original — ele retorna uma nova string.- O
padStringé repetido quantas vezes forem necessárias para preencher o espaço, mas pode ser cortado se passar do tamanho final.
Exemplo:
'abc'.padStart(10, '1234');
// "1234123abc" (o último '4' foi cortado)- Funciona bem em strings simples, mas não é adequado para padronização numérica avançada (ex: moedas com separadores decimais). Nesse caso, é interessante utilizar o
Intl.NumberFormat.
Conclusão
padStart() é um recurso pequeno, mas poderoso, que ajuda a:
- Tornar seu código mais limpo e legível.
- Evitar condicionais desnecessárias.
- Padronizar formatos de dados exibidos para usuários.
📢 Curtiu essa explicação?
Me siga no LinkedIn para mais conteúdos práticos sobre desenvolvimento frontend.
