Como tornar a primeira letra maiúscula em JavaScript: 5 maneiras + segredos

Treinador Online de Python para Iniciantes

Aprenda Python facilmente sem sobrecarga teórica. Resolva tarefas práticas com verificação automática e escreva código diretamente no navegador.

Start Course

"Por que o JavaScript não tem um método embutido para capitalização?" — você pergunta

Esta questão atormenta iniciantes há muitos anos. No Stack Overflow, ela reuniu milhares de votos e milhões de visualizações. Parece que o que poderia ser mais simples do que tornar a primeira letra maiúscula? Mas em JavaScript, uma operação tão banal se transforma em uma pequena missão.

Neste artigo, não vamos apenas dar uma resposta pronta. Vamos analisar cinco abordagens diferentes, compará-las em termos de desempenho, legibilidade e confiabilidade. Você descobrirá por que str[0].toUpperCase() + str.slice(1) nem sempre é a melhor escolha e como lidar com casos exóticos como strings vazias ou caracteres Unicode.

1. Clássico do gênero: charAt + slice

A resposta mais popular no Stack Overflow — e não é à toa. Este método é usado em 90% dos projetos.

function capitalizeFirst(str) {    return str.charAt(0).toUpperCase() + str.slice(1);}

console.log(capitalizeFirst('hello')); // 'Hello'console.log(capitalizeFirst('javaScript')); // 'JavaScript'

Por que charAt e não str[0]?

Em navegadores antigos (IE 8 e anteriores), acessar pelo índice str[0] retornava undefined para uma string vazia. charAt(0) sempre retorna uma string vazia, o que é mais seguro. No código moderno, a diferença é quase inexistente, mas o hábito de usar charAt permanece como uma boa prática para suporte a sistemas legados.

Vantagens: simplicidade, legibilidade, funciona em todos os lugares.
Desvantagens: não lida com strings vazias (gerará um erro TypeError).

2. Abordagem moderna: template literals + slice

Com o surgimento do ES6, o código pode ficar um pouco mais elegante:

const capitalize = (str) => {    return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;};

Ou ainda mais curto com o operador opcional (ES2020):

const capitalize = (str) => str?.charAt(0).toUpperCase() + str.slice(1);

O operador ?. protege contra null ou undefined, mas não contra string vazia. Para uma string vazia, str?.charAt(0) retornará "", e toUpperCase() em uma string vazia também retorna "". Resultado: "" + "".slice(1) → "". Funciona corretamente!

3. Expressões regulares: para geeks e estetas

O método com regex parece mágica, mas é muito poderoso:

function capitalizeRegex(str) {    return str.replace(/^./, char => char.toUpperCase());}

console.log(capitalizeRegex('world')); // 'World'

O que está acontecendo aqui? ^. significa "primeiro caractere da string". Substituímos ele pelo resultado da chamada de toUpperCase().

Vantagens:

Não requer verificação de string vazia (o regex simplesmente não fará nada)
Fácil de estender: /^\\w/ — apenas para letras, /^[a-z]/ — apenas para o alfabeto latino

Desvantagens:

20–30% mais lento (testes no jsPerf confirmam isso)
Menos legível para iniciantes

4. Método CSS: quando o JS não é necessário

Às vezes, o melhor código é o código que você não escreveu. Se você está trabalhando com a exibição de texto na página, a capitalização via CSS pode ser a solução ideal:

/* CSS */.capitalize {    text-transform: capitalize;}

// HTML<p class="capitalize">este texto será com letra maiúscula</p>

Mas há um detalhe: text-transform: capitalize torna maiúscula cada palavra, não apenas a primeira. Se precisar apenas da primeira palavra — não tem como evitar o JS.