【JavaScript】配列に特定の文字列が含まれるか検索する方法

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptで配列に特定の文字列が含まれるか検索する方法をいくつかご紹介してます。

上記の疑問にお答えします。

では、解説していきます。

配列に特定の文字列が含まれるか検索する方法

JavaScriptで配列を扱う際に、配列内にある要素を検索するケースは多いです。その際によく使用する下記メソッドの使い方についてまとめました。

• indexOf()
• lastIndexOf()
• every()
• some()
• find()
• findIndex()
• includes()

各メソッドの使い方について、詳しく解説していきます。

indexOf()

indexOf()は、引数に与えられた要素と「同じ要素」が配列内に存在するかを前方から検索し、trueであればインデックス番号を、falseであれば-1を返します。

注意点としては、同じ要素が配列内に存在するかを確認するという点です。いくつかの方法で検索結果を検証してみます。

1. 同じ要素を指定した場合

const arr = ['tanaka', 'yamada', 'sato', 'suzuki', 'tanaka'];
const pattern = 'tanaka';
arr.indexOf(pattern);

//result 0;

2. 大文字で指定した場合

const arr = ['tanaka', 'yamada', 'sato', 'suzuki', 'tanaka'];
const pattern = 'Tanaka';
arr.indexOf(pattern);

//result -1;

3. 部分的に指定した場合

const arr = ['tanaka', 'yamada', 'sato', 'suzuki', 'tanaka'];
const pattern = 'tana';
arr.indexOf(pattern);

//result -1;

4. 正規表現で指定した場合

const arr = ['tanaka', 'yamada', 'sato', 'suzuki', 'tanaka'];
const pattern = '/na/';
arr.indexOf(pattern);

//result -1;

検証結果

• 大文字・小文字は区別される
• 正規表現は使えない
• 完全一致した場合のみ「true」を返す

参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

lastIndexOf()

lastIndexOf()は、引数に与えられた要素と「同じ要素」が配列内に存在するかを後方から検索し、trueであればインデックス番号を、falseであれば-1を返します。

注意点としては、indexOf()と同様に同じ要素が配列内に存在するかを確認するという点です。いくつかの方法で検索結果を検証してみます。

1. 同じ要素を指定した場合

const arr = ['tanaka', 'yamada', 'sato', 'suzuki', 'tanaka'];
const pattern = 'tanaka';
arr.lastIndexOf(pattern);

//result 4;

2. 大文字で指定した場合

const arr = ['tanaka', 'yamada', 'sato', 'suzuki', 'tanaka'];
const pattern = 'Tanaka';
arr.lastIndexOf(pattern);

//result -1;

3. 部分的に指定した場合

const arr = ['tanaka', 'yamada', 'sato', 'suzuki', 'tanaka'];
const pattern = 'tana';
arr.lastIndexOf(pattern);

//result -1;

4. 正規表現で指定した場合

const arr = ['tanaka', 'yamada', 'sato', 'suzuki', 'tanaka'];
const pattern = '/na/';
arr.lastIndexOf(pattern);

//result -1;

検証結果

• 大文字・小文字は区別される
• 正規表現は使えない
• 完全一致した場合のみ「true」を返す

参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf

every()

every()は、引数に指定されたコールバック関数のテストを実施し、配列内の全要素が条件を満たした場合はtrueを、１つでも満たさない要素があればfalseを返します。

下記の配列を使っていくつかサンプルを作って検証してみます。

const arr = [1, 2, 3, 4, 5];

すべてが0より大きい値であれば

arr.every(value => value > 0);

//result true;

すべてが3未満の値であれば

arr.every(value => value < 3);

//result false;

また、引数のコールバックには直接関数を指定することができます。

関数指定

function check(value) {
    return value > 0;
}

const arr = [1, 2, 3, 4, 5];
arr.every(check);

//result true;

無名関数

arr.every(
    function(value){
        return value > 0;
    }
);

//result true;

参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every

some()

some()は、引数に指定されたコールバック関数のテストを実施し、配列内の１つでも条件を満たした場合はtrueを、すべて満たさない場合はfalseを返します。

例えば、下記のような配列があるとします。

const arr = [1, 2, 3, 4, 5];

some()で配列が持っている要素に「3」という要素があるかを検索すると、

arr.some(value => value === 3);

//result true;

存在する要素なのでtrueが返ります。

もし存在しない要素をsomeメソッドの引数に指定すると、

const arr = [1, 2, 3, 4, 5];
arr.some(value => value === 0);

//result false;

存在しないためfalseが返ります。

参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some

find()

find()は、テスト関数の結果を満たす要素が配列内にあるかを検索し、存在した場合は最初に出現した要素を、存在しなければundefinedを返します。もし、テスト関数を満たす要素が複数存在しても最初に出現した要素だけを返します。

const arr = ['tanaka', 'yamada', 'sato', 'suzuki', 'tanaka'];
arr.find(element => element === 'tanaka');

//result 'tanaka';

参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find

findIndex()

findIndex()は、テスト関数の結果を満たす要素が配列内にあるかを検索し、存在した場合は最初に出現した要素のインデックスを、存在しなければundefinedを返します。もし、テスト関数を満たす要素が複数存在した場合は最初に出現した要素のインデックスだけを返します。

const arr = ['tanaka', 'yamada', 'sato', 'suzuki', 'tanaka'];
arr.find(element => element === 'tanaka');

//result 0;

参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex

includes()

includes()は、配列内に指定した値が存在する場合はtrueを、存在しなければfalseを返します。IEには対応していませんので、使用される場合は要件を確認しておきましょう。

const arr = ['tanaka', 'yamada', 'sato', 'suzuki', 'tanaka'];
const pattern = 'sato';
arr.includes(pattern);

//result true;

参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

最後に

配列の文字列を検索するメソッドは数多く用意されています。配列内の要素の部分一致については、現状はループで回して正規表現で確認する方法が有効なようです。

Arrayオブジェクトにつきましては、下記ページに詳しくまとめられています。配列は頻繁に使用するオブジェクトですので、主要メソッドの使い方をマスターしておくことで、コーディングがよりスムーズに進むかもしれませんね。

参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

以上、JavaScriptで配列に特定の文字列が含まれるか検索する方法のご紹介でした！