JavaScriptでindexOfを使って文字列を検索する方法

2024-05-03

当サイトでは一部リンクに広告が含まれています

JavaScriptには文字列を検索するためのさまざまなメソッドがありますが、その中でも最もよく使われるのが「indexOf」です。

文字列内から特定の部分文字列の位置を見つけ出すのに役立つメソッドで、初心者でも比較的簡単に使いこなせるのが特徴です。

この記事では、そんな「indexOf」の基本的な使い方から、応用的なテクニックまで幅広く解説していきます。

正規表現を使った高度な検索方法や、「lastIndexOf」「search」「match」など関連メソッドとの違いについても触れるので、JavaScriptでの文字列操作スキルを総合的に高めたい方は要チェックです。

それでは、実際のコード例を交えながらみていきましょう！

この記事を書いた人

未経験からWebエンジニアとして転職成功（年収 30% アップ）
現役のフルスタックエンジニアとして活躍中
開発チームリーダーとして複数プロジェクトをリード
副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ

indexOfメソッドの基本

indexOfとは？

indexOfは、文字列（String）に対して使えるメソッドの一つです。

指定した部分文字列が最初に登場する位置を、先頭からの文字数（インデックス番号）で返してくれます。

一般的な書式は次の通りです。

文字列.indexOf(検索する文字列, 検索開始位置);

検索開始位置は省略可能で、指定しない場合は文字列の先頭（0番目）から検索します。

見つからなかった場合は「-1」を返すのも特徴の一つです。

基本的な使い方

実際の使用例を見てみましょう。

let str = "りんご,みかん,バナナ,いちご,バナナ";
console.log(str.indexOf("バナナ")); //8
console.log(str.indexOf("バナナ",9)); //18

1つ目のconsole.logでは、先頭から検索して最初に「バナナ」が登場する位置「8」（0スタートで数えて8番目）を返しています。

2つ目は検索開始位置に「9」を指定しているため、9番目以降で最初に「バナナ」が見つかる「18」を返しているというわけです。

配列の検索

indexOf は配列（Array）の検索にも使えるのをご存知ですか？

let array = ["りんご", "みかん", "バナナ", "いちご"];
console.log(array.indexOf("バナナ")); //2

このように配列の要素を対象に検索し、マッチした要素のインデックス番号を返してくれます。

「見つからない場合は-1」というルールも同様です。

より使いこなすためのテクニック

後ろから検索したい時は？

indexOf は常に先頭から検索を行いますが、末尾から検索したい場合は「lastIndexOf」を使います。

let str = "りんご,みかん,バナナ,いちご,バナナ";
console.log(str.lastIndexOf("バナナ")); //18

後ろから検索しますが、返す数値は先頭からの文字数である点に注意しましょう。

出現回数を数えたい時は？

indexOfを使うと、ある文字列が何回出現したかを数えることもできます。

let str = "114514114514";
let count = 0;
let pos = str.indexOf("1");

while (pos !== -1) {
  count++;
  pos = str.indexOf("1", pos + 1);
}

console.log(count); //6

whileループと組み合わせることで、指定した文字列の出現回数を求めることができました。

今後のプログラミングで活用できるシンプルながらも実用的なテクニックだと言えるでしょう。

正規表現を使った高度な検索

正規表現とは？

ここからは、正規表現を使ったより高度な検索方法について解説します。

正規表現とは、文字列のパターンを表現するための方法のことです。

特殊な記号を組み合わせることで「〇文字の数字が3つ続く」「アルファベットで始まる」といった複雑な条件を表現できます。

例えば「半角数字3桁-半角数字4桁」のような電話番号のパターンは、正規表現では以下のように記述します。

/\d{3}-\d{4}/

一見難解に感じるかもしれませんが、ルールさえ覚えれば非常に強力で便利なツールとなります。

searchメソッド

正規表現を使って検索を行う際によく使われるのが、「search」メソッドです。

indexOfと同じようにマッチした位置を返しますが、引数に正規表現を直接指定できるのが特徴です。

let str = "123,1234,12345";
console.log(str.search(/\d{4}/)); //4

この例では「4桁の数字」にマッチする正規表現を指定しているため、最初に「1234」が登場する位置「4」を返しています。

matchメソッド

正規表現によるマッチングに特化したもう一つのメソッドが「match」です。

searchとの違いは、マッチした文字列そのものを返してくれる点です。

let str = "123,1234,12345";
console.log(str.match(/\d{4}/)); //["1234"]

配列形式で返ってくるのが分かります。

さらに、正規表現の末尾に「g」を付けるとグローバル検索（全マッチ）が行えるのも大きな特徴です。

let str = "123,1234,12345";
console.log(str.match(/\d{3,5}/g)); //["123", "1234", "12345"]

「3〜5桁の数字」という条件で、該当する部分文字列をすべて抽出しています。

その他の検索・比較メソッド

最後に、文字列検索や比較に使える他のメソッドをいくつか紹介します。

test：正規表現にマッチするかどうかを真偽値で返す
includes：指定した文字列を含むかどうかを真偽値で返す
startsWith：指定した文字列で始まるかどうかを真偽値で返す
endsWith：指定した文字列で終わるかどうかを真偽値で返す

また、よく使われる比較演算子に、「==」（等価）と「===」（厳密等価）があります。

違いは、「===」が値だけでなく型もチェックする点です。

console.log("1" == 1);  //true
console.log("1" === 1); //false

数値の「1」と文字列の「”1″」は、「==」では等しいと判定されますが、
「===」では型が違うためfalseとなります。

意図しない挙動の原因になることも多いので、しっかり覚えておきましょう。

まとめ

JavaScriptでの文字列検索は、indexOfを始めとする多彩なメソッドを使いこなすことで、
より効率的で可読性の高いコーディングが可能になります。

特に正規表現の習得は、一見ハードルが高そうに見えて、
慣れるまでは苦労するかもしれません。

ですが、一度身につければあらゆる場面で活躍してくれる、エンジニアにとって必須のスキルと言えるでしょう。

まずは基本的なメソッドをしっかり理解して、少しずつ応用的な使い方を学んでいきましょう。

習得すれば、より洗練されたプログラムが書けるようになるはずです。

JavaScript を挫折せず学習するならプログラミングスクールがおすすめ！

この記事を読んでくれた方は、JavaScript を学習中、もしくは使い始めている人かと思います。
ただ、JavaScript は「知らないと困る知識・コツ」が多く、私も最初は苦労しました…。

そのため確実に就職・転職を目指すのならばプログラミングスクールでの学習を検討してみませんか？

JavaScript はフロントエンドのすべてに通じますので、体系的に学んでおくと給与アップにもつながりますよ。

おすすめのプログラミングスクールについては、別の記事でまとめていますので是非ご覧ください。

現役のエンジニア兼プログラミングスクール講師として、自信を持っておすすめできるスクールだけを紹介しています！

Muscle Coding

JavaScriptを学べるおすすめプログラミングスクールを現役エンジニアが解説 | Muscle Coding JavaScriptを学べるプログラミングスクールの中でも特におすすめのスクールを現役エンジニアが詳しく解説します。料金、給付金、受講期間、サポート、チーム開発、など、各…