Artigo original: How to Capitalize the First Letter of Each Word in JavaScript – a JS Uppercase Tutorial

Neste artigo, você aprenderá a tornar maiúscula a primeira letra de uma palavra em JavaScript. Depois disso, verá como tornar maiúscula a primeira letra de todas as palavras de uma frase.

A parte mais linda da programação é o fato de não haver uma solução universal para a resolução de um problema. Assim, neste artigo, você verá várias formas de se resolver o mesmo problema.

Colocar em maiúscula a primeira letra de uma palavra

Em primeiro lugar, vamos começar colocando em maiúscula a primeira letra de uma única palavra. Depois de aprender a fazer isso, passaremos para o próximo nível – fazer o mesmo para cada palavra de uma frase. Aqui temos um exemplo:

const publicaçao = "freeCodeCamp";

Em JavaScript, começamos a contar do 0. Por exemplo, se temos um array, a primeira posição é o 0, não o 1.

Além disso, podemos acessar cada letra de uma string da mesma maneira que acessamos um elemento de um array. Por exemplo, a primeira letra da palavra "freeCodeCamp" está na posição 0.

Isso significa que podemos obter a letra f de freeCodeCamp usando publicacao[0].

Da mesma maneira, você pode acessar outras letras da palavra. Você pode substituir "0" por qualquer número, contanto que não exceda o tamanho da palavra. Por exceder o tamanho da palavra, quero dizer algo como publicacao[25], o que lançará um erro, já que há apenas doze letras na palavra "freeCodeCamp".

Como colocar em maiúscula a primeira letra de uma palavra

Agora que sabemos como acessar uma letra de uma palavra, vamos colocar a primeira letra de uma palavra em maiúscula.

Em JavaScript, temos um método chamado toUpperCase(), que podemos chamar em strings ou em palavras. Como podemos supor a partir do nome, chamamos esse método em uma string/palavra e ele retornará a mesma string ou palavra, mas em letras maiúsculas (uppercase, em inglês).

Por exemplo:

const publicacao = "freeCodeCamp";
publicacao[0].toUpperCase();

Ao executar o código acima, obteremos um F maiúsculo, em vez de um f minúsculo. Para receber como retorno a palavra inteira, podemos fazer isto:

const publicacao = "freeCodeCamp";
publicacao[0].toUpperCase() + publicacao.substring(1);

Agora, o método concatenará "F" com "reeCodeCamp", o que significa que receberemos de volta a palavra "FreeCodeCamp". É isso!

Recapitulando

Para garantir que está tudo claro, vamos recapitular o que aprendemos até o momento:

  • Em JavaScript, a contagem começa do 0.
  • Podemos acessar uma letra em uma string do mesmo modo como acessamos um elemento de um array - por exemplo, string[índice].
  • Não usamos um índice que exceda o comprimento da string (use o método length - string.length - para encontrar o intervalo que você pode usar).
  • Usamos o método integrado toUpperCase() na letra que queremos transformar em maiúscula.

Como colocar em maiúscula a primeira letra de cada palavra em uma string

O próximo passo é pegar uma frase e colocar em maiúscula a primeira letra de cada palavra daquela frase. Vejamos a frase a seguir:

const minhaFrase = "O freeCodeCamp é um recurso incrível";

Divida a frase em palavras

Precisamos colocar em maiúscula a primeira letra de cada palavra da frase O freeCodeCamp é um recurso incrível.

O primeiro passo é dividir a frase em um array de palavras. Por quê? Para que possamos manipular cada palavra individualmente. Podemos fazer isso da seguinte maneira:

const minhaFrase = "O freeCodeCamp é um recurso incrível";
const palavras = mySentence.split(" ");

Iterar por cada palavra

Após executarmos o código acima, a variável palavras recebe um array com cada palavra da frase. O array será assim ["O", "freeCodeCamp", "é", "um", "recurso", "incrível"].

const minhaFrase = "O freeCodeCamp é um recurso incrível";
const palavras = minhaFrase.split(" ");

for (let i = 0; i < palavras.length; i++) {
    palavras[i] = palavras[i][0].toUpperCase() + palavras[i].substr(1);
}

