もくじ
JavaScriptでWeb開発をしていると、「特定の文字列が含まれているか？」を判定したい場面はとても多くあります。
例えばURLやクラス名、ユーザーの入力チェックなど、さまざまなシーンで部分一致の判定が役立ちます。
本記事では、JavaScriptで文字列の部分一致を判定する複数の方法を、わかりやすいサンプルコード付きで解説します。
用途や目的に応じて最適な手法を選べるように、特徴や使い分けのポイントも紹介します。
JavaScriptで文字列の前方一致を判別する方法は以下の記事で紹介しています。
-
【JavaScript】文字列の前方一致を判別する方法6選
もくじstartsWith()メソッドで前方一致を判定正規表現（RegExp）を使って前方一致を判定indexOf()メソッドで前方一致を判定slice()メソッドで前方一致を判定substring( ...
JavaScriptで文字列の後方一致を判別する方法は以下の記事で紹介しています。
-
【JavaScript】文字列の後方一致を判定する方法5選
もくじendsWith()メソッドで後方一致を判定正規表現（RegExp）を使って後方一致を判定slice()メソッドで後方一致を判定lastIndexOf()メソッドで後方一致を判定substrin ...
includes()メソッドで部分一致を判別
JavaScriptで特定の文字列を含むかを確認する最も簡単な方法は、includes()メソッドを使用することです。
includes()メソッドは、文字列と指定した文字列を比較し、指定した文字列が含まれている場合にtrueを返します。
シンプルで直感的な方法なので、可読性にも優れています。
includes()メソッドのブラウザ別対応状況は以下から確認できます。
https://caniuse.com/?search=includes
const str = 'JavaScript is awesome!';console.log(str.includes('awesome')); // trueconsole.log(str.includes('Awesome')); // false正規表現（RegExp）を使って部分一致を判別
includes()メソッドよりも柔軟な部分一致判定を行いたい場合は、正規表現を使用することで実現可能です。
例えば、大文字・小文字を無視した部分一致の判定が可能です。
/awesome/はawesomeが含まれているかを確認する正規表現です。
iフラグを使うと、大文字・小文字を無視した部分一致の判定ができます。
const str = 'JavaScript is awesome!';console.log(/awesome/.test(str)); // trueconsole.log(/Awesome/.test(str)); // falseconsole.log(/awesome/i.test(str)); // true（大文字小文字無視）console.log(/Awesome/i.test(str)); // true（大文字小文字無視）indexOf()メソッドで部分一致を判別
indexOf()メソッドを使い、特定の文字列が含まれているかを確認することができます。
includes()メソッドがサポートされていない古いブラウザで部分一致を判別したい場合に有効です。
indexOf()メソッドは指定した文字列が見つからない場合、-1を返します。
-1以外なら含まれていると判定できます。
const str = 'JavaScript is awesome!';console.log(str.indexOf('awesome') !== -1); // trueconsole.log(str.indexOf('Awesome') !== -1); // falsesearch()メソッドで部分一致を判別
search()メソッドを使い、特定の文字列が含まれているかを確認することができます。
includes()メソッドがサポートされていない古いブラウザで部分一致を判別したい場合に有効です。
search()メソッドは指定した文字列が見つからない場合、-1を返します。
-1以外なら含まれていると判定できます。
また、search()メソッドは文字列や正規表現が使えるため、通常の文字列を使った検索や大文字・小文字を無視した検索が可能です。
const str = 'JavaScript is awesome!';console.log(str.search('awesome') !== -1); // trueconsole.log(str.search('Awesome') !== -1); // falseconsole.log(str.search(/awesome/i) !== -1); // true（大文字小文字無視）console.log(str.search(/Awesome/i) !== -1); // true（大文字小文字無視）match()メソッドで部分一致を判別
match()メソッドは、正規表現で文字列内を検索し、マッチした部分がある場合に配列を返します。
見つからなければnullを返すため、nullかどうかで特定の文字列が含まれているかを確認できます。
const str = 'JavaScript is awesome!';console.log(str.match(/awesome/)); // ["awesome"]console.log(str.match(/Awesome/)); // nullconsole.log(str.match(/awesome/i)); // ["awesome"]console.log(str.match(/Awesome/i)); // ["awesome"]split()メソッドで部分一致を判別
split()メソッドで指定した文字列を基準に分割し、分割結果が複数に分かれているかどうかで含まれるかを確認できます。
split('awesome')でawesomeが基準で分割されるため、含まれているとlengthは1より大きくなります。
含まれない場合、lengthは1になります。
const str = 'JavaScript is awesome!';console.log(str.split('awesome').length > 1); // trueconsole.log(str.split('Awesome').length > 1); // falsereplace()メソッドで部分一致を判別
replace('awesome', '')でawesomeを空文字に置き換え、元の文字列と異なれば含まれていると判定することができます。
replaceは置き換えがなければ元の文字列が返るため、この差分で判定します。
const str = 'JavaScript is awesome!';console.log(str.replace('awesome', '') !== str); // trueconsole.log(str.replace('Awesome', '') !== str); // false【まとめ】どの部分一致判定方法を使うべきか？
今回紹介した7つの方法の中で、最もシンプルで読みやすいのは includes()メソッドですが、古いブラウザに対応していないというデメリットがあります。
また、使用するブラウザ環境や判定の厳密さによっては、indexOf()メソッドや正規表現も有効です。
用途に応じて、最適な部分一致判定方法を選ぶ必要があります。
最新ブラウザが対象
includes()メソッドが一番シンプルで可読性にも優れている。大文字・小文字を無視した部分一致
正規表現（RegExp）がおすすめです。古いブラウザへの対応
indexOf()メソッドやsearch()メソッドが安定しています。
JavaScriptで文字列の前方一致を判別する方法は以下の記事で紹介しています。
-
【JavaScript】文字列の前方一致を判別する方法6選
もくじstartsWith()メソッドで前方一致を判定正規表現（RegExp）を使って前方一致を判定indexOf()メソッドで前方一致を判定slice()メソッドで前方一致を判定substring( ...
JavaScriptで文字列の後方一致を判別する方法は以下の記事で紹介しています。
-
【JavaScript】文字列の後方一致を判定する方法5選
もくじendsWith()メソッドで後方一致を判定正規表現（RegExp）を使って後方一致を判定slice()メソッドで後方一致を判定lastIndexOf()メソッドで後方一致を判定substrin ...