JavaScript: разница между slice и substring для работы со строками

Для кого эта статья:

• Разработчики JavaScript, ищущие понимание различий между методами работы со строками
• Начинающие веб-разработчики, интересующиеся углубленным изучением JavaScript

• Профессионалы, желающие повысить качество и производительность своего кода при работе с подстроками

  Когда дело доходит до манипуляций со строками в JavaScript, разработчики часто сталкиваются с дилеммой: использовать метод slice() или substring()? На первый взгляд они кажутся почти идентичными — оба извлекают подстроки, оба принимают индексы как аргументы. Но дьявол, как всегда, кроется в деталях! 🔍 Неправильный выбор метода может привести к неожиданному поведению кода, особенно при работе с отрицательными индексами или в нестандартных ситуациях. Давайте раз и навсегда разберемся в тонкостях этих методов и определим, какой из них лучше использовать в различных сценариях.

Погрузитесь в мир профессиональной JavaScript-разработки с курсом Обучение веб-разработке от Skypro. Вы не только разберетесь со всеми нюансами работы строковых методов, но и освоите весь стек современных веб-технологий под руководством практикующих разработчиков. Программа включает глубокое погружение в JavaScript и его экосистему — от базовых методов до продвинутых концепций, которые сделают ваш код более чистым и эффективным.

Методы slice и substring в JavaScript: базовый синтаксис

Прежде чем погрузиться в различия, давайте сначала рассмотрим базовый синтаксис обоих методов. Оба они предназначены для извлечения части строки на основе указанных индексов, но их базовая сигнатура слегка отличается.

String.slice() принимает следующие параметры:

string.slice(startIndex[, endIndex])

Где:

• startIndex — индекс, с которого начинается извлечение (включительно)
• endIndex — индекс, до которого происходит извлечение (не включительно). Если опущен, извлекается до конца строки

String.substring() имеет похожий синтаксис:

string.substring(indexStart[, indexEnd])

Где:

• indexStart — индекс, с которого начинается извлечение (включительно)
• indexEnd — индекс, до которого происходит извлечение (не включительно). Если опущен, извлекается до конца строки

На первый взгляд, они почти идентичны. Но не торопитесь с выводами! 🧐 Эти методы по-разному интерпретируют свои аргументы, особенно в нестандартных случаях.

Андрей, Senior Frontend Developer

Однажды мы столкнулись с интересной проблемой в проекте. Наша функция парсинга URL-параметров иногда возвращала некорректные данные. После долгих исследований выяснили, что проблема была в использовании substring() там, где требовался slice().

Мы обрабатывали часть URL после знака вопроса, и когда параметра не было (отрицательный индекс), substring() преобразовывал его в 0 и извлекал весь URL, а не пустую строку. Замена на slice() мгновенно исправила баг.

Этот случай научил меня всегда выбирать slice() для работы с подстроками, если есть малейшая вероятность столкнуться с отрицательными индексами.

Принципиальные отличия в работе с аргументами

Хотя методы slice() и substring() выглядят почти идентично, они обрабатывают свои аргументы по-разному, что может привести к совершенно разному поведению в некоторых сценариях.

1. Порядок аргументов

Самое фундаментальное различие заключается в том, как методы реагируют, когда первый аргумент больше второго:

• slice() возвращает пустую строку, если startIndex > endIndex
• substring() автоматически меняет аргументы местами, так что меньший становится начальным индексом

Рассмотрим пример:

let str = "JavaScript";
console.log(str.slice(5, 2)); // "" (пустая строка)
console.log(str.substring(5, 2)); // "aSc" (эквивалентно str.substring(2, 5))

Это поведение substring() может быть неинтуитивным и приводить к сложно отслеживаемым багам, если вы не учитываете эту особенность.

2. Обработка значений меньше 0 и больше длины строки

Еще одно принципиальное различие касается обработки индексов, выходящих за границы строки:

• slice() интерпретирует отрицательные индексы как отсчёт с конца строки
• substring() приводит любые отрицательные значения к 0
• Оба метода приводят значения больше длины строки к длине строки

Пример:

let str = "JavaScript";
console.log(str.slice(-4)); // "ript" (последние 4 символа)
console.log(str.substring(-4)); // "JavaScript" (эквивалентно str.substring(0))

3. Обработка NaN и других нечисловых значений

Оба метода приводят нечисловые аргументы к числам с помощью внутреннего механизма JavaScript:

• Значения undefined и отсутствующие аргументы трактуются как 0 для startIndex и как длина строки для endIndex
• NaN преобразуется в 0
• Бесконечность (Infinity) обрабатывается по-разному: в slice() это может быть полезно для захвата строки до конца, в substring() он приравнивается к длине строки

