String.indexOf() в JavaScript — позиція підрядка

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

Метод String.prototype.indexOf() відіграє ключову роль у визначенні позиції підрядка всередині рядка. Цей метод повертає індекс першої появи заданого підрядка в рядку. Якщо підрядок не знайдено, метод повертає -1. indexOf() є незамінним інструментом для обробки тексту, аналізу даних, і в багатьох інших сценаріях, де потрібно знайти конкретний фрагмент в рядку.

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

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

У цьому прикладі, метод повідомляє, що підрядок "world" починається з індексу 7 у рядку sentence.

Можна також вказати другий аргумент для indexOf(), який визначає позицію у рядку, з якої почнеться пошук. Це корисно, коли потрібно знайти підрядок, що повторюється, або коли хочеться обмежити область пошуку:

console.log(sentence.indexOf("o", 5)); // виведе 8

Тут пошук літери "o" починається з індексу 5, і метод знаходить наступну літеру "o" на позиції 8.

Важливо зазначити, що indexOf() чутливий до регістру, тому пошук "Hello" і "hello" в одному і тому ж рядку дадуть різні результати. Ось чому при роботі з текстом, який може мати різний регістр, важливо враховувати цю особливість.

Використання indexOf() є основоположним для багатьох алгоритмів обробки тексту в JavaScript, і знання його особливостей допоможе писати більш ефективний і зрозумілий код.

правити

Порада

Якщо вам потрібно перевірити, чи міститься підрядок у рядку, indexOf() може бути корисним. Якщо метод повертає -1, підрядок відсутній. Наприклад,

if ('Hello World'.indexOf('Hello') !== -1) { /* Код виконується, якщо 'Hello' знайдено */ }

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

Нотатка

Важливо пам'ятати, що метод String.prototype.indexOf() є чутливим до регістру. Це означає, що великі та малі літери розглядаються як різні символи. Наприклад, 'Hello World'.indexOf('world') поверне -1, оскільки 'world' написано маленькими літерами, а в оригінальному рядку - великими.

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

Нотатка

indexOf() може використовуватися для визначення точної позиції підрядка в рядку. Це корисно для дальшої обробки рядків. Наприклад, ви можете використовувати цю позицію для вирізання або заміни частини рядка.

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

Нотатка

Метод дозволяє вказати початкову позицію пошуку другим аргументом. Це корисно, коли потрібно знайти повторення підрядка або ігнорувати певну частину рядка. Наприклад, 'Hello World'.indexOf('o', 5) почне пошук з шостої позиції, тому перше 'o' у слові 'Hello' ігнорується.

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

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

Синтаксис

indexOf(searchString)
indexOf(searchString, position)

Параметри

searchString

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

автор: Bond

правити

position

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

автор: Bond

правити

Повернення

index

Повертає ціле число, яке вказує індекс першого входження searchString у викликаючому рядку. Якщо searchString не знайдено, повертається -1.

Цікавий випадок виникає при пошуку порожнього рядка (""): якщо другий аргумент відсутній або його значення менше довжини рядка, метод повертає значення цього аргументу (або 0, якщо аргумент відсутній).

Наприклад, 'hello world'.indexOf("") повертає 0, а 'hello world'.indexOf("", 3) повертає 3. Однак, якщо значення другого аргументу дорівнює або перевищує довжину рядка, метод повертає довжину рядка. Наприклад, 'hello world'.indexOf("", 11) повертає 11.

автор: Bond

правити

Переглядачі

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

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

Переглядач
	1	1	1	3	12	3

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

Переглядач
	4.4	18	4	1

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

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

Приклади

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

<header>
  <h2 class="title">String.prototype.indexOf()</h2>
  <p class="description">Знаходить індекс першої появи підрядка в рядку.</p>
</header>
<main>
  <div class="result">
    <input type="text" id="mainString" placeholder="Введіть основний рядок...">
    <input type="text" id="subString" placeholder="Введіть підрядок...">
    <button onclick="findIndexOf()">Знайти індекс</button>
    <p id="output">Індекс підрядка: <span id="indexResult">-</span></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;
  margin-bottom: 10px;
}

#output {
  margin-top: 10px;
}

function findIndexOf() {
  var mainString = document.getElementById('mainString').value;
  var subString = document.getElementById('subString').value;
  var index = mainString.indexOf(subString);
  document.getElementById('indexResult').textContent = index >= 0 ? index : 'Не знайдено';
}
//# sourceURL=pen.js

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

// Знаходимо позицію слова "JavaScript" в рядку
let position = message.indexOf("JavaScript");

console.log(position); // Виводить: 13

// Створюємо рядок
let text = "JavaScript - мова програмування. JavaScript використовується в браузерах.";

// Починаємо пошук від позиції 0
let searchFor = "JavaScript";
let position = 0;

while ((position = text.indexOf(searchFor, position)) !== -1) {
    console.log("Знайдено на позиції: " + position);
    position += searchFor.length; // Оновлюємо позицію для наступного пошуку
}