Как перевести строчный текст в заглавный?

Преобразование строки в заглавный текст

Это базовая задача строковой манипуляции в JavaScript. Существует несколько способов в зависимости от требований.

1. Базовый способ: toUpperCase()

Преобразует все буквы в заглавные:

const text = 'Hello World';
const uppercase = text.toUpperCase();
console.log(uppercase); // HELLO WORLD

Это просто и быстро, но преобразует ВСЮ строку.

2. Первая буква заглавная: charAt() + slice()

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

const text = 'hello world';
const capitalized = text.charAt(0).toUpperCase() + text.slice(1);
console.log(capitalized); // Hello world

3. Первая буква заглавная: более элегантно

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

console.log(capitalize('hello')); // Hello
console.log(capitalize('WORLD')); // WORLD

4. Capitalize каждое слово (Title Case)

Частая задача - заглавная первая буква в каждом слове:

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

console.log(toTitleCase('hello world from javascript'));
// Hello World From Javascript

5. С использованием регулярных выражений

Для более сложных случаев (пунктуация, спецсимволы):

const toTitleCase = (str) => {
  return str.replace(/\b\w/g, (char) => char.toUpperCase());
};

console.log(toTitleCase('hello-world and some-text'));
// Hello-World And Some-Text

// Или более гибко - только после пробелов
const capitalize = (str) => {
  return str.replace(/(^|\s)\w/g, (match) => match.toUpperCase());
};

6. CSS решение: text-transform

В браузере для визуального отображения можно использовать CSS:

export function Title({ text }) {
  return <h1 className='uppercase'>{text}</h1>;
}

.uppercase {
  text-transform: uppercase; /* HELLO WORLD */
}

.capitalize {
  text-transform: capitalize; /* Hello world */
}

.title-case {
  text-transform: uppercase; /* требует JS для правильного title case */
}

7. React компонент для реиспользования

Если часто нужна эта функция, создай утилиту:

// lib/string.utils.ts
export const capitalize = (str: string): string => {
  return str.charAt(0).toUpperCase() + str.slice(1);
};

export const toUpperCase = (str: string): string => {
  return str.toUpperCase();
};

export const toTitleCase = (str: string): string => {
  return str
    .toLowerCase()
    .split(' ')
    .map(word => capitalize(word))
    .join(' ');
};

// Использование
import { capitalize } from '@/lib/string.utils';

const userName = capitalize(user.name); // john -> John

8. Обработка locale-specific символов

Для языков с диакритическими знаками:

const capitalize = (str: string, locale = 'en-US'): string => {
  return str.charAt(0).toLocaleUpperCase(locale) + str.slice(1);
};

// Тюркский язык имеет спецсимволы для I
console.log(capitalize('istanbul', 'tr-TR')); // Istanbul (правильно для турецкого)

Когда какой способ использовать

• toUpperCase() - когда нужно ВСЁ в заглавных
• charAt(0).toUpperCase() + slice(1) - быстрый и понятный способ для первой буквы
• text-transform в CSS - только для визуального отображения (не меняет данные)
• Регулярные выражения - для сложных паттернов и обработки пунктуации
• Утилиты в lib/ - для переиспользования в проекте

Лучшая практика: создай helper функцию в lib/ и переиспользуй её везде, это упростит изменения в будущем.