もくじ
この記事では、JavaScriptで特定の文字列を含むかを判定する方法を7つ紹介します。
URLに特定の文字列を含むかどうかなど、多くの状況で部分一致のチェックが必要なことがあるためまとめました。
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); // false
search()メソッドで部分一致を判別
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); // false
replace()メソッドで部分一致を判別
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()メソッドが安定しています。
udemyでJavaScriptを学ぶ
- 本格的なWEBサイトを作成する方法について学びます。
- Sass（※以下CSSと記載）、JavaScriptの基礎について深く学びます。
- CSS、JavaScriptの実践的な記述について深く学びます。
- CSS、JavaScriptアニメーションの実装について学びます。
- 最新の実践的なWEB画面の作成方法について深く学びます。
- CSS、JavaScriptのコードの最適化、安定化について学びます。
- 維持管理、持続可能なコードの記述方法について学びます。
- ドットインストールでCSS、JavaScriptの入門編を終えたレベルの方
- 他の先生のフロントエンドの入門編を終えたレベルの方
- 自分で本格的なWEBサイトを作ってみたい方
- CSS、JavaScriptの実践的な基礎を効率的に学びたい方
- CSS、JavaScriptを今後仕事で使う予定の方
- CSS、JavaScriptのコードの整理方法について学びたい方
- CSS、JavaScriptのアニメーションを学びたい方
- CSS、JavaScriptのレベルアップしたいWeb開発初級者の方
- CSS、JavaScriptでどのようにすればレベルアップできるのか悩んでいる方
- JavaScriptの動作原理について深く学びます。
- JavaScriptがどのように実行されるのかについて深く学びます。
- ES6+の最新のJavaScriptの記法について幅広く学びます。
- 変数や参照の仕組みについて深く学びます。
- オブジェクトのメカニズムについて深く学びます。
- 関数のメカニズムについて深く学びます。
- スコープの仕組みについて深く学びます。
- プロトタイプのメカニズムについて深く学びます。
- 反復処理のメカニズムについて深く学びます。
- ジェネレーターやイテレーターについて深く学びます。
- コールバック関数について深く学びます。
- 非同期処理のメカニズムについて深く学びます。
- モジュールの仕組みについて深く学びます。
- クロージャーの仕組みについて深く学びます。
- レキシカルスコープの仕組みについて深く学びます。
- アロー関数の特徴について深く学びます。
- レキシカルスコープの仕組みについて深く学びます。
- アロー関数の特徴について深く学びます。
- thisの仕組みについて深く学びます。
- bind、apply、callの動作原理について深く学びます。
- クラスと継承の仕組みについて深く学びます。
- ReflectやProxyなどの強力なオブジェクトへの理解を深めます。
- Map，Setなどの強力なコレクションについて実践を交えて学びます。
- よく使用される強力な実装パターンを演習を交えて学びます。
- 独自のフレームワークを構築していく中でJavaScriptのメカニズムについて理解を深めます。
- JavaScriptをコアの動作原理からキチンと理解したい方。
- 自分の思った通りコードが動かずに悩んでいる方。
- 自分の思った通りに動かず、気付いたら解決するのに１日経ってしまっていた経験のある方。
- React, Vue, Angularが使いこなせず悩んでいる方。
- JavaScriptの不可解な動きが理解できず、苦しんでいる方。
- 少し複雑なコードを書こうとすると、ぐちゃぐちゃになって整理しきれず、悩んでいる方。
- JavaScriptを本気で勉強したいと思っている方。
- JavaScriptの変態仕様に苦しんでいる方。
- JavaScriptが苦手なプログラマーの方。
もみじ
JavaScripの基礎的なことを理解しており、より深くJavaScriptについて理解したいという方にオススメの講座です。
初心者の方が一度の受講で全てを吸収するのは難しいですが、繰り返し受講することでフロントエンドの業務で役立つ知識を身に付けることができます。
HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊
もみじ
HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。
実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。
JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊
もみじ
この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。
非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。
もみじ
HTML・CSS・JavaScripの基礎的なことを理解しており、Webのフロントエンジニアを目指している方にオススメの講座です。
講座内容は実践で使用するものが多く、実務でも役立つ内容でした。