【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()メソッドのご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら