Tres formas de poner un título a una oración en JavaScript

Programación

Este artículo se basa en el Scripting del algoritmo básico de Free Code Camp “ Título de caso una oración ”.

En este algoritmo , queremos cambiar una cadena de texto para que siempre tenga una letra mayúscula al comienzo de cada palabra.

En este artículo, voy a explicar tres enfoques. Primero con un bucle FOR, segundo usando el método map () y tercero usando el método replace ().

Desafío del algoritmo

Devuelve la cadena proporcionada con la primera letra de cada palabra en mayúscula. Asegúrese de que el resto de la palabra esté en minúsculas.

A los efectos de este ejercicio, también debe usar mayúsculas para conectar palabras como "el" y "de".

Casos de prueba proporcionados

  • titleCase ("Soy una tetera") debería devolver una cadena.
  • titleCase ("Soy una pequeña tetera") debería devolver "Soy una pequeña tetera".
  • titleCase ("sHoRt y sToUt") debe devolver "Short And Stout".
  • titleCase ("AQUÍ ESTÁ MI MANIJA, AQUÍ ESTÁ MI PICO") debería devolver "Aquí está mi asa Aquí está mi pico".

1. Título de una oración con un bucle FOR

Para esta solución, usaremos el método String.prototype.toLowerCase (), el método String.prototype.split (), el método String.prototype.charAt (), el método String.prototype.slice () y el Array. método prototype.join ().

  • El método toLowerCase () devuelve el valor de la cadena de llamada convertido a minúsculas
  • El método split () divide un objeto String en una matriz de cadenas separando la cadena en subcadenas.
  • El método charAt () devuelve el carácter especificado de una cadena.
  • El método slice () extrae una sección de una cadena y devuelve una nueva cadena.
  • El método join () une todos los elementos de una matriz en una cadena.

Necesitaremos agregar un espacio vacío entre el paréntesis del método split () ,

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

que generará una matriz de palabras separadas:

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

Si no agrega el espacio entre paréntesis, tendrá este resultado:

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

Nosotros concatenamos

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

- que pondrá en mayúsculas el carácter de índice 0 de la cadena actual en el bucle FOR -

y

str[i].slice(1)

- que se extraerá del índice 1 hasta el final de la cadena.

Configuraremos toda la cadena en minúsculas para fines de normalización.

Con comentarios:

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

Sin comentarios:

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. Título de una oración con el método map ()

Para esta solución, usaremos el método Array.prototype.map ().

  • El método map () crea una nueva matriz con los resultados de llamar a una función proporcionada en cada elemento de esta matriz. El uso de map llamará a una función de devolución de llamada proporcionada una vez para cada elemento de una matriz, en orden, y construirá una nueva matriz a partir de los resultados.

Daremos minúsculas y dividiremos la cadena como se ve en el ejemplo anterior antes de aplicar el método map ().

En lugar de usar un bucle FOR, aplicaremos el método map () como condición en la misma concatenación del ejemplo anterior.

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

Con comentarios:

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

Sin comentarios:

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. Título de una oración con los métodos map () y replace ()

Para esta solución, seguiremos usando el método Array.prototype.map () y agregaremos el método String.prototype.replace ().

  • The replace() method returns a new string with some or all matches of a pattern replaced by a replacement.

In our case, the pattern for the replace() method will be a String to be replaced by a new replacement and will be treated as a verbatim string. We can also use a regular expression as the pattern to solve this algorithm.

We will lowercase and split the string as seen in the first example before applying the map() method.

With comments:

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

Without comments:

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

I hope you found this helpful. This is part of my “How to Solve FCC Algorithms” series of articles on the Free Code Camp Algorithm Challenges, where I propose several solutions and explain step-by-step what happens under the hood.

Three ways to repeat a string 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