String

String — неизменяемая последовательность символов UTF-16, используемая для представления текстовых данных.

Зачем нужно

Строки — основной способ работы с текстом: имена, сообщения, URL, HTML, JSON. Знание строковых методов критично для обработки пользовательского ввода и вывода.

Где используется

  • Отображение текста на странице
  • Обработка пользовательского ввода
  • Работа с URL и query-параметрами
  • Формирование HTML
  • Парсинг и валидация данных

Предпосылки

Типы данных

Создание строк

// Три способа создания литералов
const single = 'одинарные кавычки';
const double = "двойные кавычки";
const backtick = `обратные кавычки (template literals)`;

// Экранирование
const escaped = 'It\'s OK';
const newLine = 'Первая строка\nВторая строка';
const tab = 'Колонка1\tКолонка2';
const backslash = 'Путь: C:\\Users\\admin';

// Template literals (шаблонные строки)
const name = 'Алиса';
const age = 25;
const greeting = `Привет, ${name}! Тебе ${age} лет.`;
// "Привет, Алиса! Тебе 25 лет."

// Выражения в шаблонах
const price = 100;
const tax = 0.2;
console.log(`Итого: ${price * (1 + tax)} руб.`); // "Итого: 120 руб."

// Многострочные строки
const multiline = `
  Первая строка
  Вторая строка
  Третья строка
`;

Свойства и доступ к символам

const str = 'JavaScript';

// Длина
console.log(str.length); // 10

// Доступ к символу
console.log(str[0]);       // 'J'
console.log(str.at(0));    // 'J'
console.log(str.at(-1));   // 't' (с конца — ES2022)
console.log(str.charAt(0)); // 'J'

// Строки неизменяемы
str[0] = 'j';
console.log(str); // 'JavaScript' — не изменилось

Основные методы

Поиск

const text = 'Привет, мир! Привет, JavaScript!';

// indexOf / lastIndexOf — возвращают индекс или -1
text.indexOf('Привет');       // 0
text.lastIndexOf('Привет');   // 13
text.indexOf('Python');       // -1

// includes — есть ли подстрока (boolean)
text.includes('мир');         // true
text.includes('Python');      // false

// startsWith / endsWith
text.startsWith('Привет');    // true
text.endsWith('!');           // true

// search — с регулярным выражением
text.search(/\d+/);           // -1 (цифр нет)
'Цена: 100 руб'.search(/\d+/); // 6

Извлечение подстроки

const str = 'JavaScript';

// slice(start, end) — рекомендуемый способ
str.slice(0, 4);    // 'Java'
str.slice(4);       // 'Script'
str.slice(-6);      // 'Script' (с конца)
str.slice(-6, -3);  // 'Scr'

// substring(start, end) — похож на slice, но без отрицательных
str.substring(0, 4); // 'Java'
str.substring(4, 0); // 'Java' (меняет местами если start > end)

// Устаревший: substr(start, length)
str.substr(4, 3);   // 'Scr' — лучше не использовать

Преобразование регистра

const str = 'Hello World';
str.toUpperCase();   // 'HELLO WORLD'
str.toLowerCase();   // 'hello world'

// Первая буква заглавная
function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}
capitalize('привет'); // 'Привет'

Удаление пробелов

const messy = '  Привет, мир!  ';
messy.trim();       // 'Привет, мир!'
messy.trimStart();  // 'Привет, мир!  '
messy.trimEnd();    // '  Привет, мир!'

Замена

const text = 'Кот сидел. Кот спал.';

// replace — первое вхождение
text.replace('Кот', 'Пёс');     // 'Пёс сидел. Кот спал.'

// replaceAll — все вхождения (ES2021)
text.replaceAll('Кот', 'Пёс');  // 'Пёс сидел. Пёс спал.'

// С регулярным выражением
text.replace(/Кот/g, 'Пёс');    // 'Пёс сидел. Пёс спал.'

// Callback в replace
'2+3=5'.replace(/\d+/g, match => match * 2);
// '4+6=10'

Разделение и соединение

// split — строка в массив
'a,b,c'.split(',');          // ['a', 'b', 'c']
'Привет мир'.split(' ');     // ['Привет', 'мир']
'hello'.split('');           // ['h', 'e', 'l', 'l', 'o']
'a,,b'.split(',');           // ['a', '', 'b']

// split с лимитом
'a,b,c,d'.split(',', 2);    // ['a', 'b']

// join — массив в строку (метод Array)
['a', 'b', 'c'].join(', '); // 'a, b, c'
['2026', '04', '06'].join('-'); // '2026-04-06'

Повторение и заполнение

// repeat
'ha'.repeat(3);     // 'hahaha'
'-'.repeat(20);     // '--------------------'

// padStart / padEnd
'5'.padStart(3, '0');    // '005'
'42'.padStart(5, ' ');   // '   42'
'hi'.padEnd(10, '.');    // 'hi........'

// Практическое применение — форматирование
function formatTime(h, m, s) {
  return [h, m, s].map(n => String(n).padStart(2, '0')).join(':');
}
formatTime(9, 5, 3); // '09:05:03'

Tagged Template Literals

// Функция перед шаблонной строкой
function highlight(strings, ...values()) {
  return strings.reduce((result, str, i) => {
    return result + str + (values[i] ? `<b>${values[i]}</b>` : '');
  }, '');
}

const name = 'Алиса';
const age = 25;
const html = highlight`Имя: ${name}, Возраст: ${age}`;
// "Имя: <b>Алиса</b>, Возраст: <b>25</b>"

// String.raw — без обработки escape-последовательностей
console.log(String.raw`Путь: C:\Users\admin\n`);
// "Путь: C:\Users\admin\n" (не интерпретирует \n)

Итерация по строке

const str = 'Привет';

// for...of (работает с Unicode)
for (const char of str) {
  console.log(char); // П, р, и, в, е, т
}

// Spread в массив
const chars = [...str]; // ['П', 'р', 'и', 'в', 'е', 'т']

// Array.from
Array.from(str); // ['П', 'р', 'и', 'в', 'е', 'т']

Частые ошибки

1. Строки неизменяемы

let str = 'hello';
str[0] = 'H';     // Не работает!
str = 'H' + str.slice(1); // Создай новую строку

2. Сравнение строк с числами

console.log('10' > '9');  // false! Посимвольное сравнение: '1' < '9'
console.log(+'10' > +'9'); // true — преобразуй в числа

3. Длина Unicode строк

// Некоторые символы занимают 2 кодовых единицы
console.log('😀'.length); // 2 (не 1!)
console.log([...'😀'].length); // 1 — правильный подсчёт

Практика

  1. Напиши функцию truncate(str, maxLength) — обрезает строку и добавляет "..."
  2. Напиши функцию countWords(str) — считает слова в строке
  3. Преобразуй "hello-world-test" в "helloWorldTest" (camelCase)
  4. Напиши функцию для проверки палиндрома

Связанные темы

Ресурсы