プログラミング

【PR】を含みます。

【JavaScript】文字列の前方一致を判別する方法6選

JavaScript 文字列の前方一致を判別する方法6選

この記事では、JavaScriptで文字列の前方一致を判定する方法を6つ紹介します。

ユーザー入力の確認やURLの検証など、多くの状況で前方一致のチェックが必要なことがあるためまとめました。

JavaScriptで文字列の後方一致を判別する方法は以下の記事で紹介してます。

あわせて読む
JavaScript 文字列の後方一致を判別する方法5選
【JavaScript】文字列の後方一致を判別する方法5選

もくじendsWith()メソッドで後方一致を判別正規表現（RegExp）を使って後方一致を判別slice()メソッドで後方一致を判別lastIndexOf()メソッドで後方一致を判別substrin ...

JavaScriptで文字列の部分一致を判別する方法は以下の記事で紹介してます。

あわせて読む
JavaScript 特定の文字列を含むかを確認する方法7選
【JavaScript】特定の文字列を含むかを確認する方法7選

もくじincludes()メソッドで部分一致を判別正規表現（RegExp）を使って部分一致を判別indexOf()メソッドで部分一致を判別search()メソッドで部分一致を判別match()メソッド ...

startsWith()メソッドで前方一致を判別

JavaScriptで前方一致を判別する最も簡単な方法は、startsWith()メソッドを使用することです。

startsWith()メソッドは、文字列と指定した文字列を比較し「前方一致」している場合にtrueを返します。

シンプルで直感的な方法なので、可読性にも優れています。

startsWith()メソッドのブラウザ別対応状況は以下から確認できます。

https://caniuse.com/?search=startsWith

JavaSctipt
Copy
  1. const str = 'JavaScript is awesome!';
  2. console.log(str.startsWith('JavaScript')); // true
  3. console.log(str.startsWith('javaScript')); // false

正規表現（RegExp）を使って前方一致を判別

startsWith()メソッドよりも柔軟な前方一致判定を行いたい場合は、正規表現を使用することで実現可能です。

例えば、大文字・小文字を無視した前方一致の判定が可能です。

/^JavaScript/は文字列がJavaScriptで始まっているかを確認する正規表現です。

iフラグを使うと、大文字・小文字を無視した前方一致が判定できます。

JavaSctipt
Copy
  1. const str = 'JavaScript is awesome!';
  2. console.log(/^JavaScript/.test(str)); // true
  3. console.log(/^javaScript/.test(str)); // false
  4. console.log(/^JavaScript/i.test(str)); // true（大文字小文字を無視する場合）
  5. console.log(/^JavaScript/i.test(str)); // true（大文字小文字を無視する場合）

indexOf()メソッドで前方一致を判別

indexOf()メソッドは、指定した文字列が最初に出現するインデックスを返します。

前方一致を判定するためには、そのインデックスが0かどうかを確認します。

startsWith()メソッドがサポートされていない古いブラウザで前方一致を判別したい場合に有効です。

JavaSctipt
Copy
  1. const str = 'JavaScript is awesome!';
  2. console.log(str.indexOf('JavaScript') === 0); // true
  3. console.log(str.indexOf('javaScript') === 0); // false

slice()メソッドで前方一致を判別

slice()メソッドを使い、文字列の最初の部分を取り出して前方一致を確認することができます。

startsWith()メソッドがサポートされていない古いブラウザで前方一致を判別したい場合に有効です。

以下はslice()メソッドを使用して、文字列の先頭10文字を切り出し、それを比較することで前方一致を判別します。

JavaSctipt
Copy
  1. const str = 'JavaScript is awesome!';
  2. console.log(str.slice(0, 10) === 'JavaScript'); // true
  3. console.log(str.slice(0, 10) === 'javaScript'); // false

substring()メソッドで前方一致を判別

substring()メソッドもslice()メソッドと同じように、文字列の先頭部分を切り出して比較することで前方一致を判別できます。

JavaSctipt
Copy
  1. const str = 'JavaScript is awesome!';
  2. console.log(str.substring(0, 10) === 'JavaScript'); // true
  3. console.log(str.substring(0, 10) === 'javaScript'); // false

lastIndexOf()メソッドで前方一致を判別

lastIndexOf()メソッドは、指定された文字列がどこに現れるかを返します。

第2引数に0を指定することで、文字列が前方一致しているかを確認することができます。

JavaSctipt
Copy
  1. const str = 'JavaScript is awesome!';
  2. console.log(str.lastIndexOf('JavaScript', 0) === 0); // true
  3. console.log(str.lastIndexOf('javaScript', 0) === 0); // false

【まとめ】どの前方一致判定方法を使うべきか？

今回紹介した6つの方法の中で、最もシンプルで読みやすいのは startsWith()メソッドですが、古いブラウザに対応していないというデメリットがあります。

また、使用するブラウザ環境や判定の厳密さによっては、indexOf()メソッドや正規表現も有効です。

用途に応じて、最適な前方一致判定方法を選ぶ必要があります。

  • 最新ブラウザが対象
    startsWith()メソッドが一番シンプルで可読性にも優れている。

  • 大文字・小文字を無視した前方一致
    正規表現（RegExp）がおすすめです。

  • 古いブラウザへの対応
    indexOf()メソッドやslice()メソッドが安定しています。

udemyでJavaScriptを学ぶ

講座名
【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編） icon
学習時間
24.5時間
学習内容
  • 本格的な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でどのようにすればレベルアップできるのか悩んでいる方
アイコン画像

もみじ

HTML・CSS・JavaScripの基礎的なことを理解しており、Webのフロントエンジニアを目指している方にオススメの講座です。

講座内容は実践で使用するものが多く、実務でも役立つ内容でした。

講座名
【JS】ガチで学びたい人のためのJavaScriptメカニズム icon
学習時間
20.5時間
学習内容
  • 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など、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。

-プログラミング
-