catch-img

indexOfを使って文字列を検索、確認しよう。使い方と書き方まとめ

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

目次[非表示]

  1. 1.indexOfを使って文字列を検索しよう
    1. 1.1.indexOfメソッドについて知ろう
  2. 2.indexOfの使い方 基本編
    1. 2.1.文字列の検索方法
    2. 2.2.文字の後ろから検索する方法
    3. 2.3.配列を検索する方法
    4. 2.4.文字列の出現回数を確認する
  3. 3.その他の検索方法についても知ろう
    1. 3.1.searchを使った検索
    2. 3.2.matchを使った検索
    3. 3.3.その他のメソッド
    4. 3.4.「==」と「===」についても知ろう
  4. 4.文字列検索を使って便利なサイトを作ろう

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

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

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

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

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

indexOfの使い方 基本編

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

文字列の検索方法

検索方法は、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の出現回数と同じです。このような使い方もできるので覚えておきましょう。

■関連記事

  JavaScriptでのfunction(関数)や戻り値の使い方 | Java・フロントエンド研修のジョブサポート 戻り値の取得は、色々なプログラムで利用されます。JavaScriptにおける戻り値の使い方について学んでいきましょう。function(関数)の戻り値についての基本的な書き方をはじめ、戻り値に関する基本を解説します。 Java・フロントエンド研修のジョブサポート

フロントエンド(HTML・CSS・JavaScript)入門5日-株式会社ジョブサポート

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

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

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の戻り値に困ったら。基本ルールを丁寧に解説 | Java・フロントエンド研修のジョブサポート JavaScriptには戻り値(もどりち)を返すためのreturn文があります。戻り値を適切に使えるようになると、JavaScriptでできることが増えます。戻り値の基本ルールに加え、エラーを吐いた場合の対処法について解説します。 Java・フロントエンド研修のジョブサポート

オンライン・リモート講座(入門5日・基礎10日)-株式会社ジョブサポート

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

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

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

ジョブサポートでは通年開講で貴社の希望開始日に合わせたJava・フロントエンド研修(通学、オンライン・リモート講座)の受け入れを行っており、助成金を活用すれば費用負担を軽減して研修受講ができるのでお気軽にお問い合わせ下さい。


メールマガジンの購読設定

ジョブサポートの最新情報をお届けするほか、

人事、採用教育担当者、若手エンジニア向けに

役立つ情報をお届けします。

アップロードしています。少々お待ちください。