Три способи озаглавити речення у JavaScript

Ця стаття заснована на сценарії базового алгоритму табору Free Code Camp “ Заголовок - вирок ”.

У цьому алгоритмі ми хочемо змінити рядок тексту, щоб він завжди мав велику літеру на початку кожного слова.

У цій статті я збираюся пояснити три підходи. Спочатку з циклом FOR, другий за допомогою методу map () і третій за допомогою методу replace ().

Виклик алгоритму

Поверніть наданий рядок із першою літерою кожного слова з великої літери. Переконайтеся, що решта слова введено малими літерами.

Для цілей цієї вправи ви також повинні писати великі сполучні слова, такі як “the” та “of”.

Надані тестові кейси

  • titleCase ("Я маленький чайник") повинен повернути рядок.
  • titleCase ("Я маленький чайник") повинен повернути "Я маленький чайник".
  • titleCase (“sHoRt AnD sToUt”) повинен повернути “Short And Stout”.
  • titleCase («ТУТ МОЯ РУЧКА ТУТ МІЙ ВИПУСК») повинен повернути «Here Is My Handle Here Is My Spout».

1. Титульний випадок - вирок із циклом FOR

Для цього рішення ми використаємо метод String.prototype.toLowerCase (), метод String.prototype.split (), метод String.prototype.charAt (), метод String.prototype.slice () та масив. метод prototype.join ().

  • Метод toLowerCase () повертає викличне значення рядка, перетворене в нижній регістр
  • Метод split () розбиває об'єкт String на масив рядків, відокремлюючи рядок на підрядки.
  • Метод charAt () повертає вказаний символ із рядка.
  • Метод slice () витягує розділ рядка і повертає новий рядок.
  • Метод join () об’єднує всі елементи масиву у рядок.

Нам потрібно буде додати порожній пробіл між дужками методу split () ,

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

який виведе масив розділених слів:

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

Якщо ви не додасте пробіл у дужках, ви отримаєте такий результат:

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

Ми об’єднаємось

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

- який буде прописувати символ індексу 0 поточного рядка у циклі FOR -

і

str[i].slice(1)

- який буде вилучено з індексу 1 до кінця рядка.

Для цілей нормалізації ми встановимо весь рядок у нижній регістр.

З коментарями:

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

Без коментарів:

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. Заголовок Речення і речення З методом map ()

Для цього рішення ми будемо використовувати метод Array.prototype.map ().

  • Метод map () створює новий масив з результатами виклику наданої функції для кожного елемента цього масиву. Використання map викликає надану функцію зворотного виклику один раз для кожного елемента масиву, по порядку, і створює новий масив з результатів.

Перед застосуванням методу map () ми будемо використовувати нижній регістр та розділяти рядок, як показано в попередньому прикладі.

Замість того, щоб використовувати цикл FOR, ми застосуємо метод map () як умову до тієї ж конкатенації з попереднього прикладу.

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

З коментарями:

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

Без коментарів:

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. Заголовок Речення і речення З методами map () та replace ()

Для цього рішення ми продовжуватимемо використовувати метод Array.prototype.map () та додамо метод String.prototype.replace ().

  • Метод replace () повертає новий рядок із деяким або всіма збігами шаблону, заміненого заміною.

У нашому випадку шаблоном для методу replace () буде рядок, який замінюється новим, і буде розглядатися як дослівний рядок. Ми також можемо використовувати регулярний вираз як шаблон для розв’язання цього алгоритму.

Перед застосуванням методу map () ми будемо писати та розбивати рядок, як показано в першому прикладі.

З коментарями:

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

Без коментарів:

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

Сподіваюсь, вам це було корисно. Це частина моєї серії “Як вирішити алгоритми FCC” про виклики, пов’язані з алгоритмом табору вільного коду, де я пропоную кілька рішень і покроково пояснюю, що відбувається під капотом.

Три способи повторити рядок у 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