Primeira letra de uma string em maiúsculo em JavaScript

Neste artigo você vai aprender como deixar a primeira letra de uma string em maiúsculo com JavaScript puro e de cada palavra da string também.

Fala programador(a), beleza? Bora aprender mais sobre JavaScript e também uppercase!

A ideia de transformar a primeira letra é conseguri ter acesso a ela para aplicar o método toUpperCase, que transforma texto para maiúsculo

Podemos conseguir a primeira letra da string com outro método, o: chartAt e inserindo como parâmetro 0

Porém o retorno de chartAt será só a string que selecionamos, então teremos apenas a letra inicial como retorno, como juntar com o resto do texto?

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Simples também! Vamos utilizar o slice da primeira letra até o final da frase e concatenar com a primeira letra

Esta operação, que parece ser complicada mas é simples, nos dará a frase toda novamente com a primeira letra em maiúsculo

Veja a aplicação na prática:

function primeiraLetraMaiuscula(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

console.log(primeiraLetraMaiuscula('teste')); // Teste

console.log(primeiraLetraMaiuscula('olá Mundo')); // Olá Mundo

Outra possível solução utilizando acesso de letra com a notação de arrays, que também funciona em strings:

function capitalize(string) {
    return string[0].toUpperCase() + string.slice(1);
}

console.log(capitalize('teste')); // Teste

console.log(capitalize('olá Mundo')); // Olá Mundo

Primeira letra maiúscula com CSS

E claro, não estamos presos ao JavaScript, podemos resolver o mesmo problema com CSS

Se você tiver a opção, acredito que a forma mais correta, pois é onde alteramos os estilos da página e realmente é super simples, veja:

.seletor:first-letter {
    text-transform: capitalize;
}

Desta maneira também atingimos o objetivo, só que com CSS

Conclusão

Neste artigo vimos como transformar a primeira letra de uma string em maiúsculo em JavaScript

Utilizamos duas maneiras distintas para atingir o objetivo, mas como salientado no artigo também: o mesmo pode ser feito com CSS

Prefira esta linguagem, caso você não tenha a limitação técnica de ser apenas com JavaScript

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Primeira letra de cada palavra em maiúsculo

Até aqui a gente subiu só a primeira letra da frase

Mas e quando você quer TODA palavra começando com maiúscula? tipo transformar ‘olá mundo bonito’ em ‘Olá Mundo Bonito’

A ideia é a mesma, só que aplicada palavra por palavra

A gente quebra a frase em um array de palavras com split, sobe a primeira letra de cada uma reaproveitando a lógica de cima, e junta tudo de novo com join

Se você já conhece map, vai sacar na hora que ele é perfeito pra isso, ele passa em cada palavra e devolve a versão transformada

Veja na prática:

function capitalizarPalavras(string) { return string .split(‘ ‘) .map(function (palavra) { return palavra.charAt(0).toUpperCase() + palavra.slice(1); }) .join(‘ ‘); }

console.log(capitalizarPalavras(‘olá mundo bonito’)); // Olá Mundo Bonito

console.log(capitalizarPalavras(‘bora aprender javascript’)); // Bora Aprender Javascript

Se liga que é a mesma jogada da primeira parte do artigo, charAt(0) pega a inicial, toUpperCase sobe ela e slice(1) traz o resto

A diferença é só o split e o map fazendo isso pra cada palavra separada

E se a string vier vazia?

Vale um cuidado aqui

Se você passar uma string vazia, charAt(0) devolve vazio e não quebra nada, então a função continua funcionando de boa

Porém se em vez de string vier undefined ou null, aí sim dá erro na hora de chamar o método

Então se o texto vem de um input ou de uma API, garante que é uma string antes de mandar pra função, um simples if resolve