JavaScriptで文字列検索!indexOfメソッド

@ハクト 2023-05-26 05:47:19に投稿

指定した文字や文字列が最初に出現するインデックスを返すindexOfメソッド。このメソッドを使うと、文字列の中で特定の文字または文字列が初めて出現する位置を特定することができます。

今回はそんなindexOfメソッドの基本的な使い方から便利な使用例を紹介します。

indexOfメソッドとは

配列や文字列内で指定した要素や文字列が最初に現れるインデックスを返します。見つかった最初の文字を0とし、もし指定した要素が見つからない場合は、-1を返します。

 

const str = 'Hello, world!';
console.log(str.indexOf('o')); // 出力: 4
console.log(str.indexOf('z')); // 出力: -1

const arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(3)); // 出力: 2
console.log(arr.indexOf(6)); // 出力: -1

 

要素の重複チェック

「indexOf」と「lastIndexOf」を組み合わせることで、配列や文字列に特定の要素や文字列が複数回出現するかどうかをチェックできます。

const arr = [1, 2, 3, 2, 1];
const checkElem = 2;
if (arr.indexOf(checkElem) !== arr.lastIndexOf(checkElem)) {
    console.log('「' + checkElem + '」 が重複しています');
}

const str = 'Hello, world! Hello, user!';
const checkStr = 'Hello';
if (str.indexOf(checkStr) !== str.lastIndexOf(checkStr)) {
    console.log('「' + checkStr + '」が重複しています');
}

 

複数の値に対するチェック

変数の値が特定の値のリスト(配列)に含まれるかどうかを判定します。これにより「or」を使用し一つ一つの値に対して個別に比較する必要がなくなり条件をスッキリと書けます。

//orで判定
if (hoge === 'aaa' || hoge === 'bbb' || hoge === 'ccc') {
  ...
}

//indexOfで判定
if (['aaa', 'bbb', 'ccc'].indexOf(hoge) !== -1) {
  ...
}

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter