Полное руководство по JavaScript substr() vs substring()

Основное различие между методами JavaScript substr() и substring() заключается в том, как они интерпретируют второй параметр: substr() использует параметр длины (количество символов для извлечения), а substring() использует конечный индекс (позицию, на которой нужно остановиться, исключая этот символ). Хотя часто результаты их работы похожи, их обработка отрицательных индексов, граничных случаев и перестановки аргументов создает важные поведенческие различия, которые разработчикам следует понимать.

• Каковы основные различия?
• Как они обрабатывают отрицательные индексы?
• Граничные случаи и особое поведение
• Когда следует использовать каждый метод?
• Примеры кода и практическое применение
• Совместимость с браузерами и статус устаревания

Каковы основные различия?

Фундаментальное различие между substr() и substring() заключается в интерпретации параметров и их поведении:

• substr(start, length): Извлекает символы, начиная с позиции start, и возвращает length количество символов
• substring(start, end): Извлекает символы с позиции start до (но не включая) позиции end

Как объясняется на Mozilla Developer Network, "Если indexStart больше, чем indexEnd, то эффект от substring() такой, как будто два аргумента были переставлены".

Это означает:

• "abc".substr(1, 2) возвращает "bc" (начать с позиции 1, извлечь 2 символа)
• "abc".substring(1, 2) возвращает "b" (начать с позиции 1, остановиться перед позицией 2)

Сообщество Stack Overflow прекрасно это проясняет: “Второй аргумент для substring - это индекс, на котором нужно остановиться (но не включая его), а второй аргумент для substr - это максимальная длина для возврата.”

Как они обрабатывают отрицательные индексы?

Одним из самых значительных различий является то, как эти методы обрабатывают отрицательные индексы:

substr() с отрицательными индексами

substr() принимает отрицательные начальные индексы, которые отсчитываются с конца строки:

const text = "JavaScript";
console.log(text.substr(-3));     // "ipt" (последние 3 символа)
console.log(text.substr(-5, 3));  // "Scr" (5-й с конца, извлечь 3 символа)

Согласно Stack Overflow, “Если start отрицательный и abs(start) больше длины строки, substr использует 0 в качестве начального индекса”.

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

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

const text = "Hello World";
console.log(text.substring(-3));     // "Hello World" (обрабатывается как substring(0))
console.log(text.substring(-3, 5));  // "Hello" (обрабатывается как substring(0, 5))

Как указано на GeeksforGeeks, “он преобразует отрицательные значения в 0, что означает, что метод начинается с начала строки”.

Граничные случаи и особое поведение

Несколько граничных случаев демонстрируют важные различия между этими методами:

Поведение при перестановке аргументов

• substring() автоматически переставляет аргументы, когда start > end:

  javascript

  console.log("abc".substring(2, 0));  // "ab" (обрабатывается как substring(0, 2))
  

• substr() не переставляет аргументы:

  javascript

  console.log("abc".substr(2, 0));     // "" (пустая строка)
  

Обработка отрицательной длины

Документация MDN показывает, что “Отрицательные длины в substr() обрабатываются как ноль”.

Пример граничного случая

Рассмотрим этот пример из MDN:

const str = "01234";
console.log(str.substr(1, -2));  // "" (отрицательная длина обрабатывается как 0)
console.log(str.substring(1, -2)); // "0" (обрабатывается как substring(0, 1))
console.log(str.slice(1, -2));    // "1" (отрицательный индекс с конца)

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

Когда следует использовать каждый метод?

Используйте substring(), когда:

• Вам нужно указать начальную и конечную позиции
• Вам требуется последовательное поведение во всех средах JavaScript
• Вы работаете с индексами, которые могут быть в неправильном порядке
• Вы хотите следовать современным рекомендациям по JavaScript

Используйте substr(), когда:

• Вам нужно извлечь определенное количество символов из начальной позиции
• Вы хотите использовать отрицательные индексы для отсчета с конца строки
• Вы поддерживаете устаревший код, который использует substr()

Рассмотрите slice() вместо этого:

Согласно Refine, “В случаях, когда мне нужен отрицательный индекс, я использую slice()”. Метод slice() имеет более последовательное поведение с отрицательными индексами и обычно предпочтительнее в современном JavaScript.

Примеры кода и практическое применение

Сравнение базового использования

const text = "Alligator";

// Извлечение последних 3 символов
console.log(text.substr(-3));    // "tor"
console.log(text.substring(5));   // "tor"

// Извлечение средней части
console.log(text.substr(2, 3));  // "lig"
console.log(text.substring(2, 5)); // "lig"

// Попытка извлечения в обратном порядке
console.log(text.substr(5, 2));  // "to"
console.log(text.substring(5, 2)); // "" (переставлено в substring(2, 5) -> "lig")

Практические примеры

Извлечение расширения файла:

const filename = "document.pdf";
console.log(filename.substr(filename.lastIndexOf(".") + 1)); // "pdf"
console.log(filename.substring(filename.lastIndexOf(".") + 1)); // "pdf"

Получение первого слова из предложения:

const sentence = "Hello World";
console.log(sentence.substr(0, sentence.indexOf(" "))); // "Hello"
console.log(sentence.substring(0, sentence.indexOf(" "))); // "Hello"

Совместимость с браузерами и статус устаревания

Документация MDN прямо указывает, что substr() считается *“устаревшей функцией”`. Хотя она все еще поддерживается во всех браузерах, ее не рекомендуется использовать в новом коде.

Как отмечено на Mastering JS, substr() также “распространена, но считается ‘устаревшей функцией’ в документации Mozilla”.

Заключение

Выбор между substr() и substring() зависит от ваших конкретных потребностей и стандартов кодирования. Ключевые выводы:

1. Интерпретация параметров: substr() использует длину, substring() использует конечный индекс
2. Отрицательные индексы: substr() их поддерживает, substring() преобразует в 0
3. Перестановка аргументов: substring() переставляет, когда start > end, substr() - нет
4. Современные предпочтения: substring() предпочтительнее для нового кода, slice() для отрицательных индексов
5. Статус устаревания: substr() считается устаревшей, несмотря на продолжающуюся поддержку

В большинстве случаев substring() обеспечивает более предсказуемое поведение и соответствует современным соглашениям JavaScript. Однако, когда вам specifically нужно отсчитывать с конца строки или извлечь фиксированное количество символов, substr() может быть полезен. Всегда учитывайте slice() как альтернативу, когда требуется отрицательная индексация.

Источники

1. Difference between substr() and substring() in JavaScript - GeeksforGeeks
2. Substring vs Substr vs Slice in JavaScript - Mastering JS
3. substring vs substr in JavaScript - DigitalOcean
4. String.prototype.substring() - JavaScript | MDN
5. javascript - What is the difference between substr and substring? - Stack Overflow
6. What is the Difference Between Substr and Substring - W3Docs
7. String.prototype.substr() - JavaScript | MDN
8. Difference Between substr() and substring() in JavaScript - StackAbuse
9. Substr vs Substring in JavaScript - SkillForge
10. Difference between the substr() and substring() in JavaScript? - Net-Informations