もくじ
JavaScriptで文字列の前方一致（先頭が一致するかどうか）を判定する場面は、ユーザー入力のバリデーションやURLの判別、フィルター処理など、さまざまなシーンで登場します。
しかし「どの方法を使えば良いのか分からない」という声も多いのではないでしょうか。
本記事では、代表的な6つの前方一致判定方法を、初心者の方にも分かりやすく整理してご紹介します。
それぞれの特徴や使い分けのポイントも解説していますので、ぜひ用途や状況に合わせてご活用ください。
JavaScriptで文字列の後方一致を判定する方法は以下の記事で紹介しています。
-
【JavaScript】文字列の後方一致を判定する方法5選
もくじendsWith()メソッドで後方一致を判定正規表現（RegExp）を使って後方一致を判定slice()メソッドで後方一致を判定lastIndexOf()メソッドで後方一致を判定substrin ...
JavaScriptで文字列の部分一致を判定する方法は以下の記事で紹介しています。
-
【JavaScript】特定の文字列を含むかを確認する方法7選
もくじincludes()メソッドで部分一致を判別正規表現（RegExp）を使って部分一致を判別indexOf()メソッドで部分一致を判別search()メソッドで部分一致を判別match()メソッド ...
startsWith()メソッドで前方一致を判定
JavaScriptで前方一致を判定する最も簡単な方法は、startsWith()メソッドを使用することです。
startsWith()メソッドは、文字列と指定した文字列を比較し「前方一致」している場合にtrueを返します。
シンプルで直感的な方法なので、可読性にも優れています。
startsWith()メソッドのブラウザ別対応状況は以下から確認できます。
https://caniuse.com/?search=startsWith
const str = 'JavaScript is awesome!';console.log(str.startsWith('JavaScript')); // trueconsole.log(str.startsWith('javaScript')); // false正規表現（RegExp）を使って前方一致を判定
startsWith()メソッドよりも柔軟な前方一致判定を行いたい場合は、正規表現を使用することで実現可能です。
例えば、大文字・小文字を無視した前方一致の判定が可能です。
/^JavaScript/は文字列がJavaScriptで始まっているかを確認する正規表現です。
iフラグを使うと、大文字・小文字を無視した前方一致が判定できます。
const str = 'JavaScript is awesome!';console.log(/^JavaScript/.test(str)); // trueconsole.log(/^javaScript/.test(str)); // falseconsole.log(/^JavaScript/i.test(str)); // true（大文字小文字を無視する場合）indexOf()メソッドで前方一致を判定
indexOf()メソッドは、指定した文字列が最初に出現するインデックスを返します。
前方一致を判定するためには、そのインデックスが0かどうかを確認します。
startsWith()メソッドがサポートされていない古いブラウザで前方一致を判定したい場合に有効です。
const str = 'JavaScript is awesome!';console.log(str.indexOf('JavaScript') === 0); // trueconsole.log(str.indexOf('javaScript') === 0); // falseslice()メソッドで前方一致を判定
slice()メソッドを使い、文字列の最初の部分を取り出して前方一致を確認することができます。
startsWith()メソッドがサポートされていない古いブラウザで前方一致を判定したい場合に有効です。
以下はslice()メソッドを使用して、文字列の先頭10文字を切り出し、それを比較することで前方一致を判定します。
const str = 'JavaScript is awesome!';console.log(str.slice(0, 10) === 'JavaScript'); // trueconsole.log(str.slice(0, 10) === 'javaScript'); // falsesubstring()メソッドで前方一致を判定
substring()メソッドもslice()メソッドと同じように、文字列の先頭部分を切り出して比較することで前方一致を判定できます。
const str = 'JavaScript is awesome!';console.log(str.substring(0, 10) === 'JavaScript'); // trueconsole.log(str.substring(0, 10) === 'javaScript'); // falselastIndexOf()メソッドで前方一致を判定
lastIndexOf()メソッドは、指定された文字列がどこに現れるかを返します。
第2引数に0を指定することで、文字列が前方一致しているかを確認することができます。
const str = 'JavaScript is awesome!';console.log(str.lastIndexOf('JavaScript', 0) === 0); // trueconsole.log(str.lastIndexOf('javaScript', 0) === 0); // false【まとめ】どの前方一致判定方法を使うべきか？
今回紹介した6つの方法の中で、最もシンプルで読みやすいのは startsWith()メソッドですが、古いブラウザに対応していないというデメリットがあります。
また、使用するブラウザ環境や判定の厳密さによっては、indexOf()メソッドや正規表現も有効です。
用途に応じて、最適な前方一致判定方法を選ぶ必要があります。
最新ブラウザが対象
startsWith()メソッドが一番シンプルで可読性にも優れている。大文字・小文字を無視した前方一致
正規表現（RegExp）がおすすめです。古いブラウザへの対応
indexOf()メソッドやslice()メソッドが安定しています。
JavaScriptで文字列の後方一致を判定する方法は以下の記事で紹介しています。
-
【JavaScript】文字列の後方一致を判定する方法5選
もくじendsWith()メソッドで後方一致を判定正規表現（RegExp）を使って後方一致を判定slice()メソッドで後方一致を判定lastIndexOf()メソッドで後方一致を判定substrin ...
JavaScriptで文字列の部分一致を判定する方法は以下の記事で紹介しています。
-
【JavaScript】特定の文字列を含むかを確認する方法7選
もくじincludes()メソッドで部分一致を判別正規表現（RegExp）を使って部分一致を判別indexOf()メソッドで部分一致を判別search()メソッドで部分一致を判別match()メソッド ...