javascriptの文字列検索の方法(indexOf、includes、startsWith)【現役SEが紹介】

プログラミング

javascriptで文字列検索をしたいのだけど、どうやって書けばいいのだろうか。

分かりやすく教えてほしいな…

上記のお悩みを解決します。

■本記事の内容

本記事で以下の内容をお伝えします。

・javascriptの文字列検索の方法
・javascriptの文字列検索の書き方
・その他にもあるので紹介

 

■本記事の信頼性

ささそらと
ささそらと

この記事を書いている私は、プログラミングを仕事として始めて10年以上ほど経ちます。今も現役のシステムエンジニアです。

初心者向けにjavascriptの文字列検索の方法についてお伝えします。

検索する方法はいくつか存在しており、基本的には好きなものを使えばよいと思います。
その中でもよく使用するものを現役エンジニアの私がピックアップしたものを紹介します。

javascriptの文字列検索の方法

javascriptの文字列検索方法はいくつか存在します。

複雑な検索も使用するメソッドによっては可能になったりします。

とはいえ、いきなり難しいものも紹介してしまうと混乱してしまうので、本記事では単純な文字列検索に絞って主に説明していきたいと思います。

一応、最後に他の検索方法の紹介しておこうかと思いますので、こちらは興味があれば見て頂ければと思います。

次項で詳しく説明しますが、今回は主に以下の3つのメソッドに絞りました。

indexOf()
includes()
startsWith()

とりあえず、はじめは上記だけ覚えておくと良いかと思います。

javascriptの文字列検索の書き方

では、具体的にjavascriptの文字列検索のコードの書き方を説明していきます。

javascriptのindexOf()の書き方

まずはindexOfです。
こちらは指定した文字列の一致した個所を教えてくれるメソッドです。

書き方は以下の通りです。

const text = 'ABCDEFGHIJK';

const search = 'E';
const index = text.indexOf(search);
console.log(index);

上記はtextの文字列変数に入っている「ABCDEFGHIJK」の中からEの文字列を検索し、一致した個所をindex番号として返す書き方になります。

(検索対象).indexOf(検索したい文字)

といった感じです。

上記を実行するとindexの中身は4になります。

5番目にEがあるので5では?となるかと思いますが、0始まりでカウントしていくので1つずれるイメージです。

A:0
B:1
C:2
D:3
E:4
F:5
G:6
H:7
I:8

上記のような形です。なのでEは4番目になります。

では、一致する文字が存在しない場合はどうなるかといいますと、一致しない場合は-1が返却されます。

従って、一致する文字があれば0以上の数値が返却され、-1の場合は一致する文字が存在しないと判断することができます。

今は説明のため、1文字の指定でしたが複数文字の指定も可能です。

const text = 'ABCDEFGHIJK';

const search = 'GHI';
const index = text.indexOf(search);
console.log(index);

上記のような感じです。上記の場合も同様に一致した位置が返るので6の数値が返ってきます。

後、複数一致する文字が存在する場合ははじめにヒットした文字の位置が返ってきますので注意してくださいね。

もし、どうしても最後にヒットした位置を知りたい場合は「lastIndexOf」というメソッドがありますので、こちらを使用することで実現可能です。
使い方はindexOfと同じです。

javascriptのincludes()の書き方

続いて、includes()について説明します。
こちらは一致する文字が存在する場合はtrue、一致する文字が存在しない場合はfalseといったようにboolean型で返却されます。

以下のようになります。

const text = 'ABCDEFGHIEJK';

const search = 'E';
const flag = text.includes(search);
console.log(flag);

書き方的にはindexOfと同じです。
返却される結果が異なる感じです。

こちらは位置番号ではないので、if文とかの判定処理と相性がよいです。
単純に指定した文字列か存在するかしないかを知りたい場合はこちらを使用するとよいでしょう。

javascriptのstartsWith()の書き方

最後にstartsWithをご紹介します。
こちらは一言でいうと前方一致しているかどうかの検索になります。
前方一致というのは文字列のはじめの文字列と一致しているかどうかになります。

const text = 'ABCDEFGHIEJK';

const search = 'ABC';
const flag = text.startsWith(search);
console.log(flag);

上記の場合、はじめのABCと一致しているのでtrueが返却されます。
仮にBCDを指定したとしても、文字列の中には存在しますが頭の文字列ABCと一致しないためfalseが返却されます。

仕様によってはこの前方一致を求められることがあるので、知っておくとよいでしょう。

その他にもあるので紹介

主に先ほど紹介したものを頭に入れておいていただければよいですが、match()もよく使用することがあるので覚えておくと良いかと思います。

match()は正規表現での検索が可能になります。

正規表現とは?
正規表現とは文字列の集合を一つの文字列で表現する方法の一つです。
これだけだと分からないかもしれませんがGoogleで検索するとたくさん出てきますので詳しく知りたい方は調べてみるとよいでしょう。

正規表現を使用することでいろいろなチェックが可能になります。

今回説明した文字列の検索も可能ですし、例えば電話番号などの形式「090-0123-4567」みたいなこともチェックできます。

以下のような感じです。

const tel = '090-0123-4567';
const regex = /090-[0-9]{4}-[0-9]{4}/;
const found = tel.match(regex);

console.log(found);

regexが正規表現の指定の仕方です。
なんかややこしそうですが一つ一つ見ていけば雰囲気が分かるかと思います。

はじめの/と最後の/は正規表現の指定の仕方だと思ってください。
文字列の” “で囲うのと同じイメージです。

はじめの090-はそのままで単純に頭の文字が一致しているかどうか、その後の[0-9]{4}は0から9の数字が4桁入ることを指しています。

上記実行すると一致する文字列が配列で返ってきます。

他に単純に文字列の検索ももちろん可能です。

最後に

javascriptの文字列の検索について説明しました。

基本的にindexOf、includes、startsWithだけ覚えておくと良いです。
最後に説明した正規表現のものも文字列検索というよりは、入力チェック等でよく使用したりするのでこちらも覚えておくと便利かと思います。

コメント

タイトルとURLをコピーしました