A próxima etapa é percorrer o array de palavras e colocar a primeira letra de cada palavra em maiúsculas.

No código acima, cada palavra é considerada separadamente. Em seguida, cada primeira letra é colocada em maiúsculas. No fim, a primeira letra em maiúsculas é concatenada com o resto da string.

Unindo as palavras

O que o código acima está fazendo? Ele itera por cada palavra e a substitui pela primeira letra em maiúscula + o resto da string.

Se pegarmos "freeCodeCamp" como exemplo, teremos freeCodeCamp = F + reeCodeCamp.

Depois de iterar por todas as palavras, o array palavras será ["O", "FreeCodeCamp", "É", "Um", "Recurso", "Incrível"]. Porém, temos apenas um array, não uma string. Não é isso o que queremos.

O último passo é unir todas as palavras para formar uma frase. Então, como fazemos isso?

Em JavaScript, existe um método chamado join, o qual usamos para retornar um array como uma string. O método recebe um separador como argumento. Ou seja, especificamos o que adicionar entre as palavras (um espaço em branco, por exemplo).

const minhaFrase = "O freeCodeCamp é um recurso incrível";
const palavras = minhaFrase.split(" ");

for (let i = 0; i < palavras.length; i++) {
    palavras[i] = palavras[i][0].toUpperCase() + palavras[i].substr(1);
}

palavras.join(" ");

No trecho de código acima, podemos ver o método join em ação. Chamamos o método no array palavras e especificamos o separador, que, no nosso caso, é um espaço em branco.

Portanto, ["O", "FreeCodeCamp", "É", "Um", "Recurso", "Incrível"] passa a ser O FreeCodeCamp É Um Recurso Incrível.

Outros métodos

Em programação, geralmente, há vários meios de se resolver o mesmo problema. Vamos ver uma outra abordagem.

const minhaFrase = "O freeCodeCamp é um recurso incrível";
const palavras = minhaFrase.split(" ");

palavras.map((palavra) => { 
    return palavra[0].toUpperCase() + palavra.substring(1); 
}).join(" ");

Qual é a diferença entre a solução acima e a solução inicial? As duas soluções são muito parecidas. A diferença está no fato de que, na segunda solução, estamos usando a função map, enquanto, na primeira solução, usamos um laço for.

Vamos um pouco mais longe e façamos isso em apenas uma linha. Cuidado! Soluções com apenas uma linha podem parecer legais, mas, no mundo real, elas raramente são usadas por ser difícil entendê-las. A legibilidade do código sempre vem primeiro.

const minhaFrase = "O freeCodeCamp é um recurso incrível";

const fraseFinal = minhaFrase.replace(/(^\w{1})|(\s+\w{1})/g, letra => letra.toUpperCase());

O código acima usa RegEx (expressões regulares) para transformar as letras. As RegEx podem parecer confusas. Por isso, permita-me explicar o que acontece:

  • ^ corresponde ao começo da string.
  • \w corresponde a qualquer caractere de uma palavra.
  • {1} recebe apenas o primeiro caractere.
  • Portanto, ^\w{1} corresponde à primeira letra da palavra.
  • | funciona como o booleano OR. Ele corresponde à expressão após e antes do |.
  • \s+ corresponde a qualquer quantidade de espaços em branco entre as palavras (por exemplo, espaços, tabulações ou quebras de linha).

Assim, com uma linha, conseguimos a mesma coisa que nas soluções acima. Se quiser conhecer as RegEx melhor e saber mais a respeito, você pode usar este site (em inglês).

Conclusão

Parabéns, você aprendeu algo novo hoje! Para recapitular, neste artigo, você aprendeu:

  • como acessar os caracteres de uma string
  • como colocar a primeira letra de uma palavra em maiúscula
  • como dividir uma string em um array de palavras
  • como juntar novamente as palavras do array para formar uma string
  • como usar RegEx para conseguir realizar a mesma tarefa

Obrigado pela leitura! Se quiser entrar em contato com o autor, conecte-se com ele pelo Twitter @catalinmpit. Ele também publica artigos regularmente em seu blog catalins.tech, caso você queira ler mais conteúdo feito por ele (em inglês).