Эта статья представляет собой стенограмму моей бесплатной серии YouTube об основах веб-разработки. Если вы предпочитаете смотреть, а не читать, не стесняйтесь посетить мой канал Dev Newbs.
Привет, мои коллеги-новички, и добро пожаловать обратно в серию статей «Основы Javascript» о встроенном объекте String. Тема этого прекрасного дня - метод includes (). Давай не парить. Мы собираемся нырнуть прямо сейчас.
Метод includes () выполняет поиск с учетом регистра, чтобы определить, можно ли найти указанную строку в искомой строке. Возвращаемое значение может быть истинным или ложным в зависимости от результата поиска. Метод имеет два параметра. Первый параметр является обязательным, и это значение строки, которое проверяется на наличие в строке поиска. Второй параметр является необязательным и указывает позицию для начала поиска. Если он не указан, по умолчанию используется значение 0. Давайте посмотрим, как все это работает в первом примере.
let searchedString = "Hello my fellow dev newbs! 🙂"; let stringToLookFor = "fellow"; searchedString.includes(stringToLookFor) // true searchedString.includes(stringToLookFor, 9) // true searchedString.includes(stringToLookFor, 12) // false
Первый и второй результат верны, потому что диапазон, используемый для поиска, включает строку «приятель», которую мы проверяем на наличие. Последний результат - ложь, потому что указанный нами индекс 12 приводит к тому, что искомая строка начинается с середины слова «приятель», что означает, что мы не можем найти все слово в указанном диапазоне.
Я уже упоминал об этом, но это частый случай ошибок, поэтому подчеркну еще раз. Этот метод чувствителен к регистру. Это означает, что он различает строчные и прописные буквы букв алфавита. Имейте это в виду, если вы попытаетесь их найти.
Давайте посмотрим, о чем я говорю, в примере 2.
searchedString.includes("Dev") // false
searchedString.includes("dev") // true
searchedString.includes("hello") // false
searchedString.includes("Hello") // true
searchedString.includes("NEWBS") // false
searchedString.includes("newbs") // true
Первая версия для каждой искомой строки неверна из-за чувствительности к регистру. Следующий правильный. Это совершенно ясно, поэтому нет необходимости анализировать это дальше. Просто следите за этим в своем коде. Потому что ты знаешь, что они говорят? Глупые ошибки найти труднее всего.
Хорошо, все было хорошо, но давайте перейдем к более серьезному делу - работе с кодовыми единицами и кодовыми точками. Я не упоминал об этом, но на данный момент это почти невысказанное правило: если мы имеем дело с индексами или позициями, мы всегда используем единицы кода. Итак, как этот метод ведет себя в случае символов, состоящих из нескольких кодовых единиц? Давайте проверим это на последнем примере дня:
let smileyFace = "🙂";
// smileyFace:
// 0 -> "\ud83d"
// 1 -> "\ude42"
smileyFace.includes("🙂") // true
smileyFace.includes("\ud83d\ude42") // true
smileyFace.includes("🙂", 1) // false
smileyFace.includes("\ude42", 1) // true
// 2 smiley faces:
// 0 -> "\ud83d"
// 1 -> "\ude42"
// 2 -> "\ud83d"
// 3 -> "\ude42"
"🙂🙂".includes('\ude42\ud83d', 1) // true
"🙂🙂".includes('\ude42\ud83d', 2) // false
У нас есть строковая переменная, которая содержит один смайлик-смайлик. Длина этой строки равна 2 единицам кода. Первые два случая в основном идентичны. Мы проверяем, содержит ли строка со смайликом строку со смайликом. Очевидно результат верный. Единственная разница в том, как я указал строку для поиска. В первом случае я использовал смайлы напрямую. Во втором случае я использовал синтаксис Unicode с префиксом «\ u». Однако для Javascript это то же самое.
Прежде чем мы рассмотрим вторую пару случаев, обратите внимание на комментарий, который я написал после объявления переменной smileyFace. Он показывает, как смайлы сохраняются в переменной и какое значение кодовой единицы сохраняется в каком индексе. Хорошо, вернемся к коду.
Первый случай во втором наборе неверен, потому что мы ограничили диапазон поиска только второй единицей кода эмодзи и не включает весь символ эмодзи. Однако вторая половина содержит именно то значение, которое мы ищем во втором случае, поэтому результат верен.
В последнем наборе показан более сложный пример с двумя смайликами. Давай закончим серию на ура, да? Первый случай - поиск строки, состоящей из второй половины символа эмодзи, за которой следует первая половина символа эмодзи. К счастью для нас, это именно то значение, которое простирается от позиции 1 до позиции 2, так что результат верен. Во втором случае диапазон поиска, не содержащий этой последовательности кодовых единиц, еще более ограничен. Это приводит к возврату false в результате этого поиска.
Хорошо, это все, что касается метода includes (). Я думаю, что отныне вы сможете использовать в своем коде метод includes ().
А вот один глупый мем, который я сделал только для этой публикации на Medium, так что, надеюсь, вы можете немного посмеяться. Вот оно:
Спасибо за внимание, не могу дождаться встречи с вами в следующей статье.