Поведение методов при отрицательных индексах

Работа с отрицательными индексами — пожалуй, самое яркое отличие между slice() и substring(), заслуживающее отдельного внимания. Этот аспект часто становится источником неожиданного поведения и сложных багов. 💥

Метод slice() и отрицательные индексы:

slice() элегантно обрабатывает отрицательные индексы, интерпретируя их как позиции с конца строки:

• -1 указывает на последний символ
• -2 указывает на предпоследний символ
• и так далее

Это чрезвычайно удобно, когда вам нужно получить последние N символов строки или работать с концом строки без предварительного вычисления индекса:

let email = "user@example.com";
let domain = email.slice(-11); // "example.com"

let filename = "document.pdf";
let extension = filename.slice(-3); // "pdf"

Можно также комбинировать положительные и отрицательные индексы:

let text = "JavaScript is awesome";
console.log(text.slice(0, -8)); // "JavaScript is"
console.log(text.slice(11, -1)); // "aweson"

Метод substring() и отрицательные индексы:

substring() обрабатывает отрицательные индексы совершенно иначе — он просто преобразует их в 0:

let text = "JavaScript";
console.log(text.substring(-3)); // "JavaScript" (эквивалентно text.substring(0))
console.log(text.substring(4, -2)); // "Java" (эквивалентно text.substring(4, 0), а затем аргументы меняются местами)

Это поведение может быть неинтуитивным и приводить к ошибкам, особенно если вы работаете с динамическими индексами, которые могут принимать отрицательные значения. Фактически, substring(-3, -1) будет эквивалентно substring(0, 0), что всегда вернёт пустую строку.

Елена, Frontend Tech Lead

Мы разрабатывали систему автоматической нумерации транзакций, которая должна была генерировать уникальные коды вида "TRX-2023-00001".

В функции форматирования мы использовали substring() для добавления ведущих нулей. Всё работало отлично на тестовых данных, но когда система попала в продакшн, некоторые транзакции получали неправильные номера.

Оказалось, что при определённых условиях наша функция получала отрицательный индекс, и substring() молча преобразовывал его в 0, что приводило к неправильному форматированию. Мы потеряли несколько дней на отладку, пока не поняли проблему.

После замены на slice() система заработала корректно, потому что slice() с отрицательными индексами давал предсказуемое поведение — либо правильный результат, либо явную пустую строку, что легко обнаружить при тестировании.

Производительность и случаи эффективного применения

Когда дело доходит до оптимизации кода и выбора наиболее подходящего метода, производительность становится важным фактором, особенно в высоконагруженных приложениях или при работе с большими объёмами текста. 🚀

Производительность: slice() vs substring()

В современных движках JavaScript разница в производительности между slice() и substring() минимальна для большинства повседневных задач. Однако есть некоторые нюансы:

• Исторически substring() считался немного более производительным, поскольку ему не нужно обрабатывать отрицательные индексы
• Для очень длинных строк разница может быть заметнее
• Современные JavaScript-движки (V8, SpiderMonkey) оптимизировали оба метода настолько, что для большинства сценариев разница незаметна

Вот результаты простого бенчмарка, проведенного на строке длиной 100,000 символов (время указано в миллисекундах для 100,000 операций):

Как видно из этих результатов, разница минимальна и не должна быть определяющим фактором при выборе метода.

Когда лучше использовать slice()

slice() становится предпочтительным методом в следующих сценариях:

1. Работа с отрицательными индексами — если вам нужно обрабатывать строки с конца или вы работаете с динамически вычисляемыми индексами, которые могут быть отрицательными
2. Последовательность операций — если вы выполняете серию операций с цепочкой вызовов методов, slice() даёт более предсказуемые результаты
3. Совместимость с Array.slice() — если вы работаете как с массивами, так и со строками, использование единообразного метода уменьшает когнитивную нагрузку
4. Функциональное программирование — slice() лучше вписывается в парадигму функционального программирования благодаря своему предсказуемому поведению

Когда лучше использовать substring()

substring() может быть полезен в следующих случаях:

1. Когда вам нужно автоматическое упорядочивание индексов — если вы хотите получить подстроку между двумя индексами, не зная, какой из них больше
2. Обратная совместимость — для поддержки очень старого кода, где могут быть зависимости от специфического поведения substring()
3. Незначительно лучшая производительность — в экстремальных случаях при работе с очень большими строками и положительными индексами

В целом, большинство современных JavaScript-разработчиков предпочитают использовать slice() благодаря его более интуитивному и предсказуемому поведению, особенно при работе с динамическими индексами.

Сравнение slice и substring на практических примерах кода

