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

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

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

Давайте проверим, как это работает на первом примере:

let searchedString = "Hello my fellow dev newbs! 🙂";
let stringToLookFor = "fellow";
searchedString.indexOf(stringToLookFor)                  // 9
searchedString.indexOf(stringToLookFor, 9)               // 9
searchedString.indexOf(stringToLookFor, 12)              // -1

Ищем позицию строки «собрат» в первом и втором случае. Мы получаем значение 9, потому что это начальная позиция первого вхождения указанной строки. Последний случай возвращает значение -1, потому что мы ищем в ограниченном диапазоне, начиная с позиции 12, которая больше не содержит указанную строку.

Опять же, как и в предыдущем методе includes (), indexOf () чувствителен к регистру. Кроме того, я хотел бы также отметить тот факт, что метод возвращает позицию только для первого вхождения указанной строки.

let welcomeString = "Hi to my Fellow fellow mellow newbs dewbs! 🙂";
welcomeString.indexOf("Fellow")                // 9
welcomeString.indexOf("fellow")                // 16
welcomeString.indexOf("Mellow")                // -1
welcomeString.indexOf("mellow")                // 23 
welcomeString.indexOf("Dewbs")                 // -1
welcomeString.indexOf("newbs")                 // 30

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

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

Ладно, как и раньше, это все хорошо, но в реальной жизни мы также будем иметь дело с символами, состоящими из двух кодовых единиц. Так как же это работает? Что ж, вы, вероятно, будете шокированы, но в основном так же, как и предыдущий метод. Поскольку они оба делают почти одно и то же ... давайте взглянем на код последнего примера дня и посмотрим сами.

let smileyFace = "🙂";
// smileyFace:
//   0 -> "\ud83d" 
//   1 -> "\ude42"
smileyFace.indexOf("🙂")                       // 0
smileyFace.indexOf("\ud83d\ude42")             // 0
smileyFace.indexOf("🙂", 1)                    // -1
smileyFace.indexOf("\ude42", 1)                // 1
// 4 smiley faces:
//   0 -> "\ud83d" 
//   1 -> "\ude42" 
//   2 -> "\ud83d" 
//   3 -> "\ude42" 
//   4 -> "\ud83d" 
//   5 -> "\ude42" 
//   6 -> "\ud83d" 
//   7 -> "\ude42"
"🙂🙂🙂🙂".indexOf('\ude42\ud83d', 1)         // 1
"🙂🙂🙂🙂".indexOf('\ude42\ud83d', 2)         // 3

Первый набор довольно простой. Мы ищем положение смайлика, который в обоих случаях имеет индекс 0. Единственная разница в том, как мы указываем строку, для которой нужно найти позицию.

Первый случай во втором наборе равен -1, потому что мы ограничили диапазон поиска только второй единицей кода эмодзи, которая не включает весь символ эмодзи. Однако вторая половина содержит именно то значение, которое мы ищем во втором случае, поэтому результатом является ее позиция. И это позиция 1.

В последнем наборе показан более сложный пример с четырьмя смайликами. Я решил использовать 4 смайлика, чтобы указать, что мы всегда будем получать начальный индекс первого появления. Даже если в искомой строке есть несколько совпадений.

Таааак, в первом случае мы ищем позицию строки, которая состоит из второй половины символа эмодзи, за которой следует первая половина символа эмодзи. К счастью для нас, именно эта последовательность кодовых единиц простирается от позиции 1 до позиции 2, так что результатом является начальная позиция - следовательно, значение 1.

Второй случай также содержит совпадение для этой последовательности кодовых единиц. Без ограничения второго необязательного параметра значение результата будет 1. Но поскольку мы ограничиваем диапазон для поиска, начиная с позиции 2, следующее вхождение указанной последовательности кодовых единиц находится в позиции 3. Это также то, что мы получаем как результат. Если бы мы изменили эту последовательность, следующим значением было бы 5, потому что это начальная позиция второго вхождения указанной строки.

Итак, это все, что вам нужно знать о методе indexOf (). Теперь вы готовы использовать его самостоятельно ...

Как всегда, большое спасибо за ваше время, и скоро увидимся со следующим методом.