JavaScriptでindexOfメソッドを使って文字列を検索する方法【初心者向け】

プログラミング初心者向けに、JavaScriptで【indexOf】を使う方法を解説した記事です。本記事では、indexOfをどんな時に使うのか、書き方の例などを紹介します。実際のサンプルを書きながら解説しているので、参考にしてみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptをプログラミング初心者向けに紹介した記事です。

今回は、JavaScriptでindexOfを使う方法について解説します。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

大石ゆかり

田島メンター!文字列の検索というのは何でしょうか?

田島悠介

文字列の中にある指定した文字の位置を探すことだよ。

大石ゆかり

どのような書き方があるのですか?

田島悠介

例を見ながら説明していくね!

 

indexOfとは

プログラムを作っていると、文字列の中に、ある文字が含まれるか、確認したい場面があるのではないでしょうか。そんな時に便利なのが、indexOf関数です。

indexOf関数は、文字列の中に指定した文字があるか探して、あればその位置を返してくれます。

また文字列だけではなく、配列の検索も行うことができます。

実際の開発現場では、文字列の内容を確認して、次に何を行うかの判断する場合などに良く用いられます。

 

indexOfの書き方

基本的なプログラムは以下のようになります。対象となる文字列の後ろに「.」ピリオドを付けて記載します。

文字列.indexOf( 検索したい文字[, 検索開始位置])

※検索開始位置は省略可能です。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

indexOfで文字列の検索をおこなう

この記事では、indexOfで文字列の検索をおこなう方法について解説します。

まずは、簡単な関数を用意します。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScriptの練習</title>
  </head>
  <body>
    <script>
    // indexOf のサンプル1
    var str1 = 'シャム, ペルシャ, ベンガル, ロシアンブルー, ペルシャ';
    var index1 = str1.indexOf('ペルシャ');
    console.log(index1);
    var index2 = str1.indexOf('ペルシャ', 7);
    console.log(index2);

    // indexOf のサンプル2
    var array1 = [ '太郎', '次郎', '三郎', '四郎' ];
    var index3 = array1.indexOf('次郎');
    console.log(index3);
    </script>
  </body>
</html>

実行すると次のようになります。

では、それぞれの内容を詳しく見ていきましょう。

 

indexOfのサンプル1

var str1 = 'シャム, ペルシャ, ベンガル, ロシアンブルー, ペルシャ';
var index1 = str1.indexOf('ペルシャ'); 
console.log(index1); 
var index2 = str1.indexOf('ペルシャ', 7); 
console.log(index2); 

こちらは、文字列の検索の例です。文字の位置は、先頭を「0(ゼロ)」として数えます。文字が見つからない場合は「-1」が返ります。

「str1」という変数を用意し、indexOfで「ペルシャ」という文字を検索し、結果を「index1」という変数に入れています。その結果、「5」という数字が出力されます。

また、2つ目は開始位置を「7」と指定した例です。この場合、7文字目から検索を行います。その結果、「26」という数字が出力されます。

 

indexOfのサンプル2

var array1 = [ '太郎', '次郎', '三郎', '四郎' ];
var index3 = array1.indexOf('次郎');
console.log(index3);

こちらは、配列の検索の例です。

「array1」という配列を用意し、indexOfで「次郎」という文字を検索します。該当する要素が2番目にありますが、先頭を「0(ゼロ)」として数えるため、結果、「1」という数字が出力されます。

 

今回の記事は以上です。

 

大石ゆかり

indexOfは、簡単に文字列や配列を検索できるんですね。

田島悠介

そうだね。例えば住所に都道府県名が含まれるかなど、応用範囲が広いから覚えておくと便利だよ!

大石ゆかり

分かりました〜。

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。