Теоретическое понимание различий между методами важно, но настоящее мастерство приходит через практику. Рассмотрим несколько типичных задач и сравним, как slice() и substring() справляются с ними. 👨‍💻

Пример 1: Извлечение доменной части из email-адреса

// Задача: Получить домен из email-адреса (часть после @)
let email = "user@example.com";

// Используя slice()
let atIndex = email.indexOf("@");
let domainSlice = email.slice(atIndex + 1);
console.log(domainSlice); // "example.com"

// Используя substring()
let domainSubstring = email.substring(atIndex + 1);
console.log(domainSubstring); // "example.com"

В этом простом примере оба метода работают одинаково, так как мы используем только один положительный индекс.

Пример 2: Получение последних N символов строки

// Задача: Получить последние 4 символа строки
let code = "AUTH-12345";

// Используя slice()
let lastFourSlice = code.slice(-4);
console.log(lastFourSlice); // "2345"

// Используя substring()
let lastFourSubstring = code.substring(code.length – 4);
console.log(lastFourSubstring); // "2345"

Здесь slice() позволяет более элегантно решить задачу с помощью отрицательного индекса, в то время как для substring() нам пришлось вычислять позицию вручную.

Пример 3: Извлечение подстроки по диапазону индексов

// Задача: Извлечь подстроку между двумя токенами
let text = "The answer is [42] according to the book";
let startToken = "[";
let endToken = "]";

let startIndex = text.indexOf(startToken);
let endIndex = text.indexOf(endToken);

// Используя slice()
let resultSlice = text.slice(startIndex + 1, endIndex);
console.log(resultSlice); // "42"

// Используя substring()
let resultSubstring = text.substring(startIndex + 1, endIndex);
console.log(resultSubstring); // "42"

Снова оба метода работают одинаково с положительными индексами в правильном порядке.

Пример 4: Когда индексы могут быть в неправильном порядке

// Задача: Извлечь текст между двумя позициями, не зная, какая из них больше
function extractText(text, posA, posB) {
// Используя slice()
if (posA > posB) {
return text.slice(posB, posA);
} else {
return text.slice(posA, posB);
}

// Используя substring() – более компактно
// return text.substring(posA, posB); // автоматически меняет индексы местами
}

let text = "JavaScript";
console.log(extractText(text, 2, 5)); // "vaS"
console.log(extractText(text, 5, 2)); // "vaS"

В этом примере substring() имеет преимущество благодаря автоматическому упорядочиванию индексов.

Пример 5: Сложные манипуляции с индексами

// Задача: Работа с динамически вычисляемыми индексами, которые могут быть отрицательными
function smartTrim(text, maxLength) {
if (text.length <= maxLength) return text;

// С использованием slice()
return text.slice(0, maxLength – 3) + "...";
}

function getExtension(filename) {
// С использованием slice()
let dotIndex = filename.lastIndexOf(".");
return dotIndex === -1 ? "" : filename.slice(dotIndex);
}

console.log(smartTrim("JavaScript is awesome", 15)); // "JavaScript i..."
console.log(getExtension("document.pdf")); // ".pdf"

Функция smartTrim обрезает текст до указанной длины, добавляя многоточие. Функция getExtension извлекает расширение файла. Оба примера демонстрируют случаи, когда slice() обеспечивает более чистый и понятный код.

Пример 6: Обработка некорректных индексов

let str = "JavaScript";

// Отрицательные индексы
console.log(str.slice(-4)); // "ript"
console.log(str.substring(-4)); // "JavaScript" (эквивалентно str.substring(0))

// Начало > конец
console.log(str.slice(7, 4)); // "" (пустая строка)
console.log(str.substring(7, 4)); // "Scr" (эквивалентно str.substring(4, 7))

// Индекс больше длины строки
console.log(str.slice(5, 20)); // "cript"
console.log(str.substring(5, 20)); // "cript"

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

Исходя из практических примеров, можно сделать вывод, что для большинства типичных задач оба метода работают одинаково хорошо. Однако slice() обеспечивает более интуитивное поведение при работе с отрицательными индексами и в целом более предсказуем. Метод substring() может быть полезен в специфических случаях, когда его особенности (автоматическое упорядочивание индексов) приходятся кстати.

Подводя итоги, выбор между slice() и substring() во многом зависит от конкретной задачи и личных предпочтений. Если вы работаете с отрицательными индексами или вам важна предсказуемость поведения — выбирайте slice(). Он обладает более современным и интуитивным API, согласуется с методами массивов и обеспечивает надежную обработку краевых случаев. В мире JavaScript, полном сюрпризов и неожиданностей, такая предсказуемость — настоящее сокровище. Помните главное: понимание тонкостей этих методов не просто расширяет ваши знания — оно позволяет писать более надежный, читаемый и элегантный код.