JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのstartsWith()メソッドとは？indexOf()との違いと使い方を解説

文字列が特定の文字や文字列で始まっているかどうかを確認するには、従来indexOf()メソッドが使われてきました。しかし、より複雑な高度なアプリケーション開発においては、この方法では不十分になりがちです。そこでES6（ECMAScript 2015）では、そうした高度な処理を簡単かつ直感的に行えるstartsWith()メソッドが新たに提供されました。

従来の方法：indexOf()を使った判定

まずは従来のアプローチとして、indexOf()メソッドを使って、文字列が特定の文字で始まっているかどうかを確認する例を見てみましょう。

サンプルコード

<html>
<body>
<script>
    var text = 'Tutorialspoint'
    document.write(text.indexOf('T') === 0);
</script>
</body>
</html>

実行結果

true

この例では、「Tutorialspoint」という文字列の先頭が「T」であることを確認しています。indexOf()は指定した文字が最初に現れる位置（インデックス）を返すため、戻り値が「0」であれば先頭にあることになります。このように「=== 0」と比較する必要があり、少し回りくどい書き方になっている点が課題でした。

モダンな方法：startsWith()メソッドの基本

次の例では、indexOf()の代わりにstartsWith()メソッドを使用して、文字列が特定の文字列で始まっているかどうかを直接判定しています。

サンプルコード

<html>
<body>
<script>
    var text = 'Tutorialspoint'
    document.write(text.startsWith('Tu'));
</script>
</body>
</html>

実行結果

true

startsWith()は引数に渡した文字列で始まっていれば「true」、そうでなければ「false」を返します。意図がひと目でわかるため、コードの可読性が大きく向上するのがメリットです。

開始位置（インデックス）を指定した検索

startsWith()メソッドの便利な点は、第2引数にインデックス番号を渡せることです。これにより、文字列の途中の任意の位置から、特定の文字列が始まっているかどうかを確認できます。

次の例では、複数のインデックスを引数としてstartsWith()メソッドに渡し、それぞれの位置に目的の文字列があるかどうかを判定しています。

サンプルコード

<html>
<body>
<script>
    var text = 'Tutorialspoint'
    document.write(text.startsWith('Tut', 0));
    document.write("</br>");
    document.write(text.startsWith('ut', 1));
    document.write("</br>");
    document.write(text.startsWith('t', 2));
</script>
</body>
</html>

実行結果

true
true
true

この例では以下のように判定しています。

  • text.startsWith('Tut', 0)：0番目の位置から「Tut」で始まるか → true
  • text.startsWith('ut', 1)：1番目の位置から「ut」で始まるか → true
  • text.startsWith('t', 2)：2番目の位置から「t」で始まるか → true

まとめ

startsWith()メソッドは、ES6で導入された文字列判定のための強力なツールです。従来のindexOf()と比較して、以下のような利点があります。

  • コードの意図が明確になり、可読性が向上する
  • 戻り値が真偽値（true / false）なので扱いやすい
  • 第2引数で検索開始位置を指定でき、柔軟な判定が可能

文字列の先頭一致を頻繁にチェックする場面では、ぜひstartsWith()メソッドを活用してみてください。

  1. JavaScriptのsetInterval()メソッドとは？使い方とコード例をわかりやすく解説

    setInterval()メソッドとはsetInterval()は、JavaScriptが提供するタイミングイベントの一つです。windowオブジェクトのメソッドとして用意されており、指定した時間間隔ごとにコード（関数）を繰り返し実行することができます。このメソッドには主に2つの引数を渡します。1つ目は繰り返し実行したい関数、2つ目はその関数を実行する間隔を示す時間（ミリ秒）です。構文window.setInterval(function, milliseconds, param1, param2, ...);第3引数以降に任意のパラメータを指定することも可能で、これらの値は実行される関数へ引

  2. JavaScriptのsetTimeout()メソッドとは？基本構文と実用例をわかりやすく解説

    setTimeout()メソッドとはsetTimeout()は、JavaScriptが標準で備えているタイマー系イベント処理の一つです。JavaScriptではwindowオブジェクトを使うことで、指定した時間間隔でコードを実行できます。その中でもsetTimeout()は、「一定時間が経過した後に特定の関数を実行する」ためのメソッドとして広く使われています。setTimeout()には2つの引数を渡します。1つ目は実行したい関数、2つ目は関数を実行するまでの待ち時間をミリ秒単位で指定する時間です。たとえば「2000」と指定すれば2秒後、「3000」と指定すれば3秒後に関数が実行されます。基本