const publication = "freeCodeCamp";

Em JavaScript, começamos a contar a partir de 0. Por exemplo, se tivermos uma matriz, a primeira posição é 0, não 1.

Ademais, podemos acessar cada letra de uma String da mesma forma que acessamos um elemento de um array. Por exemplo, a primeira letra da palavra “freeCodeCamp“está na posição 0.

Isso significa que podemos pegar a carta f de freeCodeCamp fazendo publication[0].

Da mesma forma, você pode acessar outras letras da palavra. Você pode substituir “0” por qualquer número, desde que não exceda o comprimento da palavra. Ao exceder o comprimento da palavra, quero dizer tentar fazer algo como publicação[25, which throws an error because there are only twelve letters in the word “freeCodeCamp”.

How to capitalize the first letter

Now that we know how to access a letter from a word, let’s capitalize it.

In JavaScript, we have a method called toUpperCase(), which we can call on strings, or words. As we can imply from the name, you call it on a string/word, and it is going to return the same thing but as an uppercase.

For instance:

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

Executando o código acima, você obterá um capital F em vez de. Para obter a palavra inteira de volta, podemos fazer isso:

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

Agora ele concatena “F” com “reeCodeCamp”, o que significa que obtemos de volta a palavra “FreeCodeCamp”. Isso é tudo!

Vamos recapitular

Para ter certeza de que as coisas estão claras, vamos recapitular o que aprendemos até agora:

  • Em JavaScript, a contagem começa em 0.
  • Podemos acessar uma letra de uma string da mesma forma que acessamos um elemento de um array – por exemplo, string[index].
  • Não use um índice que exceda o comprimento da string (use o método de comprimento – string.length – para encontrar o intervalo que você pode usar).
  • Use o método integrado toUpperCase() na letra que você deseja transformar em maiúscula.

A próxima etapa é pegar uma frase e colocar todas as palavras dessa frase em maiúscula. Vamos pegar a seguinte frase:

const mySentence = "freeCodeCamp is an awesome resource";

Divida em palavras

Temos que colocar a primeira letra de cada palavra da frase em maiúscula freeCodeCamp is an awesome resource.

O primeiro passo que damos é dividir a frase em uma série de palavras. Por quê? Assim, podemos manipular cada palavra individualmente. Podemos fazer isso da seguinte maneira:

const mySentence = "freeCodeCamp is an awesome resource";const words = mySentence.split(" ");

Repita cada palavra

Depois de executar o código acima, a variável words recebe uma matriz com cada palavra da frase. A matriz é a seguinte ["freeCodeCamp", "is", "an", "awesome", "resource"].

const mySentence = "freeCodeCamp is an awesome resource";const words = mySentence.split(" ");for (let i = 0; i < words.length; i++) {    words[i] = words[i][0].toUpperCase() + words[i].substr(1);}

Agora, a próxima etapa é fazer um loop na matriz de palavras e colocar a primeira letra de cada palavra em maiúscula.

No código acima, cada palavra é considerada separadamente. Em seguida, ele coloca a primeira letra em maiúscula e, no final, concatena a primeira letra em maiúscula com o resto da string.

Junte as palavras

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

Se tomarmos “freeCodeCamp” como exemplo, fica assim freeCodeCamp = F + reeCodeCamp.

Depois de iterar todas as palavras, o words array é ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"]. No entanto, temos um array, não uma string, que não é o que queremos.

A última etapa é juntar todas as palavras para formar uma frase. Então, como fazemos isso?

Em JavaScript, temos um método chamado join, que podemos usar para retornar um array como uma string. O método usa um separador como argumento. Ou seja, especificamos o que adicionar entre as palavras, por exemplo, um espaço.

const mySentence = "freeCodeCamp is an awesome resource";const words = mySentence.split(" ");for (let i = 0; i < words.length; i++) {    words[i] = words[i][0].toUpperCase() + words[i].substr(1);}words.join(" ");

No trecho de código acima, podemos ver o método de junção em ação. Nós chamamos isso no words array, e especificamos o separador, que no nosso caso é um espaço.

Portanto, ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"] torna-se FreeCodeCamp Is An Awesome Resource.

Na programação, normalmente, existem várias maneiras de resolver o mesmo problema. Então, vamos ver outra abordagem.

const mySentence = "freeCodeCamp is an awesome resource";const words = mySentence.split(" ");words.map((word) => {     return word[0].toUpperCase() + word.substring(1); }).join(" ");

Qual é a diferença entre a solução acima e a solução inicial? As duas soluções são muito semelhantes, a diferença é que na segunda solução estamos usando o map função, enquanto na primeira solução usamos um for loop.

Vamos ainda mais longe e tentar fazer um one-liner. Estar ciente! Soluções de uma linha podem parecer legais, mas no mundo real elas raramente são usadas porque é difícil entendê-las. A legibilidade do código sempre vem em primeiro lugar.

const mySentence = "freeCodeCamp is an awesome resource";const finalSentence = mySentence.replace(/(^w{1})|(s+w{1})/g, letter => letter.toUpperCase());

O código acima usa RegEx para transformar as letras. O RegEx pode parecer confuso, então deixe-me explicar o que acontece:

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

Assim, com uma linha, realizamos o mesmo que realizamos nas soluções acima. Se você quiser brincar com o RegEx e aprender mais, você pode usar esse site.

Parabéns, você aprendeu uma coisa nova hoje! Para recapitular, neste artigo, você aprendeu como:

  • acessar os caracteres de uma string
  • capitalize a primeira letra de uma palavra
  • dividir uma string em uma série de palavras
  • junte as palavras de um array para formar uma string
  • use RegEx para realizar a mesma tarefa

Se você gosta do que escrevo, é provável que ame o que eu envio. Considere assinar o meu lista de correio. Se vocês são não sou fã de newsletters, podemos sempre manter contato Twitter.