#はじめに
JavaScriptのindexOfで躓いてしまったので、備忘録として残しておきます
#indexOfとは
文字列に含まれる部分文字列を検索する為に、indexOfメソッドを利用します。indexOfメソッドは、指定された部分文字列が最初に登場した位置を、文字列の先頭を0としたインデックス番号で返します。文字列が見つからなかった場合、戻り値は-1となります。
#使い方
-
indexOfの第1引数には、検索したい文字を指定します。 - そして、文字列の先頭（0番目）から順番に1文字ずつ検索をしていき、最初に一致した位置（index番号）を数値で返してくれます。※（大文字・小文字は区別します）
const str= 任意の文字列
str.indexOf( 検索したい文字, 検索開始位置 );
// ※検索開始位置は省略可能
##indexOfの文字列(String)検索方法
例で説明します
//①数列'123547'から７を取り出したい場合
const numbers = '123547';
const result = numbers.indexOf(7);
console.log(result);
//②文字列 'dog,shark,hamster,fox'からhamsterを取り出したい場合
const animals ='dog,shark,hamster,fox';
const result = animals.indexOf('hamster');
console.log(result);
出力結果
//①の場合
5
//②の場合
10
-
①の場合はインデックス番号5番なので正しいことがわかりました！
-
②の場合は文字列の
hamsterのhの位置がインデックス番号10番目なことを教えてくれています。 -
文字列にすると
,で一つ一つ区切られていると認識されている訳てはないので気を付けましょう。
(私はここで躓きました)
###検索開始位置を指定する
(例)
//9番から指定
const animals = 'dog,fox,shark,hamster,fox';
const result = animals.indexOf('fox', 9);
console.log(result);
出力結果
22
##lastIndexOfで後ろから検索する
-
lastIndexOfでの「後方検索」について学習しましょう！ -
「後方検索」とは、任意の文字列を後ろから検索していくことで「
indexOf()」と反対の検索方法になります。 -
使い方説明します、
var str = 任意の文字列
str.lastIndexOf( 検索したい文字, 検索開始位置 );
- indexOf()構文は同じです。
- 違うところは、「
indexOf()」が文字列の先頭から1文字ずつ順番に検索していたのに対して、この「lastIndexOf()」は文字列の後ろから先頭に向かって検索していくという点です！
(例)
// 任意の文字列
const animals = 'dog,fox,shark,hamster,fox';
// 「apple」を末尾から検索する
const result = animals.lastIndexOf( 'fox' );
console.log( result );
出力結果
22
-
文字列内の後ろから一致するまで検索をしていきます。
-
先ほどの「
indexOf()」の場合だと、文字列の先頭から検索するので5番目から始まる「fox」が一致しましたが、「lastIndexOf()」は後ろから検索するので22番目が一致します。 -
後ろから検索しても返ってくる「値」は「
indexOf()」と同じく先頭から順番に数えた文字位置になるので注意してください。
#「indexOf」の配列(Array)検索方法
- これまでは文字列内のキーワードを検索してきましたが、実は配列に格納されているキーワードの検索も「
indexOf()」を使うことが可能です。
const animals =['dog','shark','hamster','fox'];
const result = animals.indexOf('hamster');
console.log(result);
出力結果
2
文字列の場合と同様に、最初に一致したインデックスのみ返す点と、見つからなかった場合は「-1」が返り値になるという点を覚えておきましょう！
#まとめ
indexOfの文字列の初めから一文字ずつ数えて出力するとこで躓いたので
記事を書きました
参考にしていただけると嬉しいです！
##参考リンク
JavaScript入門】文字列の検索まとめ(indexOf/search/match/test)