JavaScript 文字列 indexOf()関数

😄この投稿は、codingeverybody.jpのコンテンツをもとに作成しています。

定義と使い方

文字列indexOf()関数は、文字列内から引数として渡された文字列を検索し、最初に見つかった（出現した）文字列のインデックスを返す関数です。引数として渡された文字列が見つからない場合は-1を返します。
この関数は、文字列内で文字の位置を検索したり、含まれているかどうかを確認したりする際に便利です。この関数は、大文字と小文字を区別します。

基本例

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

構文

str.indexOf(searchString)
str.indexOf(searchString, position)

引数

# searchString

必須。検索する文字列です。大文字と小文字を区別します。
何も値が指定されていない場合は、文字列"undefined"を検索対象の文字列として使用します。

# position

オプション。検索を開始する0ベースのインデックスです。

• 省略した場合、デフォルト値として0が使用されます。
• 負の値を指定することができ、この場合は配列の末尾から逆方向にカウントされます。ただし、検索自体は依然として左から右へ行われます。
• indexOf()関数を適用する対象の文字列の長さ（str.length）以上の値を指定した場合は、-1を返します。

戻り値

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

# 引数と戻り値の例

/*
 * 引数として渡された文字列が、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()関数で文字列を検索する際は、大文字と小文字を区別します。

例

# 部分文字列の存在確認

const str = "Hello, world!";

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

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

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

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

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

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

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

// 与えられた文字列
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

参考資料