So schreiben Sie den ersten Buchstaben jedes Wortes in JavaScript groß - ein JS-Tutorial in Großbuchstaben

In diesem Artikel erfahren Sie, wie Sie den ersten Buchstaben eines Wortes in JavaScript groß schreiben. Danach werden Sie den ersten Buchstaben aller Wörter aus einem Satz groß schreiben.

Das Schöne an der Programmierung ist, dass es keine universelle Lösung gibt, um ein Problem zu lösen. Daher werden Sie in diesem Artikel mehrere Möglichkeiten zur Lösung des gleichen Problems sehen.

Großschreibung des ersten Buchstabens eines Wortes

Beginnen wir zunächst mit der Großschreibung des ersten Buchstabens eines einzelnen Wortes. Nachdem Sie gelernt haben, wie das geht, fahren wir mit der nächsten Stufe fort - mit jedem Wort aus einem Satz. Hier ist ein Beispiel:

const publication = "freeCodeCamp"; 

In JavaScript beginnen wir mit dem Zählen ab 0. Wenn wir beispielsweise ein Array haben, ist die erste Position 0 und nicht 1.

Außerdem können wir von einem String aus auf jeden Buchstaben zugreifen, genauso wie wir von einem Array aus auf ein Element zugreifen. Zum Beispiel befindet sich der erste Buchstabe aus dem Wort " freeCodeCamp " an Position 0.

Dies bedeutet, dass wir den Buchstaben f von freeCodeCamp erhalten können, indem wir dies tun publication[0].

Auf die gleiche Weise können Sie über das Wort auf andere Buchstaben zugreifen. Sie können "0" durch eine beliebige Zahl ersetzen, solange Sie die Wortlänge nicht überschreiten. Mit Überschreiten der Wortlänge meine ich den Versuch, etwas Ähnliches zu tun publication[25, was einen Fehler auslöst, da das Wort "freeCodeCamp" nur zwölf Buchstaben enthält.

So schreiben Sie den ersten Buchstaben groß

Nachdem wir nun wissen, wie man aus einem Wort auf einen Buchstaben zugreift, können wir ihn groß schreiben.

In JavaScript haben wir eine Methode namens toUpperCase(), die wir für Zeichenfolgen oder Wörter aufrufen können. Wie wir aus dem Namen schließen können, rufen Sie ihn für eine Zeichenfolge / ein Wort auf, und es wird dasselbe zurückgeben, jedoch in Großbuchstaben.

Zum Beispiel:

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

Wenn Sie den obigen Code ausführen, erhalten Sie ein Großbuchstaben F anstelle von f. Um das ganze Wort zurückzubekommen, können wir dies tun:

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

Jetzt verkettet es "F" mit "reeCodeCamp", was bedeutet, dass wir das Wort "FreeCodeCamp" zurückbekommen. Das ist alles!

Lassen Sie uns rekapitulieren

Um sicherzugehen, dass die Dinge klar sind, lassen Sie uns noch einmal zusammenfassen, was wir bisher gelernt haben:

  • In JavaScript beginnt die Zählung bei 0.
  • Wir können auf einen Buchstaben aus einer Zeichenfolge genauso zugreifen wie auf ein Element aus einem Array - z string[index].
  • Verwenden Sie keinen Index, der die Zeichenfolgenlänge überschreitet (verwenden Sie die Längenmethode - string.length-, um den Bereich zu ermitteln, den Sie verwenden können).
  • Verwenden Sie die integrierte Methode toUpperCase()für den Buchstaben, den Sie in Großbuchstaben umwandeln möchten.

Großschreibung des ersten Buchstabens jedes Wortes aus einer Zeichenfolge

Der nächste Schritt besteht darin, einen Satz zu nehmen und jedes Wort aus diesem Satz groß zu schreiben. Nehmen wir den folgenden Satz:

const mySentence = "freeCodeCamp is an awesome resource"; 

Teilen Sie es in Worte

Wir müssen den ersten Buchstaben aus jedem Wort aus dem Satz groß schreiben freeCodeCamp is an awesome resource.

Der erste Schritt besteht darin, den Satz in eine Reihe von Wörtern aufzuteilen. Warum? So können wir jedes Wort einzeln manipulieren. Wir können das wie folgt machen:

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

Iterieren Sie über jedes Wort

Nachdem wir den obigen Code ausgeführt haben, wird der Variablen wordsmit jedem Wort aus dem Satz ein Array zugewiesen. Das Array ist wie folgt ["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); } 

Der nächste Schritt besteht nun darin, das Array von Wörtern zu durchlaufen und den ersten Buchstaben jedes Wortes groß zu schreiben.

Im obigen Code wird jedes Wort separat genommen. Dann wird der erste Buchstabe groß geschrieben und am Ende der großgeschriebene erste Buchstabe mit dem Rest der Zeichenfolge verkettet.

Verbinde die Wörter

Was macht der obige Code? Es iteriert über jedes Wort und ersetzt es durch den Großbuchstaben des ersten Buchstabens + den Rest der Zeichenfolge.

Wenn wir "freeCodeCamp" als Beispiel nehmen, sieht es so aus freeCodeCamp = F + reeCodeCamp.

Nachdem es alle Wörter durchlaufen hat, ist das wordsArray ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"]. Wir haben jedoch ein Array, keine Zeichenfolge, was wir nicht wollen.

Der letzte Schritt besteht darin, alle Wörter zu einem Satz zusammenzufügen. Wie machen wir das?

In JavaScript haben wir eine Methode namens join, mit der wir ein Array als String zurückgeben können. Die Methode verwendet ein Trennzeichen als Argument. Das heißt, wir geben an, was zwischen Wörtern hinzugefügt werden soll, z. B. ein Leerzeichen.

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

Im obigen Code-Snippet können wir die Join-Methode in Aktion sehen. Wir rufen es im wordsArray auf und geben das Trennzeichen an, das in unserem Fall ein Leerzeichen ist.

Daher ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"]wird FreeCodeCamp Is An Awesome Resource.

Andere Methoden

Bei der Programmierung gibt es normalerweise mehrere Möglichkeiten, dasselbe Problem zu lösen. Sehen wir uns also einen anderen Ansatz an.

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

If you like what I write, the chances are you would love what I email. Consider subscribing to my mailing list. If you're not a fan of newsletters, we can always keep in touch on Twitter.