前回記事「JavaScriptで文字列を扱う時によく使うメソッド＃1【文字を繋げる・切り抜く】」では、JavaScriptで行う文字列操作の中で、文字をつなげたり、特定の文字を切り抜いたりするときに使うメソッドについてまとめてみました。今回も引き続きJavaScriptの文字列操作でよく使うメソッドについてまとめていきたいと思います。   第二回目の今回は、特定の文字が含まれているか、などの検索系のメソッドについて調べてみたいと思います。フォーム周りなどのUIを作成する場合などに用いられることが多いのではないでしょうか。知っておくと便利なメソッドばかりですので、ぜひ覚えておきたいですね。  

String.length

まずはじめに、メソッドでは無いのですが「String.length」という形でlengthプロパティを使うことで、対象となる文字列の文字数を調べることができます。こちらは前回記事「JavaScriptで配列を扱う時によく使うメソッド＃1【配列の作成・値や総数の取得・空判定など】」でも紹介している配列の数を調べる方法と同じになりますね。 【JavaScript】

const text = 'You have to learn to walk before you run.';
console.log(text.length);

  対象となる文字列に対してプロパティを実行すると、トータルの文字数が返ってきます。 【console】

41

   

String.charAt

続いて「String.charAt()」を使うと、n番目の文字を取得することができます。使い方としては1文字目の文字列を取得し、条件に合っているか？ということを調べるのにとても便利です。対象となる文字列に対して実行し、引数には調べたい文字列のインデックス番号を渡してあげます。 【JavaScript】

const text = 'You have to learn to walk before you run.';
const firstLetter = text.charAt(0);
console.log(firstLetter);

  渡されたインデックス番号に対応する文字が帰ってきているのがわかります。 【console】

"Y"

   

String.indexOf

「String.indexOf()」を使うと、対象の文字列中に含まれる特定の文字が最初に現れるインデックス番号を取得できます。単独で使うことはあまり無いかもしれませんが、応用することで、文字列中に対象となる文字がいくつ含まれているか？ということを調べることができます。引数には検索の対象となる文字を渡します。 【JavaScript】

const text = 'You have to learn to walk before you run.';
const search = 'o';
let count = 0;
let position = text.indexOf(search);
while (position !== -1) {
　　count++
　　position = text.indexOf(search, position + 1)
}
console.log(`テキストの中に「${search}」という文字は${count}個含まれています`);

  上記では、while文を使った繰り返し処理で、返り値が-1つまり、対象の文字が含まれなくなるまで検索を行い、その回数を取得することで、ヒットした文字の数を調べることができます。 【console】

"テキストの中に「o」という文字は5個含まれています"

   

String.includes

「String.includes()」は文字列操作のメソッドの中でもよく使われるうちの一つです、その名の通り対象となる文字が、文字列中に含まれているかどうかを調べることができます。引数にはやはり対象となる文字を渡してあげる形となります。 【JavaScript】

const text = 'You have to learn to walk before you run.';
const search = 'walk';
if (text.includes(search)) {
  console.log(`「${search}」という文字が含まれています`);
} else {
  console.log(`「${search}」という文字は含まれていません`);
}

  対象となる文字が含まれている場合にはtrueが、含まれていない場合にはfalseが返ってくるのでわかりやすいですね。 【console】

"「walk」という文字が含まれています"

   

String.startsWith

こちらもよく使われる場面があるメソッドである「String.startsWith()」ですが、文字列の中で対象となる文字が前方一致するかどうかを調べることができます。つまり対象となる文字で始まるかどうかがわかります。同じく引数に対象となる文字を入れてあげます。 【JavaScript】

const text = 'You have to learn to walk before you run.';
const search = 'walk';
if (text.startsWith(search)) {
　　console.log(`「${search}」という文字から始まります`);
} else {
　　console.log(`「${search}」という文字から始まりません`);
}

  前方一致にマッチする場合にはtrueが、そうで無い場合にはfalseが返ってくるので、それに合わせた処理を用意します。 【console】

"「You have」という文字から始まります"

   

String.endsWith

先ほどのString.startsWith()に対して「String.endsWith()」は、文字列の中で対象となる文字が後方一致するかどうかを調べます。ですので、対象となる文字が文字列の末尾かどうかがわかります。同じく引数には対象となる文字列を渡します。 【JavaScript】

const text = 'You have to learn to walk before you run.';
const search = 'you run.';
if (text.endsWith(search)) {
　　console.log(`「${search}」という文字で終わります`);
} else {
　　console.log(`「${search}」という文字で終わりません`);
}

  後方一致にマッチする場合にはtrueが、そうで無い場合にはfalseが返ってくるので、それに合わせた処理を用意します。 【console】

"「you run.」という文字で終わります"

   

まとめ

【文字列に含まれる文字数を調べる】 String.length;   【文字列にあるn番目の文字を取得する】 String.charAt( index );   【文字列に含まれる対象の文字が最初に現れるインデックスを取得する】 String.indexOf( string );   【文字列の中に対象の文字が含まれるか調べる】 String.includes( string );   【文字列の中に対象の文字が前方一致するか調べる】 String.startsWith( string );   【文字列の中に対象の文字が後方一致するか調べる】 String.endsWith( string );  

---

  今回は検索系の文字列操作についてまとめてみました。JavaScriptの文字列操作の中でも比較的よく使うメソッドが多いのでは無いでしょうか。次回も引き続きいろんな文字列操作のメソッドについてまとめていきたいと思います。   （参考にさせていただいたサイト） String - JavaScript | MDN