"Капитализация каждого слова в строке на JavaScript"

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

Для того чтобы сделать первую букву каждого слова в строке заглавной, примените выражение .replace(/\b\w/g, c => c.toUpperCase()):

let city = "сан франциско";
let capitalized = city.replace(/\b\w/g, c => c.toUpperCase());
// "Сан Франциско"

Разбор быстрого ответа

Начальное преобразование для согласованности

Прежде, чем превращать буквы в заглавные, важно привести всю строку к одному, нижнему регистру:

let city = "сАН ФРАНциско";
let capitalized = city.toLowerCase().replace(/\b\w/g, c => c.toUpperCase());
// "Сан Франциско"

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

Выразительность синтаксиса ES6

С помощью ES6 возможно использовать стрелочные функции для создания более элегантного и компактного кода:

const capitalizeWords = str => str.toLowerCase().replace(/\b\w/g, c => c.toUpperCase());

Совмещая методы split(), map() и join()

Можно разделить строку на отдельные слова, поменять первую букву каждого слова на заглавную, а затем объединить их обратно:

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

Превосходство над JavaScript

Внедрение CSS

JavaScript может уступить место менеджменту регистра на уровне CSS:

.capitalize {
  text-transform: capitalize;
}

Затем это свойства можно динамически применить при помощи JavaScript:

element.style.textTransform = 'capitalize';

Специфические случаи

Имена с особыми правилами

Некоторые имена и фамилии, такие как "McDonald" или "O'Connell", требуют особого подхода:

function complexCapitalization(str) {
  return str.toLowerCase().replace(/(^\w|\b\w(?<!['’]\w))/g, c => c.toUpperCase());
}

Разделители, отличные от пробелов

В некоторых названиях, например "New York-Newark", используются нестандартные разделители:

const capitalizeWords = str => str
  .toLowerCase()
  .replace(/(^\w|\b\w|-\w)/g, c => c.toUpperCase());

Учет лингвистических особенностей

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

Производительность важна

С большими объемами данных или при частом выполнении операций производительность может упасть, поэтому выбирайте подходы разумно!

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

Если всё ещё неясно, представьте процесс как работу художника, который раскрашивает фасады домов 🏠, делая их уникально привлекательными.

Перед нами: [дом, восходящего, солнца]

Мы, как художники, добавляем яркий акцент:

Потом: [Дом, Восходящего, Солнца]

Мы делаем акцент на первую букву каждого слова:

city.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
// Выглядит потрясающе, не так ли?

И вот перед нами замечательный квартал, оживленный заглавными буквами! 🎩🏠🏠🏠🏠🏠

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

1. String toUpperCase() method in JavaScript – W3Schools — Усилим "громкость" верхнего регистра.
2. String charAt() method in JavaScript – W3Schools — Узнайте свои символы глубже.
3. String split() method in JavaScript – W3Schools — Готовы к хирургии текста?
4. String replace() method in JavaScript – W3Schools — Измените и верните, и никто не заметит.
5. Строки – Современный учебник JavaScript — Магия над строками в вашем ведении.
6. How to make the first letter of a string uppercase in JavaScript? – Stack Overflow — Откройте для себя мощь коллективных знаний.
7. String.prototype.toUpperCase() – JavaScript | MDN — Официальное руководство по использованию ВЕРХНЕГО РЕГИСТРА.