Потерян в подстроке

Потерян в подстроке

Найдите свою подстроку в JavaScript правильно

В мире JavaScript не редкость, что вы можете получить немного другие результаты, чем вы ожидали.

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

У вас есть по крайней мере два способа сделать это, которые очень похожи, но работают по-разному. Это substr() и substring() в String.prototype.

Итак, в чем здесь отличия? Они оба принимают 2 аргумента (что еще больше упрощает их путаницу), они оба возвращают строку, так что же происходит?

Прежний метод substr() имеет следующие параметры: start, который определяет индекс первого символа, включаемого в возвращаемую подстроку, и необязательную длину. где вы можете указать количество символов для извлечения. Давайте рассмотрим несколько примеров:

Последний метод substring(), с другой стороны, имеет следующие параметры: indexStart, чтобы указать индекс первого символа, который нужно включить в возвращаемую подстроку, и необязательный indexEnd который обозначает индекс первого символа, исключаемого из возвращаемой подстроки.
Следуя предыдущему примеру, мы получаем следующие результаты:

Теперь это выглядит совсем по-другому. Поэтому важно знать, какой метод использовать в каком случае. Или в конечном итоге просто используйте substring(), так как substr() помечен как устаревший ECMAScript». В любом случае, нередко можно увидеть, что он все еще используется во многих кодовых базах, поэтому браузеры продолжают поддерживать синтаксис.

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

1. Первый аргумент — отрицательное целое число.

Последствия:
substr(): Счетчик начинается с конца строки, максимальное значение — начало строки. Там оно закрыто.

let myString = 'LostInTheSubstring';
console.log(myString.substr(-6, 10)); // 'string'

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

let myString = 'LostInTheSubstring';
console.log(myString.substring(1, 3) === myString.substring(3, 1)); // true

Второе правило превращает любое отрицательное число (также NaN) в 0.
Затем применяется первое правило. Довольно просто, правда?

let myString = 'LostInTheSubstring';
console.log(myString.substring(-1, 3) === myString.substring(3, 0)); // true
console.log(myString.substring(-1, -3) === myString.substring(0, 0));
// true

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

2. Второй аргумент

Последствия:
substr():Поскольку это необязательный аргумент, если он опущен, выделение переходит в конец строки. То же самое относится и к использованию неопределенного значения. Отрицательные значения и NaN обрабатываются как 0. Максимальное значение ограничено длиной строки.

let myString = 'LostInTheSubstring';
console.log(myString.substr(9)); // 'Substring'

substring(): Аналогично, это необязательный аргумент, если он опущен, выберите символы до конца строки. Также использование отрицательных значений и NaN рассматривается как 0. Однако стоит проверить две вещи. Обратите внимание, что символ в позиции конечного индекса (наш второй аргумент) не включается в результат.

let myString = 'LostInTheSubstring';
console.log(myString.charAt(0)); // 'L'
console.log(myString.charAt(1)); // 'o'
console.log(myString.substring(0, 1)); // 'L'

Как видите, по индексу 1 строки в примере у нас сидит ‘o’, но он не включается в результат.

Что произойдет, если начальный и конечный индексы совпадают? Итак, мы получаем пустую строку.

let myString = 'LostInTheSubstring';
console.log(myString.substring(1, 1)); // ''

Вывод

Вы можете использовать любой метод, который вы хотите, хотя substring() является предпочтительным. Важно знать, что происходит, когда вы видите один из них в коде, над которым работаете. Надеюсь, теперь у вас не перевернется голова при встрече с одним из них.
Да, кстати. У них есть родной брат. Он называется slice(), но это уже другая история…

Выучить больше