Строки в JavaScript: методы и шаблонные литералы

О проверке кода. Примеры не запускались — в отличие от материалов по Node.js с фактическим выводом. Говорим прямо, а не ставим бейдж «проверено».

Строка — один из базовых типов данных, и работа с текстом есть почти в любой программе. Разберём современные методы и типовые ловушки.

Шаблонные литералы

const name = 'Аня';
const age = 30;

// ❌ старая конкатенация
const s1 = 'Привет, ' + name + '! Тебе ' + age + ' лет.';

// ✅ шаблонный литерал (обратные кавычки)
const s2 = `Привет, ${name}! Тебе ${age} лет.`;

// многострочность без \n
const html = `
  <div>${name}</div>
  <span>${age}</span>
`;

Обратные кавычки с ${...} заменили конкатенацию через +. Внутри ${} — любое выражение: ${age + 1}, ${user.name}, ${cond ? 'a' : 'b'}. Плюс многострочность без \n. Это стандарт из ECMAScript 6, старый + для сборки строк почти не используют.

Поиск и проверка

const str = 'Node.js — это среда выполнения';

str.includes('среда');      // true  — есть ли подстрока
str.startsWith('Node');     // true  — начинается с
str.endsWith('выполнения'); // true  — заканчивается на
str.indexOf('это');         // 10    — позиция (или -1, если нет)

includes — самый читаемый способ проверить вхождение, возвращает true/false. startsWith/endsWith — для начала и конца. Старый indexOf возвращает позицию или -1; его берут, когда нужна именно позиция, а не факт наличия.

Вырезание: slice

const s = 'JavaScript';

s.slice(0, 4);    // 'Java'   — с 0 по 4 (не включая)
s.slice(4);       // 'Script' — с 4 до конца
s.slice(-6);      // 'Script' — последние 6 символов
s.slice(-6, -3);  // 'Scr'    — отрицательные индексы с обоих концов

slice — основной метод вырезания. Его преимущество перед substring — понимает отрицательные индексы (отсчёт с конца), что удобно для «последних N символов». substring этого не умеет и вдобавок молча меняет местами перепутанные аргументы. Берите slice.

Замена: осторожно с «все» и «первое»

const s = 'кот, кот, кот';

s.replace('кот', 'пёс');      // 'пёс, кот, кот' — ТОЛЬКО первое!
s.replaceAll('кот', 'пёс');   // 'пёс, пёс, пёс' — все

Классическая ошибка: replace меняет только первое вхождение. Чтобы заменить все — replaceAll (или replace с регуляркой и флагом g). Если ждали замены всего, а поменялось одно — вот причина.

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

const s = 'привет';

s[0] = 'П';           // ❌ молча не сработает — строки неизменяемы
s.toUpperCase();      // 'ПРИВЕТ' — но s НЕ изменилась!
console.log(s);       // 'привет' — исходная цела

const upper = s.toUpperCase();  // ✅ надо сохранить результат

Все строковые методы возвращают новую строку, не меняя исходную — строки в JavaScript неизменяемы (immutable). Изменить символ по индексу нельзя. Частая ошибка новичка — вызвать s.trim() и удивиться, что s не очистилась: результат нужно присвоить.

Разбор и сборка: split и join

'a,b,c'.split(',');          // ['a', 'b', 'c'] — строка → массив
'красный зелёный'.split(' '); // ['красный', 'зелёный']
'привет'.split('');          // ['п','р','и','в','е','т'] — по символам

['a', 'b', 'c'].join('-');   // 'a-b-c' — массив → строка

split превращает строку в массив, join — обратно. Пара «split → обработать как массив → join» — стандартный способ переворачивать, фильтровать и трансформировать текст. split('') разбивает на отдельные символы.

Очистка и форматирование

'  привет  '.trim();          // 'привет'   — убрать пробелы по краям
'  привет  '.trimStart();     // 'привет  '  — только слева

'5'.padStart(3, '0');         // '005'      — дополнить до длины 3
'7'.padEnd(3, '.');           // '7..'

'Привет'.toLowerCase();       // 'привет'
'привет'.repeat(3);           // 'приветприветпривет'

trim убирает пробелы по краям — обязателен при обработке пользовательского ввода. padStart дополняет строку до нужной длины (форматирование чисел, времени: '5'.padStart(2, '0') → '05'). Эти мелочи постоянно нужны на практике.

Смежные темы: регулярные выражения — сложный поиск и замена; массивы — split/join; типы данных. Полный список — в уроках JavaScript.