Drei Möglichkeiten, einen Satz in JavaScript zu betiteln

Dieser Artikel basiert auf dem Free Algorithmus Camp Basic Algorithm Scripting „ Title Case a Satz “.

In diesem Algorithmus möchten wir eine Textzeichenfolge so ändern, dass am Anfang jedes Wortes immer ein Großbuchstabe steht.

In diesem Artikel werde ich drei Ansätze erläutern. Erstens mit einer FOR-Schleife, zweitens mit der map () -Methode und drittens mit der replace () -Methode.

Algorithmus-Herausforderung

Geben Sie die angegebene Zeichenfolge mit dem ersten Buchstaben jedes großgeschriebenen Wortes zurück. Stellen Sie sicher, dass der Rest des Wortes in Kleinbuchstaben geschrieben ist.

Für die Zwecke dieser Übung sollten Sie auch Verbindungswörter wie „das“ und „von“ groß schreiben.

Bereitgestellte Testfälle

  • titleCase ("Ich bin eine kleine Teekanne") sollte eine Zeichenfolge zurückgeben.
  • titleCase ("Ich bin eine kleine Teekanne") sollte "Ich bin eine kleine Teekanne" zurückgeben.
  • titleCase ("sHoRt And sToUt") sollte "Short And Stout" zurückgeben.
  • titleCase ("HIER IST MEIN GRIFF HIER IST MEIN SPOUT") sollte "Hier ist mein Griff Hier ist mein Auslauf" zurückgeben.

1. Titel Fall ein Satz mit einer FOR-Schleife

Für diese Lösung verwenden wir die Methode String.prototype.toLowerCase (), die Methode String.prototype.split (), die Methode String.prototype.charAt (), die Methode String.prototype.slice () und das Array. prototype.join () -Methode.

  • Die toLowerCase () -Methode gibt den aufrufenden Zeichenfolgenwert zurück, der in Kleinbuchstaben konvertiert wurde
  • Die split () -Methode teilt ein String-Objekt in ein Array von Strings auf, indem der String in Teilzeichenfolgen aufgeteilt wird.
  • Die charAt () -Methode gibt das angegebene Zeichen aus einer Zeichenfolge zurück.
  • Die Slice () -Methode extrahiert einen Abschnitt einer Zeichenfolge und gibt eine neue Zeichenfolge zurück.
  • Die join () -Methode verbindet alle Elemente eines Arrays zu einer Zeichenfolge.

Wir müssen ein leeres Leerzeichen zwischen den Klammern der split () -Methode einfügen.

var strSplit = "I'm a little tea pot".split(' ');

welches ein Array von getrennten Wörtern ausgibt:

var strSplit = ["I'm", "a", "little", "tea", "pot"];

Wenn Sie das Leerzeichen in der Klammer nicht hinzufügen, erhalten Sie folgende Ausgabe:

var strSplit = ["I", "'", "m", " ", "a", " ", "l", "i", "t", "t", "l", "e", " ", "t", "e", "a", " ", "p", "o", "t"];

Wir werden verketten

str[i].charAt(0).toUpperCase()

- wodurch das Index-0-Zeichen der aktuellen Zeichenfolge in der FOR-Schleife in Großbuchstaben geschrieben wird -

und

str[i].slice(1)

- wird aus Index 1 bis zum Ende der Zeichenfolge extrahiert.

Wir werden die gesamte Zeichenfolge zu Normalisierungszwecken auf Kleinbuchstaben setzen.

Mit Kommentaren:

 function titleCase(str) { // Step 1. Lowercase the string str = str.toLowerCase(); // str = "I'm a little tea pot".toLowerCase(); // str = "i'm a little tea pot"; // Step 2. Split the string into an array of strings str = str.split(' '); // str = "i'm a little tea pot".split(' '); // str = ["i'm", "a", "little", "tea", "pot"]; // Step 3. Create the FOR loop for (var i = 0; i  "I'm A Little Tea Pot" } titleCase("I'm a little tea pot");

Ohne Kommentare:

function titleCase(str) { str = str.toLowerCase().split(' '); for (var i = 0; i < str.length; i++) { str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1); } return str.join(' '); } titleCase("I'm a little tea pot");

2. Titel Groß- und Kleinschreibung eines Satzes mit der map () -Methode

Für diese Lösung verwenden wir die Methode Array.prototype.map ().

  • Die map () -Methode erstellt ein neues Array mit den Ergebnissen des Aufrufs einer bereitgestellten Funktion für jedes Element in diesem Array. Wenn Sie map verwenden, wird eine bereitgestellte Rückruffunktion einmal für jedes Element in einem Array der Reihe nach aufgerufen und aus den Ergebnissen ein neues Array erstellt.

Wir werden den String wie im vorherigen Beispiel in Kleinbuchstaben schreiben, bevor wir die map () -Methode anwenden.

Anstatt eine FOR-Schleife zu verwenden, wenden wir die map () -Methode als Bedingung für dieselbe Verkettung aus dem vorherigen Beispiel an.

(word.charAt(0).toUpperCase() + word.slice(1));

Mit Kommentaren:

 function titleCase(str) { // Step 1. Lowercase the string str = str.toLowerCase() // str = "i'm a little tea pot"; // Step 2. Split the string into an array of strings .split(' ') // str = ["i'm", "a", "little", "tea", "pot"]; // Step 3. Map over the array .map(function(word) { return (word.charAt(0).toUpperCase() + word.slice(1)); /* Map process 1st word: "i'm" => (word.charAt(0).toUpperCase() + word.slice(1)); "i'm".charAt(0).toUpperCase() + "i'm".slice(1); "I" + "'m"; return "I'm"; 2nd word: "a" => (word.charAt(0).toUpperCase() + word.slice(1)); "a".charAt(0).toUpperCase() + "".slice(1); "A" + ""; return "A"; 3rd word: "little" => (word.charAt(0).toUpperCase() + word.slice(1)); "little".charAt(0).toUpperCase() + "little".slice(1); "L" + "ittle"; return "Little"; 4th word: "tea" => (word.charAt(0).toUpperCase() + word.slice(1)); "tea".charAt(0).toUpperCase() + "tea".slice(1); "T" + "ea"; return "Tea"; 5th word: "pot" => (word.charAt(0).toUpperCase() + word.slice(1)); "pot".charAt(0).toUpperCase() + "pot".slice(1); "P" + "ot"; return "Pot"; End of the map() method */ }); // Step 4. Return the output return str.join(' '); // ["I'm", "A", "Little", "Tea", "Pot"].join(' ') => "I'm A Little Tea Pot" } titleCase("I'm a little tea pot");

Ohne Kommentare:

function titleCase(str) { return str.toLowerCase().split(' ').map(function(word) { return (word.charAt(0).toUpperCase() + word.slice(1)); }).join(' '); } titleCase("I'm a little tea pot");

3. Titel Groß- und Kleinschreibung eines Satzes Mit den Methoden map () und replace ()

Für diese Lösung verwenden wir weiterhin die Methode Array.prototype.map () und fügen die Methode String.prototype.replace () hinzu.

  • Die replace () -Methode gibt eine neue Zeichenfolge zurück, bei der einige oder alle Übereinstimmungen eines Musters durch eine Ersetzung ersetzt werden.

In unserem Fall ist das Muster für die replace () -Methode eine Zeichenfolge, die durch eine neue Ersetzung ersetzt wird, und wird als wörtliche Zeichenfolge behandelt. Wir können auch einen regulären Ausdruck als Muster verwenden, um diesen Algorithmus zu lösen.

Wir werden die Zeichenfolge in Kleinbuchstaben schreiben und teilen, wie im ersten Beispiel gezeigt, bevor wir die map () -Methode anwenden.

Mit Kommentaren:

 function titleCase(str) { // Step 1. Lowercase the string str = str.toLowerCase() // str = "i'm a little tea pot"; // Step 2. Split the string into an array of strings .split(' ') // str = ["i'm", "a", "little", "tea", "pot"]; // Step 3. Map over the array .map(function(word) { return word.replace(word[0], word[0].toUpperCase()); /* Map process 1st word: "i'm" => word.replace(word[0], word[0].toUpperCase()); "i'm".replace("i", "I"); return word => "I'm" 2nd word: "a" => word.replace(word[0], word[0].toUpperCase()); "a".replace("a", "A"); return word => "A" 3rd word: "little" => word.replace(word[0], word[0].toUpperCase()); "little".replace("l", "L"); return word => "Little" 4th word: "tea" => word.replace(word[0], word[0].toUpperCase()); "tea".replace("t", "T"); return word => "Tea" 5th word: "pot" => word.replace(word[0], word[0].toUpperCase()); "pot".replace("p", "P"); return word => "Pot" End of the map() method */ }); // Step 4. Return the output return str.join(' '); // ["I'm", "A", "Little", "Tea", "Pot"].join(' ') => "I'm A Little Tea Pot" } titleCase("I'm a little tea pot");

Ohne Kommentare:

function titleCase(str) { return str.toLowerCase().split(' ').map(function(word) { return word.replace(word[0], word[0].toUpperCase()); }).join(' '); } titleCase("I'm a little tea pot");

Ich hoffe, Sie fanden das hilfreich. Dies ist Teil meiner Artikelserie „Wie man FCC-Algorithmen löst“ zu den Herausforderungen des Free Code Camp-Algorithmus, in der ich verschiedene Lösungen vorschlage und Schritt für Schritt erkläre, was unter der Haube passiert.

Drei Möglichkeiten, eine Zeichenfolge in JavaScript zu wiederholen

In this article, I’ll explain how to solve freeCodeCamp’s “Repeat a string repeat a string” challenge. This involves…

Two ways to confirm the ending of a String in JavaScript

In this article, I’ll explain how to solve freeCodeCamp’s “Confirm the Ending” challenge.

Three Ways to Reverse a String in JavaScript

This article is based on Free Code Camp Basic Algorithm Scripting “Reverse a String”

Three Ways to Factorialize a Number in JavaScript

This article is based on Free Code Camp Basic Algorithm Scripting “Factorialize a Number”

Two Ways to Check for Palindromes in JavaScript

This article is based on Free Code Camp Basic Algorithm Scripting “Check for Palindromes”.

Three Ways to Find the Longest Word in a String in JavaScript

This article is based on Free Code Camp Basic Algorithm Scripting “Find the Longest Word in a String”.

Three ways you can find the largest number in an array using JavaScript

In this article, I’m going to explain how to solve Free Code Camp’s “Return Largest Numbers in Arrays” challenge. This…

If you have your own solution or any suggestions, share them below in the comments.

Or you can follow me on Medium, Twitter, Github and LinkedIn.

‪#‎StayCurious‬, ‪#‎KeepOnHacking‬ & ‪#‎MakeItHappen‬!

Resources

  • toLowerCase() method — MDN
  • toUpperCase() method — MDN
  • charAt() method — MDN
  • slice() method — MDN
  • split() method — MDN
  • join() method — MDN
  • for — MDN
  • map() method — MDN
  • replace() method — MDN