JavaScriptの文字列indexOf()関数：特定の文字列が最初に出現する位置を検索

定義と使い方

文字列indexOf()関数は
文字列内から引数として渡された文字列を検索し、最初に見つかった（出現した）文字列のインデックスを返す関数です。引数として渡された文字列が見つからない場合は-1を返します。

この関数は、文字列内で文字の位置を検索したり、含まれているかどうかを確認したりする際に便利です。

この関数は、大文字と小文字を区別します。

基本例

JavaScript

const greeting = "ようこそ。コーディングエブリバディです。";

/*
 * 注意してください！
 * 文字列におけるインデックスは0から始まります。
 * 最初の文字のインデックスは0で、2番目の文字のインデックスは1です。
*/

// 文字列greetingから文字列「ようこそ。」を検索し、
// 最初に見つかった（出現した）文字列（「よ」）のインデックスを返します。
const hello = greeting.indexOf("ようこそ。");
console.log(hello); // 出力：0

// 文字列greeting内に引数として渡された文字列「はじめまして。」が存在しないため、
// -1を返します。
const niceToMeetYou = greeting.indexOf("はじめまして。");
console.log(niceToMeetYou); // 出力：-1

const coding = greeting.indexOf("コーディング", 5);
// 第2引数は検索を開始するインデックスを指定します。
// この引数はオプションであり、省略した場合は先頭（0）から検索されます。
// インデックスは常に左端から右方向にカウントされます。
// 引数の値が5であるため、6番目の位置から検索を開始すると文字列「コーディング」が見つかり、
// 左端（インデックス0）から数えた文字列「コ」のインデックスは7になります。

console.log(coding); // 出力：7

参考にしてください！
配列では配列indexOf()が同じ役割を果たします。

参考にしてください！
文字列内で特定の文字列が最後に出現する位置を検索するには、lastIndexOf()関数を使用してください。

構文

strはindexOf()関数を適用する対象となる文字列です。

引数

文字列indexOf()関数の引数の説明
`searchValue`	必須。検索する文字列です。大文字と小文字を区別します。何も値が指定されていない場合は、文字列`"undefined"`を検索対象の文字列として使用します。
`fromIndex`	オプション。検索を開始する`0`ベースのインデックスです。省略した場合、デフォルト値として`0`が使用されます。負の値を指定することができ、この場合は配列の末尾から逆方向にカウントされます。ただし、検索自体は依然として左から右へ行われます。 `indexOf()`関数を適用する対象の文字列の長さ（`str.length`）以上の値を指定した場合は、`-1`を返します。

戻り値

indexOf()関数を適用する対象の文字列内から、引数として渡された文字列を検索し、最初に見つかった（出現した）文字列のインデックスを返します。
引数として渡された文字列が見つからない場合は、-1を返します。

引数と戻り値の例

JavaScript

/*
 * 引数として渡された文字列が、indexOf()関数を適用する文字列内に重複して存在する場合、
 * 最初に見つかった（出現した）文字列のインデックスを返します。
*/
const str = "色は赤、青、青、黄色です。";

// 文字列strから文字列「青」を検索し、最初に見つかった（出現した）文字列のインデックスを返します。
const val_1 = str.indexOf("青");

// 文字列str内には、検索対象の文字列「青」が2つ存在します。
// インデックス8と12に存在します。
// しかし、最初に見つかった検索対象文字列のインデックスである8を返します。
console.log(val_1); // 出力：8

// 文字列str内に引数として渡された文字列「緑」が存在しないため、-1を返します。
const val_2 = str.indexOf("緑");
console.log(val_2); // 出力：-1

const val_3 = str.indexOf("は", 1);
// 第2引数は検索を開始するインデックスを指定します。
// この引数はオプションであり、省略した場合は先頭（0）から検索されます。
// 引数の値が1であるため、2番目の位置から検索すると検索対象の文字列「は」が見つかり、
// 左端（インデックス0）から数えた文字列「は」のインデックスは2になります。

console.log(val_3); // 出力：2

//////////////////////////////////////////
const undefinedStr = "値が代入されていない変数の値はundefinedと呼ばれます。";
const val_4 = undefinedStr.indexOf();

// 第1引数に何も値が指定されていない場合、
// 文字列「undefined」を検索対象の文字列として使用します。
// 「undefined」のインデックスである18を返します。
console.log(val_4); // 出力：18

注意点

indexOf()関数で文字列を検索する際は、大文字と小文字を区別します。

JavaScript

const redString = "red";
const searchRed = redString.indexOf("Red");

// 大文字の「R」と小文字の「r」は区別されます。
console.log(searchRed); // 出力：-1

この関数に関連する関数を参照してください。

さまざまな活用例

indexOf()関数に関連するさまざまな活用例です。

部分文字列の存在確認

indexOf()関数を使用すると、文字列内に特定の部分文字列が存在するかどうかを確認できます。戻り値が-1でない場合、その部分文字列は存在します。

JavaScript

const str = "Hello, world!";

if (str.indexOf("world") !== -1) {
    console.log("部分文字列が存在します。");
} else {
    console.log("部分文字列は存在しません。");
}

// 出力：「部分文字列が存在します。」

部分文字列の存在有無を確認する関数としては、includes()関数があります。
includes()関数は、文字列内に指定した文字列が含まれている場合はtrueを、含まれていない場合はfalseを返す関数です。部分文字列の存在確認については、indexOf()関数よりもincludes()関数のほうが直感的で、使いやすいと言えます。

大文字と小文字を区別しない文字列検索

indexOf()関数は検索対象の文字列の大文字と小文字を区別しますが、toLowerCase()関数を使用することで、大文字と小文字を無視して文字列内の部分文字列を検索できます。

補足説明
toLowerCase()関数は文字列オブジェクトのメソッドの一つで、文字列をすべて小文字に変換する関数です。

JavaScript

const str = "Hello, World!";
const searchStr = "world";

if (str.toLowerCase().indexOf(searchStr.toLowerCase()) !== -1) {
    console.log("大文字と小文字に関係なく部分文字列が存在します。");
}

// 出力：「大文字と小文字に関係なく部分文字列が存在します。」

特定の文字列の繰り返し回数

JavaScript

// 与えられた文字列
const str = "Hello, world! Hello, universe!";

// 検索したい部分文字列
const searchStr = "Hello";

let count = 0;

// 文字列内で最初の出現位置を検索
let idx = str.indexOf(searchStr);

// 出現位置が見つからなくなるまで繰り返す
while (idx !== -1) {
    // 出現回数を加算
    count++;

    // 次の出現位置を検索するため、直前の出現位置の次から再検索
    idx = str.indexOf(searchStr, idx + 1);
}

// 検索対象の文字列の出現回数を出力
console.log("検索対象の文字列の出現回数:", count);
// 出力：検索対象の文字列の出現回数: 2

コードの補足説明
while文は、条件式が真（true）である間、コードブロックを繰り返し実行するループ文です。

上記のコードでは、indexOf()関数を使用して"Hello"文字列の最初の出現位置を検索し、その位置以降から再度indexOf()を呼び出して次の出現位置を検索します。この処理を繰り返し、出現回数（count）を1つずつ加算していくことで、"Hello"文字列が出現する回数を計算します。