String.includes() в JavaScript — чи містить рядок підрядок

Загальний опис

String.prototype.includes() є методом, який дозволяє перевірити, чи містить рядок вказаний підрядок. Цей метод повертає true, якщо підрядок знайдено всередині головного рядка, і false у протилежному випадку. Ця функціональність є надзвичайно корисною для умовних перевірок у коді, наприклад, при аналізі вводу користувача, фільтруванні даних або роботі з текстом.

Для використання includes() потрібно викликати його на рядковому об'єкті, передаючи підрядок як аргумент. Ось простий приклад:

let sentence = "Hello, world!";
let word = "world";
console.log(sentence.includes(word)); // виведе true

Також можна вказати другий аргумент, який визначає позицію у рядку, з якої почати пошук. Наприклад:

console.log(sentence.includes("Hello", 1)); // виведе false, бо пошук починається з індексу 1

Слід звернути увагу, що includes() є чутливим до регістру, тому "hello" та "Hello" будуть різними рядками:

console.log(sentence.includes("hello")); // виведе false

Особливістю includes() є його простота і зручність у порівнянні зі старішими методами, такими як indexOf(), який повертає індекс підрядка або -1, якщо підрядок не знайдено. Використання includes() робить код чистішим і зрозумілішим, особливо для новачків.

правити

Нотатка

Пам'ятайте, що метод String.prototype.includes() чутливий до регістру. Це означає, що він розрізняє великі та малі букви. Наприклад, 'JavaScript'.includes('script') поверне false, оскільки "s" у "script" написано маленькою буквою, а у слові "JavaScript" - великою. У випадку, коли потрібно ігнорувати регістр, можна використовувати метод toLowerCase() або toUpperCase() перед includes().

автор: Bond правити

Нотатка

Метод includes() дозволяє вказати, з якого індексу розпочати пошук. Це може бути корисним для пошуку підрядка в певній частині рядка. Наприклад, 'JavaScript'.includes('a', 3) почне шукати літеру "a" починаючи з четвертого символу (індекс 3), і поверне true.

автор: Bond правити

Нотатка

Хоча includes() та indexOf() обидва використовуються для перевірки наявності підрядка, важливо розуміти різницю. includes() повертає булеве значення (true або false), в той час як indexOf() повертає індекс першого входження підрядка або -1, якщо підрядок не знайдено. Використовуйте includes(), коли вам потрібно лише знати, чи містить рядок підрядок, а indexOf() - коли потрібно дізнатися його позицію.

автор: Bond правити

Нотатка

includes() є зручним для перевірки наявності певного підрядка перед виконанням певних дій. Наприклад,

if (str.includes('Hello')) { /* код, який виконується, якщо str містить 'Hello' */ }

Це допомагає писати більш читабельний і зрозумілий код.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

includes(searchString)
includes(searchString, position)

Параметри

searchString

Це рядок, який буде шукатися всередині основного рядка. Не може бути регулярним виразом. Усі значення, які не є регулярними виразами, автоматично конвертуються у рядки, тому пропуск аргументу або передача undefined призведе до пошуку рядка "undefined", що рідко є бажаним результатом.

автор: Bond

правити

position

Позиція всередині рядка, з якої почнеться пошук searchString. Якщо не вказано, за замовчуванням встановлюється на 0, тобто пошук відбувається з початку рядка.

автор: Bond

правити

Повернення

boolean

Повертає булеве значення (true або false). Якщо рядок пошуку (searchString) знайдено деінде у заданому рядку, метод повертає true, це також стосується випадків, коли searchString є порожнім рядком; у всіх інших випадках повертається false. Цей результат дозволяє легко перевірити наявність підрядка у більшому рядку, що є особливо корисним у умовних конструкціях та валідації даних.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	41	40	9	28	12	—

Підтримка: мобільні переглядачі

Переглядач
	41	41	40	9

Підтримка: серверні переглядачі

Переглядач
	4.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

// Створюємо рядок
let message = "Вітаємо в JavaScript світі!";

// Перевіряємо, чи містить рядок слово "JavaScript"
let containsJavaScript = message.includes("JavaScript");

console.log(containsJavaScript); // Виводить: true

<header>
  <h2 class="title">String.prototype.includes()</h2>
  <p class="description">Перевіряє, чи містить рядок заданий підрядок.</p>
</header>
<main>
  <div class="result">
    <input type="text" id="inputText" placeholder="Введіть текст тут...">
    <input type="text" id="substring" placeholder="Підрядок для пошуку...">
    <button onclick="checkSubstring()">Перевірити</button>
    <p id="output">Результат буде тут...</p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

input[type="text"] {
  margin: 10px 0;
  padding: 5px;
  width: 80%;
}

button {
  cursor: pointer;
  padding: 5px 10px;
}

function checkSubstring() {
  const text = document.getElementById('inputText').value;
  const substring = document.getElementById('substring').value;
  const result = text.includes(substring);
  document.getElementById('output').innerText = `Підрядок "${substring}" ${result ? 'знайдено' : 'не знайдено'} у тексті.`;
}
//# sourceURL=pen.js

// Масив рядків
let sentences = [
    "JavaScript це весело.",
    "Вивчаємо програмування.",
    "JavaScript робить веб-сайти інтерактивними."
];

// Фільтруємо масив, залишаючи тільки рядки, які містять "JavaScript"
let javaScriptSentences = sentences.filter(sentence => sentence.includes("JavaScript"));

console.log(javaScriptSentences); // Виводить: ["JavaScript це весело.", "JavaScript робить веб-сайти інтерактивними."]