Sådan kapitaliseres det første bogstav i hvert ord i JavaScript - en JS-hovedvejledning

I denne artikel vil du lære at kapitalisere det første bogstav i ethvert ord i JavaScript. Derefter skal du bruge det første bogstav i alle ord fra en sætning.

Det smukke ved programmering er, at der ikke er nogen universel løsning til at løse et problem. Derfor vil du i denne artikel se flere måder at løse det samme problem på.

Brug det første bogstav i et ord med store bogstaver

Lad os først og fremmest starte med at bruge det første bogstav i et enkelt ord. Når du har lært, hvordan du gør dette, fortsætter vi til det næste niveau - gør det på hvert ord fra en sætning. Her er et eksempel:

const publication = "freeCodeCamp"; 

I JavaScript begynder vi at tælle fra 0. Hvis vi f.eks. Har en matrix, er den første position 0, ikke 1.

Vi kan også få adgang til hvert bogstav fra en streng på samme måde som vi får adgang til et element fra en matrix. For eksempel er det første bogstav fra ordet " freeCodeCamp " i position 0.

Dette betyder, at vi kan få bogstavet f fra freeCodeCamp ved at gøre publication[0].

På samme måde kan du få adgang til andre bogstaver fra ordet. Du kan erstatte "0" med et hvilket som helst tal, så længe du ikke overskrider ordlængden. Ved at overskride ordlængden mener jeg at prøve at gøre noget lignende publication[25, hvilket kaster en fejl, fordi der kun er tolv bogstaver i ordet "freeCodeCamp".

Sådan kapitaliseres det første bogstav

Nu hvor vi ved, hvordan vi får adgang til et bogstav fra et ord, lad os bruge det til at kapitalisere.

I JavaScript har vi en metode kaldet toUpperCase(), som vi kan kalde på strenge eller ord. Som vi kan antyde fra navnet, kalder du det på en streng / ord, og det vil returnere det samme, men som en stor bogstav.

For eksempel:

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

Når du kører ovenstående kode, får du en stor F i stedet for f. For at få hele ordet tilbage kan vi gøre dette:

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

Nu sammenkædes "F" med "reeCodeCamp", hvilket betyder, at vi får ordet "FreeCodeCamp" tilbage. Det er alt!

Lad os sammenfatte

For at være sikker på, at tingene er klare, lad os sammenfatte det, vi har lært indtil videre:

  • I JavaScript starter optælling fra 0.
  • Vi kan få adgang til et brev fra en streng på samme måde som vi får adgang til et element fra en matrix - f.eks string[index].
  • Brug ikke et indeks, der overstiger strenglængden (brug længdemetoden - string.length- for at finde det interval, du kan bruge).
  • Brug den indbyggede metode toUpperCase()på det bogstav, du vil omdanne til store bogstaver.

Brug det første bogstav i hvert ord fra en streng

Det næste trin er at tage en sætning og kapitalisere hvert ord fra denne sætning. Lad os tage følgende sætning:

const mySentence = "freeCodeCamp is an awesome resource"; 

Opdel det i ord

Vi er nødt til at kapitalisere det første bogstav fra hvert ord fra sætningen freeCodeCamp is an awesome resource.

Det første skridt, vi tager, er at opdele sætningen i en række ord. Hvorfor? Så vi kan manipulere hvert ord individuelt. Vi kan gøre det som følger:

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

Iterere over hvert ord

Når vi har kørt ovenstående kode, wordstildeles variablen en matrix med hvert ord fra sætningen. Arrayet er som følger ["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); } 

Nu er det næste trin at sløjfe over matrixen af ​​ord og kapitalisere det første bogstav i hvert ord.

I ovenstående kode tages hvert ord separat. Derefter kapitaliserer det det første bogstav, og til sidst sammenkædes det store bogstav med stort med resten af ​​strengen.

Deltag i ordene

Hvad laver ovenstående kode? Det gentages over hvert ord, og det erstatter det med store bogstaver + det første bogstav + resten af ​​strengen.

Hvis vi tager "freeCodeCamp" som et eksempel, ser det sådan ud freeCodeCamp = F + reeCodeCamp.

Når det gentages over alle ordene, er wordsarrayet ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"]. Vi har dog en matrix, ikke en streng, hvilket ikke er det, vi ønsker.

The last step is to join all the words to form a sentence. So, how do we do that?

In JavaScript, we have a method called join, which we can use to return an array as a string. The method takes a separator as an argument. That is, we specify what to add between words, for example a space.

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(" "); 

In the above code snippet, we can see the join method in action. We call it on the words array, and we specify the separator, which in our case is a space.

Therefore, ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"] becomes FreeCodeCamp Is An Awesome Resource.

Other methods

In programming, usually, there are multiple ways of solving the same problem. So let's see another approach.

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

What is the difference between the above solution and the initial solution? The two solutions are very similar, the difference being that in the second solution we are using the map function, whereas in the first solution we used a for loop.

Let's go even further, and try to do a one-liner. Be aware! One line solutions might look cool, but in the real world they are rarely used because it is challenging to understand them. Code readability always comes first.

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

The above code uses RegEx to transform the letters. The RegEx might look confusing, so let me explain what happens:

  • ^ matches the beginning of the string.
  • \w matches any word character.
  • {1} takes only the first character.
  • Thus, ^\w{1} matches the first letter of the word.
  • | works like the boolean OR. It matches the expression after and before the |.
  • \s+ matches any amount of whitespace between the words (for example spaces, tabs, or line breaks).

Thus, with one line, we accomplished the same thing we accomplished in the above solutions. If you want to play around with the RegEx and to learn more, you can use this website.

Conclusion

Congratulations, you learnt a new thing today! To recap, in this article, you learnt how to:

  • access the characters from a string
  • capitalize the first letter of a word
  • split a string in an array of words
  • join back the words from an array to form a string
  • use RegEx to accomplish the same task

Hvis du kan lide det, jeg skriver, er chancerne for, at du vil elske det, jeg sender e-mail til. Overvej at abonnere på min adresseliste. Hvis du ikke er fan af nyhedsbreve , kan vi altid holde kontakten på Twitter .