【JavaScript】includes()で特定の文字列が含まれるか判定する

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

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

上記の疑問にお答えしていきたいと思います。

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

判定にはString.prototype.includes()を使おう！

文字列の中に特定の文字列が含まれるか判定するにはString.prototype.includes()を使用します。大文字・小文字は区別され、文字列の中に特定の文字列が含まれている場合は「true」を、含まれていない場合は「false」を返します。

使い方は簡単で、下記のように指定するだけです。

str.includes(search);

上記では「str」の中に「search」の文字列が含まれるか判定します。また、第二引数を指定することで、文字列（str）の中のどの位置から検索を開始するかを指定することもできます。

str.includes(search, 5);

直感的に使える便利なメソッドですね！

では、実際にサンプルを作って文字列の中に文字列が含まれるか判定してみましょう。

文字列の中に特定の文字列が含まれるか判定してみる

前項のサンプルと同様に「str」の中に「search」が含まれるかを判定してみます。

JS

const str = "Lorem ipsum dolor sit amet";
const search = "sit";

console.log(str.includes(search));

実行結果

true

問題なく判定してくれていますね！とても簡単です。

続いて大文字・小文字が区別されるかも検証してみましょう。

JS

const str = "Lorem ipsum dolor sit amet";
const search = "Sit"; //Sを大文字に

console.log(str.includes(search));

実行結果

false

第二引数の開始位置を指定した状態でも検証してみます。

JS

const str = "Lorem ipsum dolor sit amet";
const search = "Sit"; //Sを大文字に

console.log(str.includes(search, 19));

実行結果

false

すべて問題なさそうですね！めっちゃ使いやすいです。

ただ一点問題がありまして、includes()はES6で追加された新しいメソッドです。そのため、IEで使用することができません。またIEが足を引っ張るのか……そう思ってしまいますよね。

けれど大丈夫です。

ポリフィルすれば問題なし

includes()はES6で追加されたメソッドなのでIEで使用することはできないですが、下記のコードを共通で読み込むスクリプトファイルに追加することで、includes()がエミュレートされてIEでも使用することが可能となります。

if (!String.prototype.includes) {
    String.prototype.includes = function(search, start) {
        'use strict';
        if (search instanceof RegExp) {
            throw TypeError('第一の引数はRegExpであってはなりません。');
        } 
        if (start === undefined) { start = 0; }
            return this.indexOf(search, start) !== -1;
    };
}

これで心置きなくincludes()を使用することができますね！

最後に

JavaScriptは古い仕様や新しい仕様によってブラウザ毎に使える機能、使えない機能が存在します。今回のように新しく策定された機能を使用する場合は「MDN」のようなドキュメントを参照して各ブラウザの対応状況を確認する癖をつけておくと良いかもしれませんね！

以上、JavaScriptで文字列の中に特定の文字列が含まれるか判定するincludes()メソッドのご紹介でした！