Tre modi per intitolare una frase in JavaScript

Questo articolo è basato sullo scripting dell'algoritmo di base di Free Code Camp " Title Case a Sentence ".

In questo algoritmo , vogliamo modificare una stringa di testo in modo che abbia sempre una lettera maiuscola all'inizio di ogni parola.

In questo articolo spiegherò tre approcci. Primo con un ciclo FOR, secondo usando il metodo map () e terzo usando il metodo replace ().

Algorithm Challenge

Restituisce la stringa fornita con la prima lettera di ogni parola in maiuscolo. Assicurati che il resto della parola sia in minuscolo.

Ai fini di questo esercizio, dovresti anche scrivere in maiuscolo le parole di collegamento come "il" e "di".

Casi di test forniti

  • titleCase ("I'm a little tea pot") dovrebbe restituire una stringa.
  • titleCase ("I'm a little tea pot") dovrebbe restituire "I'm A Little Tea Pot".
  • titleCase ("sHoRt And sToUt") dovrebbe restituire "Short And Stout".
  • titleCase ("ECCO LA MIA MANIGLIA ECCO IL MIO BECCUCCIO") dovrebbe restituire "Ecco il mio manico, ecco il mio beccuccio".

1. Titolo maiuscolo una frase con un ciclo FOR

Per questa soluzione, utilizzeremo il metodo String.prototype.toLowerCase (), il metodo String.prototype.split (), il metodo String.prototype.charAt (), il metodo String.prototype.slice () e Array. metodo prototype.join ().

  • Il metodo toLowerCase () restituisce il valore della stringa chiamante convertito in minuscolo
  • Il metodo split () divide un oggetto String in un array di stringhe separando la stringa in sottostringhe.
  • Il metodo charAt () restituisce il carattere specificato da una stringa.
  • Il metodo slice () estrae una sezione di una stringa e restituisce una nuova stringa.
  • Il metodo join () unisce tutti gli elementi di un array in una stringa.

Dovremo aggiungere uno spazio vuoto tra le parentesi del metodo split () ,

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

che produrrà un array di parole separate:

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

Se non aggiungi lo spazio tra parentesi, avrai questo output:

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

Ci concateneremo

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

- che metterà in maiuscolo il carattere indice 0 della stringa corrente nel ciclo FOR -

e

str[i].slice(1)

- che estrarrà dall'indice 1 alla fine della stringa.

Impostare l'intera stringa in minuscolo per scopi di normalizzazione.

Con commenti:

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

Senza commenti:

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. Titolo Case a frase con il metodo map ()

Per questa soluzione, useremo il metodo Array.prototype.map ().

  • Il metodo map () crea un nuovo array con i risultati della chiamata di una funzione fornita su ogni elemento di questo array. L'uso di map chiamerà una funzione di callback fornita una volta per ogni elemento in un array, in ordine, e costruirà un nuovo array dai risultati.

Metteremo in minuscolo e divideremo la stringa come visto nell'esempio precedente prima di applicare il metodo map ().

Invece di usare un ciclo FOR, applicheremo il metodo map () come condizione sulla stessa concatenazione dell'esempio precedente.

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

Con commenti:

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

Senza commenti:

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. Titolo Case a frase con i metodi map () e replace ()

Per questa soluzione, continueremo a utilizzare il metodo Array.prototype.map () e aggiungeremo il metodo String.prototype.replace ().

  • Il metodo replace () restituisce una nuova stringa con alcune o tutte le corrispondenze di un modello sostituite da una sostituzione.

Nel nostro caso, il modello per il metodo replace () sarà una stringa da sostituire con una nuova sostituzione e verrà trattata come una stringa letterale. Possiamo anche usare un'espressione regolare come modello per risolvere questo algoritmo.

Metteremo in minuscolo e divideremo la stringa come visto nel primo esempio prima di applicare il metodo map ().

Con commenti:

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

Senza commenti:

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

Spero tu l'abbia trovato utile. Questo fa parte della mia serie di articoli "Come risolvere gli algoritmi FCC" sulle sfide dell'algoritmo di Free Code Camp, in cui propongo diverse soluzioni e spiego passo dopo passo cosa succede sotto il cofano.

Tre modi per ripetere una stringa in JavaScript

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