JavaScript: Как привести каждое слово строки к прописному?

Быстрый ответ

Преобразовать первые буквы слов в заглавные можно при помощи метода String.prototype.replace() со средствами регулярных выражений /\b\w/g, которое находит первую букву слова, и функции .toUpperCase(), преобразующей её в заглавную.

Пример кода:

const capitalize = s => s.replace(/\b\w/g, c => c.toUpperCase());

Пример использования:

console.log(capitalize('quick brown fox')); // Выведет: 'Quick Brown Fox'

Пошаговое объяснение

Погружение в регулярные выражения

Регулярное выражение /\b\w/g находит первые буквы слов в строке. В данном выражении \b означает границу слова, \w — любой символ слова, а флаг g включает глобальный поиск по всей строке.

Подробнее об этом расскажет наш спикер на видео

Эффект краткости благодаря ES6

Для наиболее элегантного решения задачи можно использовать возможности ES6:

const capitalizeWords = str => str.toLowerCase().split(' ').map(word => word.charAt(0).toUpperCase() + word.substring(1)).join(' ');

Распространённые ошибки в работе разработчиков

При модификации массива не забывайте применять изменения к нему. Например, метод map возвращает новый массив, а не модифицирует исходный.

Визуализация

Представьте буквы, как кирпичики (🧱), которые могут быть либо строчными, либо прописными. Вместе мы преобразуем их:

До:

кирпичики до: [🧱a 🧱b 🧱c 🧱d 🧱e 🧱f]

Проведем преобразование в прописные буквы:

function capitalizeWords(str) {
  return str.toLowerCase().replace(/(^|\s)\S/g, function(letter) {
    return letter.toUpperCase();
  });
}

После:

кирпичики после: [🧱A 🧱B 🧱C 🧱D 🧱E 🧱F]

Возможности за пределами капитализации и JavaScript

Категория ситуаций, когда CSS предпочтительнее

В некоторых случаях для визуальной модификации текста лучше применять свойство text-transform: capitalize; в CSS, оставляя исходные данные без изменений.

Использование JavaScript для динамического изменения

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

Овладение продвинутыми приемами

Применение методов массивов

Метод map() в JavaScript позволяет элегантно решить задачу с использованием стрелочных функций:

const capitalizeWords = str => str
  .toLowerCase()
  .split(' ')
  .map(word => word.charAt(0).toUpperCase() + word.slice(1))
  .join(' ');

Мощь регулярных выражений

Если вы ценитель регулярных выражений, вы оцените эффективность метода replace() в данном однострочном решении:

const capitalizeWords = str => str.replace(/(?:^|\s)\S/g, a => a.toUpperCase());

Важность тестирования

Тестируйте функциональность на различных строках, включая специальные символы и проверки на смешанный регистр. Не забывайте, что реальные данные редко бывают идеальными!

Нахождение баланса между читаемостью и сложностью кода

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

Полезные материалы

1. String.prototype.replace() — JavaScript | MDN
2. Регулярные выражения — JavaScript | MDN
3. String.prototype.toUpperCase() — JavaScript | MDN
4. Метод String.split() — JavaScript
5. Метод String.trim() — JavaScript
6. Как преобразовать первую букву каждого слова в строке в заглавную с помощью JavaScript – урок по использованию верхнего регистра в JS