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

Технический фундамент извлечения и преобразования

Методы этого урока создают новые значения (строки или массивы), а исходную строку не меняют.
Технически это важно для предсказуемости: одно значение можно безопасно переиспользовать в нескольких шагах.

const source = 'ORD-2026-0007';
const prefix = source.slice(0, 3);

console.log(source); // ORD-2026-0007
console.log(prefix); // ORD

Ключевой момент: slice вернул новое значение, но source осталась без изменений.

Извлечение части строки: `slice` и `substring`

slice(start, end) берет фрагмент от start до end (не включая end).

const orderId = 'ORD-2026-0007';

console.log(orderId.slice(0, 3)); // ORD
console.log(orderId.slice(4, 8)); // 2026
console.log(orderId.slice(-4)); // 0007

substring(start, end) похож, но не поддерживает отрицательные индексы как slice.

const value = 'frontend';

console.log(value.substring(0, 5)); // front
console.log(value.slice(0, 5)); // front

Смотри, что важно: substring еще и по-своему ведет себя, если перепутать границы. Он автоматически поменяет start и end местами, а slice в такой ситуации вернет пустую строку.

const s = 'frontend';

console.log(s.substring(5, 0)); // front (границы поменялись местами)
console.log(s.slice(5, 0)); // '' (пустая строка)

Здесь часто путаются: если тебе нужен «хвост» строки через -1, -2 и т.д., выбирай slice.

Проверь себя: что вернет slice(2, 2)?

Замена текста: `replace` и `replaceAll`

replace заменяет первое совпадение.

const text = 'cat cat cat';
console.log(text.replace('cat', 'dog')); // dog cat cat

replaceAll заменяет все совпадения.

console.log(text.replaceAll('cat', 'dog')); // dog dog dog

Если используешь регулярное выражение с глобальным флагом g, эффект такой же.

console.log(text.replace(/cat/g, 'dog')); // dog dog dog

Анти-провал: ожидать, что replace поменяет все вхождения. По умолчанию он меняет только первое.

Разбиение строки: `split`

split(separator) делит строку на массив.

const tags = 'js,react,node';
const arr = tags.split(',');

console.log(arr); // ['js', 'react', 'node']

Можно ограничить количество элементов вторым аргументом.

console.log('a-b-c-d'.split('-', 2)); // ['a', 'b']

Что будет, если разделитель не найден?

console.log('hello'.split(',')); // ['hello']

Микро-сценарии

Маскирование номера карты в UI.

function maskCard(card) {
  const last4 = card.slice(-4);
  return `**** **** **** ${last4}`;
}

Нормализация телефонного номера перед отправкой.

function normalizePhone(phone) {
  return phone.replaceAll(' ', '').replaceAll('-', '');
}

Частые ошибки новичков

Путать «включительно/не включительно» для второго индекса.
Думать, что методы меняют исходную строку.
Использовать replace вместо replaceAll.
Не учитывать, что split возвращает массив, а не строку.

Краткий итог

slice и substring извлекают части строки.
Для отрицательных индексов подходит slice.
replace меняет первое совпадение, replaceAll — все.
split превращает строку в массив по разделителю.
Исходная строка остается неизменной, всегда создается новое значение.

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