【JavaScript】JSからHTML要素を生成しよう（createElement/textContent/appendChild）
takahide
初心者がITを楽しむブログ
【JavaScript】文字列の検索をしたい（includes/indexOf）
takahide
おはようございます。タカヒデです。
本日は、「JavaScriptにおける、『文字列の検索方法』について、『includesメソッド』『indexOfメソッド』」を紹介します。
こんな人にオススメ
- JavaScriptにおける『文字列の検索方法』が理解できない
- 『includesメソッド』『indexOfメソッド』の記載方法を知りたい
今回解説する内容は、
- 該当の文字列が含まれているか
- 該当の文字列が何文字目に含まれているか
この2点です。
ぜひ本記事を参考にしてください。
Contents
文字列が含まれているか調べる（includesメソッド）
まず、該当の文字列が含まれているかどうかを調べるには『includesメソッド』を使用します。
でもこんな「文字列が含まれているか」なんて実務のどこで使うのでしょうか？
調べてみました。
例えば、「入力されたものがメールアドレスかどうかを判断したい」こんな時に使うようです。
入力フォームに「@」が含まれていればメールアドレスとみなしてOKみたいな。
ちょっと納得できましたね。
話しを戻しましょう。
記載方法から見ていきます。
//記載方法
文字列. includes(検索する文字,検索開始位置)この際、「検索開始位置」は無くても問題ありません。
以下が記載例です。
ここでは『Takahide』という文字列が含まれているかを4つのパターンで確認してみます。
①普通に検索
let text1 = "Hello Takahide.";
console.log(text1.includes("Takahide"));
//実行結果：true「Takahide」という文字列が含まれているので、「true」を出力しています。
②大文字・小文字を区別して検索
let text2 = "Hello Takahide.";
console.log(text2.includes("takahide"));
//実行結果：false小文字の「takahide」は含まれていません。
そのため、「false」が出力されています。
③検索位置を指定して検索（文字列より前を指定）
let text3 = "Hello Takahide.";
console.log(text3.includes("Takahide", 5));
//実行結果：true「Takahide」より前を指定して検索しています。
検索位置より後ろに文字列があるため「true」が出力されています。
④検索位置を指定して検索（文字列より後ろを指定）
let text4 = "Hello Takahide.";
console.log(text4.includes("Takahide", 7));
//実行結果：false検索位置が「Takahide」の文字列に入ってしまっています。
そのため、該当なしとみなされ「false」が出力されています。
これで、どのパターンだと「true」でどのパターンだと「false」かが何となく分かりましたね。
該当の文字列が何文字目に含まれているか（indexOfメソッド）
続けて、文字列の位置を検索するには『indexOfメソッド』を使用します。
つまり、「該当の文字列が何文字目に含まれているか」を調べたいわけです。
こちらも実際にどんなシーンで使うのか調べてみました。
どうやら、「メールアドレスをユーザー名とドメイン名を分けて表示するとき」に使用するようです。
メールアドレスの「@」の位置を把握することで分けて表示できるんですね。
「そんなこと使い方しているサイトあるのかな…？」と思いましたが、気にせずいきましょう。
こちらも記載方法を見ていきます。
//記載方法
文字列.indexOf(検索する文字,検索開始位置)こちらも、「検索開始位置」は無くても問題ありません。
以下が記載例です。
『Takahide』という文字列が前から何番目に位置するのかを4つのパターンで記載します。
①普通に検索
let text1 = "Hello Takahide.";
console.log(text1.indexOf("Takahide"));
//実行結果：6「Takahide」という文字列が含まれているので「6」を出力していることが分かります。
「あれ？７番目じゃないの？」と思われた方、プログラミングの世界では「0」から数え始めるのです。
詳しくは次の章で解説します。
②大文字・小文字を区別して検索
let text2 = "Hello Takahide.";
console.log(text2.indexOf("takahide"));
//実行結果：-1小文字の「takahide」は含まれていません。
そのため、「-1」が出力されています。
③検索位置を指定して検索（文字列より前を指定）
let text3 = "Hello Takahide.";
console.log(text3.indexOf("Takahide", 5));
//実行結果：6「Takahide」より前を指定して検索しています。
検索位置より後ろに文字列があるため「6」が出力されています。
④検索位置を指定して検索（文字列より後ろを指定）
let text4 = "Hello Takahide.";
console.log(text4.indexOf("Takahide", 7));
//実行結果：-1検索位置が「Takahide」の文字列に入ってしまっています。
そのため、該当なしとみなされ「-1」が出力されています。
見てもらって分かるように、「indexOfメソッド」の場合には、該当しない時に『-1』を出力します。
falseではないので注意してください。
※注意点：文字列の数え方は「0」から始まる
多くの場合、順番を数えるとき『1』から数えますが、JavaScriptに限らずプログラミングの世界では『0』から始まるのです。
先ほどの「indexOfメソッド」の際にも「あれ？」って思いましたよね。
例えば先ほどの例でいくと、『Takahide』という文字列は『1』から数えた場合は『7番目』ですが、『0』から数えるため『6番目』となります。
そのため検索開始位置を『7』にした場合は該当無しとなりました。
分かりづらいですがそういうものだと覚えておきましょう。
まとめ
以上が「JavaScriptにおける『文字列の検索方法』について、『includesメソッド』『indexOfメソッド』」でした。
まとめ
- 文字列の有無を検索するには『includesメソッド』を使用
- 文字列の位置を検索するには『indexOfメソッド』を使用
- プログラミングの世界では順番を数えるときには『0』から始まる
この記事が誰かの参考になれば幸いです。
お疲れさまでした。
ABOUT ME
通信会社の企画職で働く30代
非エンジニアでありながら半分趣味でITエンジニアリングやプログラミングを学習中
IT初心者が楽しいと思えるように発信することを目指しています
↓Xもやっているのでフォローしてね
