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

Открой Python и напиши "iPhone".capitalize(). Ответ: "Iphone". Команда «сделай первую букву заглавной» заодно сделала все остальные строчными. И бренд испорчен.

В JavaScript готовой команды нет вовсе. Поэтому каждый пишет свою — и почти каждый спотыкается о пустую строку, кавычку в начале или турецкую «i». Ниже — шесть шагов к версии, которая не ломается.

Пошагово: заглавная первая буква

1. Реши, что именно тебе нужно.

Есть две разные задачи, и у них похожие имена:

• «Подними первую» (upper first): иван → Иван, iPhone → IPhone. Остальное не трогаем.
• «Капитализируй» (capitalize): иВАН → Иван. Первая заглавная, остальные строчные.

В библиотеке lodash это _.upperFirst и _.capitalize. В Python capitalize() — второй вариант. Для текста от людей почти всегда нужен первый. Второй ломает «iPhone», «McDonald» и «ООО».

2. Напиши базовую версию — безопасно.

Первое, что пишут все:

s[0].toUpperCase() + s.slice(1)

На пустой строке это падает: Cannot read properties of undefined (reading 'toUpperCase'). У пустой строки нет нулевого символа — там undefined. А пустые поля в формах бывают постоянно.

Почини одной заменой — charAt вместо квадратных скобок:

s.charAt(0).toUpperCase() + s.slice(1)

charAt(0) у пустой строки вернёт пустую строку, а не undefined. Ничего не падает. Почему строки ведут себя именно так — в статье что такое строка.

3. Пропусти всё, что не буква.

Строка «привет» начинается с кавычки. Строка иван — с пробелов. Базовая версия честно «поднимет» кавычку, и ничего не изменится.

Найди первую букву регулярным выражением:

s.replace(/\p{L}/u, (ch) => ch.toUpperCase())

\p{L} — «любая буква любого алфавита»: кириллица, латиница, греческий. Флаг u обязателен, без него \p{L} не работает. replace без флага g заменит только первое совпадение — то, что нам и нужно.

Проверь: «привет» → «Привет», иван → Иван.

Осторожно с цифрами: 2 яблока станет 2 Яблока. Если строка может начинаться с числа — реши, хочешь ли ты этого. Часто проще почистить пробелы через trim() и поднимать только первый символ.

4. Учти язык.

В турецком у буквы i заглавная — İ, с точкой. Обычный toUpperCase() этого не знает:

"istanbul".toUpperCase()            // "ISTANBUL"
"istanbul".toLocaleUpperCase("tr")  // "İSTANBUL"

Если у тебя мультиязычное приложение, бери toLocaleUpperCase и передавай язык интерфейса. Для русского и английского разницы нет — но код будет готов к остальным.

Ещё два сюрприза: немецкая ß в верхнем регистре становится SS — длина строки меняется. А нидерландский ijsselmeer по правилам пишется IJsselmeer, с двумя заглавными. JavaScript так не умеет — это уже ручная работа.

5. Если нужно только для экрана — сделай это в CSS.

Часто менять данные не нужно. Нужно, чтобы на экране было красиво. Тогда:

.label::first-letter {
  text-transform: uppercase;
}

::first-letter работает на блочных элементах (p, div, li). На span — нет, если не сделать его display: inline-block. Плюс подхода: в данных всё остаётся как было. Форма отправит и база сохранит исходный текст.

Не путай с text-transform: capitalize — он поднимает каждое слово. «Мария де ла Круз» станет «Мария Де Ла Круз».

6. Не исправляй людям имена.

Если пользователь ввёл van Gogh, McDonald или д’Артаньян — это не ошибки. Никогда не применяй к именам «капитализацию» из шага 1, она сотрёт заглавные внутри. Максимум — поднять первую букву, если человек вообще всё написал строчными. Похожая логика нужна и в масках ввода: помогай, но не переписывай за человека.

Что получится

Одна маленькая функция, которую можно вставлять в любой проект:

function upperFirst(s, locale = "ru") {
  return s.replace(/\p{L}/u, (ch) => ch.toLocaleUpperCase(locale))
}

upperFirst("")          // ""
upperFirst("«привет»")  // "«Привет»"
upperFirst("iPhone")    // "IPhone"
upperFirst("istanbul", "tr") // "İstanbul"

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

Почему нет встроенной функции capitalize в JavaScript?

Потому что правило зависит от языка и от задачи — см. шаг 1 и шаг 4. Стандарт предпочёл дать кирпичики (toLocaleUpperCase, регулярки), а не одну функцию, которая будет неправа для половины мира.

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

Добавь флаг g и границу слова: s.replace(/(^|\s)\p{L}/gu, (m) => m.toLocaleUpperCase("ru")). Но для заголовков в русском так не пишут — заглавной делают только первое слово.

Попросить ИИ — это нормально?

Да, но уточни задачу. Промпт: «Напиши функцию upperFirst на JavaScript: только первая буква заглавная, остальное не трогать, пустая строка не должна падать, пропускать кавычки и пробелы в начале». Без этих условий ИИ почти всегда напишет s[0].toUpperCase().