JavaScriptのメソッドの一つである「indexOf」の基本的な使い方について解説します。正規表現を用いた検索方法をはじめ、indexOf以外の検索についても紹介しますので、参考にしましょう。

社内のエンジニア不⾜を解決するたった1つの解決⽅法はこちら

indexOfを使って文字列を検索しよう

JavaScriptにはさまざまなメソッドがあります。その中で、今回はindexOfの使い方について解説します。まずは、indexOfの持つ基本的な役割について知っておきましょう。

簡単なWebサイトの改修の内製化を目指すフロントエンド(HTML・CSS・JavaScript)入門5日はこちら

indexOfメソッドについて知ろう

indexOfメソッドは、Stringクラス（文字列を扱うクラス）のメソッドの一つで、指定した文字列が最初に登場する位置を、文字列の先頭を0として扱ったインデックス番号で戻り値として返します。

指定した文字列が出現しない場合は、戻り値を-1で返します。

indexOfの使い方 基本編

indexOfメソッドの具体的な使い方を見ていきましょう。まずは基本的な使い方から解説していきます。

全国の若手~ベテランエンジニアが受講している個別指導のオンライン・リモート講座(入門5日・基礎10日)はこちら

文字列の検索方法

検索方法は、indexOfの値に検索したい文字列を指定するだけです。次のコードと共に見ていきましょう。

let str = 'りんご,みかん,バナナ, いちご, バナナ';
let result = str.indexOf( 'バナナ' );
console.log( result );

このコードでは、8という結果を返します。これは（,を含んだ）左から数えて、バナナの文字が8文字目から始まるためです。

let str = 'りんご,みかん,バナナ, いちご, バナナ';
let result = str.indexOf( 'バナナ' ,9);
console.log( result );

この場合は2番目のバナナが始まる文字数の18という値を返します。

文字の後ろから検索する方法

後ろから検索する場合、lastindexOfというメソッドを使います。文字列の後ろから数えて一致するまでの文字を検索しています。;

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

この結果は18となります。検索自体は後ろからですが、カウント自体は前から行います。

配列を検索する方法

配列に格納されている値についても、indexOfを使って検索することができます。

let array = ['りんご', 'みかん', 'バナナ', 'レモン'];
let result = array.indexOf( 'バナナ' );
console.log( result );

配列の検索方法についても書き方自体は変わりません。配列の場合は、文字数ではなく要素数で検索されるため、この場合の結果はインデックス番号が2と表示されます。

文字列の出現回数を確認する

少し応用して、文字列の中に何回同じ文字が出現したかを調べる方法について記載します。

let str = '123451234512345'; let count = 0;
let idx = 0;
idx = str.indexOf('1');
while(idx != -1){
　count++; idx = str.indexOf('1', idx + 1);
}
console.log(count);

1～5までの反復の中に、1が何回出現したかをカウントするコードです。1が現れるたびにカウントを繰り返し、最終的に1が出現しなくなる（戻り値がマイナス1になる）までカウントを続けています。

上記の式の結果は、3と表示されます。文字列の中の1の出現回数と同じです。このような使い方もできるので覚えておきましょう。

■関連記事

その他の検索方法についても知ろう

indexOfを使用する以外にも、文字列を検索する方法はあります。よく使われる方法についてピックアップして紹介します。

若手、新人エンジニアの成長を阻む 人材育成5つの失敗と解決策はこちら

searchを使った検索

searchメソッドは、正規表現による検索を行います。indexOfと同様、一致した位置を返すメソッドです。

正規表現は、「全角数字」「半角英数字」「ひらがな」「カタカナ」などの、文字列のパターンを指定することになります。

let str = '1,12,123,1234';
let result = str.search( /[1-9]{4}/ );
console.log( result );

上記のコードでは、「1～9までの数字が並んだ4桁」を検索しています。それに該当するのは「1234」だけなので、1234を検索して左から数えて文字数である9の値を返します。

matchを使った検索

matchメソッドの使い方はsearchメソッドと大きな違いはありません。違うのは、matchメソッドは値をそのまま返すという点です。

let tell = "123-456, 二二二二, 111-1111,×××-××××";
console.log( tell.match( /\d{3}-\d{4}/g ) );

末尾に「g」をつけると、複数の文字列を検出できるようになります。

このコードでは、「（半角英数字3桁）-（半角英数字4桁）」という文字列を検索していて、該当する「111-1111」が抽出されます。

なお、matchを使って文字が見つからなかった場合は「null」を返します。

その他のメソッド

searchやmatchの他にも使えるメソッドがあります。代表的なものを紹介しますので、使ってみてください。

• test：一致した文字列があるかどうかを真偽値で判定する
• carAt：指定したインデックスの1文字を抽出する
• substr：指定したインデックスから指定した文字数の文字列を抽出する
• substring：指定したインデックス間の文字列を抽出する

「==」と「===」についても知ろう

「==」と「===」は検索だけではなく、さまざまな場面で使うことになるので、違いを覚えておきましょう。次のコードを元に解説します。

let x = "1"; let y = 1;

console.log(x==y);
console.log(x===y);

2つのconsole.logがありますが、1行目はtrue、2行目のログはfalseの値を返します。この結果の違いは、「==」と「===」の意味に違いがあります。

==は「等価演算子」といって、文字列が一致しているかどうかを調べます。1が数字であっても文字として認識していても、文字列としては同じなので結果はtrueとして返します。

一方、===は「厳密等価演算子」といいます。文字列に加えて、型もチェックしているのです。

"1"は文字（string型）、1は数字（number型）という型の違いがあるため、文字列が一致していてもfalseを返します。

「==」と「===」の違いはエラー原因になることもよくありますので、覚えておきましょう。

■関連サイト

文字列検索を使って便利なサイトを作ろう

JavaScriptでは、データベースやWebサイトのメッセージなどを扱うこともあり、膨大な文字列の中で特定の文字を検索する、といった操作を行うことがあります。

短期5日・10日講座(Java・フロントエンド)研修実績はこちら

そういった場合に備えて、indexOfや正規表現などの検索手段を身につけておくと良いでしょう。インデックス番号、型の違いについてなどさまざまな検索ができるようになると、JavaScriptで扱える文字列の幅が大きく広がります。​​​​​​​