JavaScriptのstartsWithの使い方！文字列の始まりを判定する

JavaScriptで文字列が指定された文字列で始まるかどうかを判定するstartsWithメソッドについて書いています。

startsWithメソッドを使うと、文字列の先頭が特定の文字列で始まるかどうかを簡単に調べることができます。
URLのプロトコルを判定したり、文字列の先頭を調べる場合に便利です。

startsWithメソッドの基本的な使い方

startsWithメソッドは、文字列が指定された文字列で始まるかどうかを判定し、真偽値（trueまたはfalse）を返します。
基本的な構文は以下のとおりです。

string.startsWith(searchString, position)

• searchString: 検索する文字列（必須）。
  • 文字列を指定します。
• position: 検索を開始する位置（省略可能）。
  • 0以上の整数値を指定します。
  • 省略した場合、0が指定されたものとして扱われます。

文字列の始まりを判定する

startsWithメソッドを使って、文字列の始まりを判定してみます。

const str = 'Hello World!';

console.log(str.startsWith('Hello')); // 結果：true
console.log(str.startsWith('World')); // 結果：false

最初にstr変数にたいして、文字列を代入しています。

そして、str変数が’Hello’で始まるかどうかをstartsWithメソッドで判定しています。
渡しているのは、先頭かどうか確認したい文字列です。

str変数は’Hello’で始まるため、startsWith('Hello')はtrueを返します。
一方、’World’はstr変数の先頭にはないため、startsWith('World')はfalseを返します。

検索開始位置を指定する

第2引数positionを指定することで、検索を開始する位置を指定できます。

const str = 'Hello World!';

console.log(str.startsWith('World', 6)); // 結果：true

str変数の6番目の文字から始まる部分文字列が、’World’で始まるかどうかを判定しています。
startsWithメソッドの第2引数に指定しているのが検索位置です。

6番目から文字列の始まりを検索すると、文字列は’World!’なので、startsWith('World', 6)はtrueを返します。

URLのプロトコルを判定する

startsWithメソッドを使用して、URLのプロトコルを判定するサンプルコードです。

function checkProtocol(url) {
  if (url.startsWith('http://')) {
    return 'httpプロトコルです。';
  } else if (url.startsWith('https://')) {
    return 'httpsプロトコルです。';
  } else if (url.startsWith('ftp://')) {
    return 'ftpプロトコルです。';
  } else {
    return '不明なプロトコルです。';
  }
}

console.log(checkProtocol('https://www.example.com')); // 結果：httpsプロトコルです。
console.log(checkProtocol('ftp://files.example.com')); // 結果：ftpプロトコルです。
console.log(checkProtocol('mailto://')); // 結果：不明なプロトコルです。

checkProtocol関数を作って、引数として渡されたURLのプロトコルを判定し、対応するメッセージを返します。

checkProtocol関数の中でstartsWithメソッドを使って、URLが`http://`、`https://`、`ftp://`のいずれで始まるかをチェックします。
そして、呼び出し元に判定した結果の文字列を返します。

このように、startsWithメソッドを使うことで、URLのプロトコルを判定できます。

JavaScriptのstartsWithメソッドの使い方まとめ

今回はJavaScriptのstartsWithメソッドの使い方について解説しました。
この記事の内容をまとめます。