Рубрики
Без рубрики

Как сделать первую букву каждого слова заглавной в JavaScript – учебник по прописным буквам в JS

В этой статье вы узнаете, как сделать первую букву любого слова в JavaScript заглавной. После этого вы научитесь изменять регистр первой буквы всех слов в предложении. Самое прекрасное в программировании то, что не существует универсального решения этой задачи.

Автор оригинала: Catalin Pit

В этой статье вы узнаете, как написать первую букву любого слова в JavaScript. После этого вы научитесь писать первую букву всех слов в предложении.

Самое прекрасное в программировании – это то, что не существует универсального решения проблемы. Поэтому в этой статье вы увидите несколько способов решения одной и той же задачи.

Написание первой буквы слова в верхнем регистре

Прежде всего, давайте начнем с написания первой буквы одного слова. После того как вы научитесь это делать, мы перейдем на следующий уровень – будем делать это для каждого слова в предложении. Вот пример:

const publication = "freeCodeCamp";

В JavaScript мы начинаем считать с 0. Например, если у нас есть массив, первой позицией будет 0, а не 1.

Кроме того, мы можем получить доступ к каждой букве из строки так же, как и к элементу из массива. Например, первая буква в слове “freeCodeCamp” находится в позиции 0.

Это означает, что мы можем получить букву f из freeCodeCamp, выполнив команду publication[0].

Таким же образом можно получить доступ к другим буквам из слова. Вы можете заменить “0” на любое число, если не превысите длину слова. Под превышением длины слова я имею в виду попытку сделать что-то вроде publication[25], которая приводит к ошибке, поскольку в слове “freeCodeCamp” всего двенадцать букв.

Как сделать первую букву заглавной

Теперь, когда мы знаем, как получить доступ к букве из слова, давайте назовем ее заглавной.

В JavaScript есть метод toUpperCase(), который мы можем вызывать для строк или слов. Как можно понять из названия, вы вызываете его на строке/слове, и он возвращает то же самое, но в верхнем регистре.

Например:

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

Выполнив приведенный выше код, вы получите заглавную F вместо f. Чтобы вернуть целое слово, мы можем сделать следующее:

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

Теперь он соединяет “F” с “reeCodeCamp“, то есть мы получаем слово “FreeCodeCamp“. Вот и все!

Подведем итоги

Чтобы все было понятно, давайте подытожим то, что мы узнали до сих пор:

В JavaScript счет начинается с 0.

  • Мы можем получить доступ к букве из строки так же, как к элементу из массива – например, string[index].
  • Не используйте индекс, превышающий длину строки (используйте метод length – string.length – для определения диапазона, который можно использовать).
  • Используйте встроенный метод toUpperCase() для буквы, которую вы хотите перевести в верхний регистр.

Заглавная буква каждого слова из строки

Следующий шаг – взять предложение и выделить заглавными буквами каждое слово из этого предложения. Возьмем следующее предложение:

const mySentence = "freeCodeCamp is an awesome resource";

Разделите его на слова

Мы должны написать первую букву каждого слова из предложения freeCodeCamp – это потрясающий ресурс.

Первый шаг, который мы сделаем, – это разделим предложение на ряд слов. Зачем? Чтобы мы могли манипулировать каждым словом по отдельности. Мы можем сделать это следующим образом:

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

Итерация по каждому слову

После выполнения приведенного выше кода переменной words присваивается массив с каждым словом из предложения. Массив имеет следующий вид [“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);
}

Теперь следующим шагом будет перебор массива слов и выделение заглавной буквы каждого слова.

В приведенном выше коде каждое слово берется отдельно. Затем происходит капитализация первой буквы, и в конце происходит конкатенация капитализированной первой буквы с остальной частью строки.

Объединяем слова

Что делает приведенный выше код? Он перебирает каждое слово и заменяет его заглавной первой буквой + остальной строкой.

Если взять в качестве примера слово “freeCodeCamp“, то оно будет выглядеть следующим образом freeCodeCamp = F + reeCodeCamp.

После перебора всех слов массив слов будет выглядеть так [“FreeCodeCamp”, “Is”, “An”, “Awesome”, “Resource”]. Однако мы имеем массив, а не строку, что не является тем, что нам нужно.

Последний шаг – соединить все слова в предложение. Как же это сделать?

В JavaScript есть метод join, который мы можем использовать для возврата массива в виде строки. В качестве аргумента метод принимает разделитель. То есть, мы указываем, что добавить между словами, например, пробел.

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

В приведенном выше фрагменте кода мы можем видеть метод join в действии. Мы вызываем его на массиве слов и указываем разделитель, которым в нашем случае является пробел.

Таким образом, [“FreeCodeCamp”, “Is”, “An”, “Awesome”, “Resource”] становится FreeCodeCamp Is An Awesome Resource.

Другие методы

В программировании, как правило, существует несколько способов решения одной и той же задачи. Поэтому давайте посмотрим на другой подход.

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

words.map((word) => { 
    return word[0].toUpperCase() + word.substring(1); 
}).join(" ");

В чем разница между приведенным выше решением и исходным решением? Эти два решения очень похожи, разница в том, что во втором решении мы используем функцию map, в то время как в первом решении мы использовали цикл for.

Давайте пойдем еще дальше и попробуем сделать однострочный цикл. Будьте внимательны! Однострочные решения могут выглядеть круто, но в реальном мире они редко используются, потому что их сложно понять. Читабельность кода всегда стоит на первом месте.

const mySentence = "freeCodeCamp is an awesome resource";

const finalSentence = mySentence.replace(/(^\w{1})|(\s+\w{1})/g, letter => letter.toUpperCase());

Приведенный выше код использует RegEx для преобразования букв. RegEx может показаться запутанным, поэтому позвольте мне объяснить, что происходит:

  • ^ совпадает с началом строки.
  • \w берет любой символ слова.
  • {1} принимает только первый символ.
  • Таким образом, ^\w{1} соответствует первой букве слова.
  • | работает как булево ИЛИ. Оно совпадает с выражением после и до |.
  • \s+ соответствует любому количеству пробелов между словами (например, пробелы, табуляция или перевод строки).

Таким образом, с помощью одной строки мы выполнили то же самое, что и в приведенных выше решениях. Если вы хотите поиграть с RegEx и узнать больше, вы можете воспользоваться этим сайтом.

Заключение

Поздравляем, сегодня вы узнали что-то новое! Вкратце, в этой статье вы узнали, как:

  • получать доступ к символам из строки
  • писать первую букву слова заглавными буквами
  • разбивать строку на массив слов
  • объединять слова из массива в строку
  • использовать RegEx для выполнения той же задачи

Оригинал: “https://www.freecodecamp.org/news/how-to-capitalize-words-in-javascript/”

Читайте ещё по теме: