Эта статья представляет собой расшифровку моей бесплатной серии YouTube об основах веб-разработки. Если вы предпочитаете смотреть, а не читать, посетите мой канал Dev Newbs.

Привет всем преданным новичкам разработчиков! Я собираюсь познакомить вас с новым методом объекта String. Но у него есть подвох. Он практически идентичен двум другим уже существующим методам. Мы уже рассмотрели один. У другого не будет собственного эпизода, потому что он устарел. Сегодня нас ждут интересные вещи. Приготовься.

Наш метод дня — это метод substring(). Этот метод извлекает символы из строки между двумя указанными индексами и возвращает новую подстроку.

Метод имеет два параметра. Первый параметр является обязательным. Это позиция, с которой начинается добыча. Второй параметр является необязательным и указывает позицию (до, но не включая), где закончить извлечение. Если он опущен, извлекается остальная часть строки.

Звучит знакомо? Так и должно быть, потому что пока это определение на 100% подходит для метода slice(). Хорошо, так где именно разница? Ну, во-первых, когда начальная позиция больше конечной, этот метод поменяет местами два аргумента. Еще одно отличие состоит в том, что если начальная или конечная позиция меньше 0, по умолчанию она автоматически принимает значение 0.

Я покажу вам эти различия, но сначала давайте рассмотрим основное использование в примере 1.

const str = "Hello Dev Newbs!";
// length of the string
"Length: " + str.length                    // Length: 16
// getting the whole string
str.substring()                            // Hello Dev Newbs!
str.slice()                                // Hello Dev Newbs!
// start extraction at position 6
str.substring(6)                           // Dev Newbs!
str.slice(6)                               // Dev Newbs!
// start extraction at position 10 & end at position 14
str.substring(10, 15)                      // Newbs
str.slice(10, 15)                          // Newbs

Все основное использование одинаково для метода slice() и метода substring(). Я покажу вам различия между ними во втором примере.

// start position is greater than end position
// swaps the two parameters
str.substring(9, 6)                           // Dev
// returns empty string
str.slice(9, 6)                               // empty string
// negative value as position 
// defaults to value 0 for both parameters
str.substring(-6, -1)                         // empty string
// counts backwards from the end
str.slice(-6, -1)                             // Newbs

// negative position & swapping at the same time
// change -1 -> 0 & swap (6,0) -> (0,6)
str.substring(6, -1)                          // Hello
// starts at 6 and ends at 15 (16 - 1)
str.slice(6, -1)                              // Dev Newbs

Первое несоответствие — это когда начальная позиция больше конечной. В случае метода substring() два параметра меняются местами и используются таким образом. Без проблем. Для метода slice() это означает пустой результат.

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

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

Я упомянул еще один подобный метод, который УСТАРЕЛ. Это означает, что его больше не следует использовать, потому что в конечном итоге он будет удален из реализации.

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

Давайте посмотрим, как это работает, когда мы предоставляем те же входные данные в примере 3.

// basic usage 
// starts at position 6, ends at position 9
str.substring(6, 9)                                // Dev
// starts at 6, returns next 9 characters
str.substr(6, 9)                                   // Dev Newbs
// start position is greater than end position
// swaps the two parameters
str.substring(10, 6)                               // Dev
// starts at 9, outputs next 6 characters
str.substr(10, 6)                                  // Newbs!
// negative value as start position 
// defaults to value 0 for start position
str.substring(-6, 5)                               // Hello
// counts from end backwards and returns 5 characters 
str.substr(-6, 5)                                  // Newbs

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

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

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

Вот вам и метод substring() и УСТАРЕВШИЙ родственный метод substr() и их сходство с методом slice(). Каждый из них имеет свой собственный уникальный вариант использования, когда другие терпят неудачу, поэтому вам решать, какой из них использовать и когда.

Как всегда, спасибо за внимание. Скоро увидимся с другим методом.