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?

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