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

Правильный способ: комбинация charAt, toUpperCase и slice

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

Основная идея:

• Извлечь первый символ — str[0] или str.charAt(0)
• Сделать его заглавным — .toUpperCase()
• Взять остальную часть строки — str.slice(1)
• Соединить через конкатенацию или шаблонные строки

Вот рабочий код с пояснениями:

function capitalizeFirstLetter(str) {
  // 1. Проверяем, что строка не пустая
  if (!str) return '';
  
  // 2. Берём первый символ и делаем его заглавным
  const firstChar = str[0].toUpperCase();
  
  // 3. Берём остальную часть строки (с 1-го индекса до конца)
  const rest = str.slice(1);
  
  // 4. Соединяем результат
  return firstChar + rest;
}

// Тесты
console.log(capitalizeFirstLetter("hello"));      // "Hello"
console.log(capitalizeFirstLetter("world"));      // "World"
console.log(capitalizeFirstLetter(""));           // ""
console.log(capitalizeFirstLetter("JavaScript")); // "JavaScript" (уже заглавная)

Разбор важных моментов

1. Почему str[0], а не charAt(0)?
Оба варианта работают, но str[0] короче и современнее. charAt(0) — это старый метод, который нужен был для обратной совместимости со старыми браузерами. Сейчас можно смело использовать квадратные скобки.

2. Зачем нужен slice(1)?
Метод slice(start, end) возвращает часть строки. slice(1) означает "взять символы начиная с индекса 1 и до конца". Если строка "hello", то slice(1) вернёт "ello". Если строка состоит из одного символа "H", то slice(1) вернёт пустую строку, что тоже корректно.

3. Обработка пустой строки
Без проверки if (!str) код упадёт с ошибкой, потому что у пустой строки нет первого символа. Проверка if (!str) сработает для null, undefined и пустой строки.

4. Что будет, если строка уже с заглавной?
Ничего страшного — toUpperCase() на уже заглавной букве просто вернёт её же. Функция остаётся корректной.

Сокращённый вариант (одной строкой)

Для опытных разработчиков можно записать компактнее:

const capitalize = str => str ? str[0].toUpperCase() + str.slice(1) : '';

Работа с предложениями (каждое слово)

Если нужно сделать заглавной первую букву каждого слова (title case), используйте комбинацию split и map:

function capitalizeWords(str) {
  return str
    .split(' ')
    .map(word => word ? word[0].toUpperCase() + word.slice(1) : '')
    .join(' ');
}

console.log(capitalizeWords("hello world")); // "Hello World"

Важные замечания

• Метод toUpperCase() корректно работает с буквами не только английского, но и русского алфавита: "привет" → "Привет"
• Если строка начинается с пробела, то str[0] будет пробелом, и функция сделает заглавным именно пробел (что не имеет смысла). Для таких случаев нужно предварительно удалять пробелы через str.trim()
• Метод slice не изменяет исходную строку — строки в JavaScript неизменяемы (immutable)

Это самое простое и надёжное решение. Понимание этих базовых операций со строками — важный шаг в освоении JavaScript.

function capitalizeFirstLetter(str) {
  return str.replace(/^./, char => char.toUpperCase());
}

// Тесты
console.log(capitalizeFirstLetter("hello")); // "Hello"
console.log(capitalizeFirstLetter(""));      // "" (без ошибки)