【JavaScript】文字列が一致しないのはなぜ？完全一致や部分一致の文字列比較を紹介！

「equalsは使えない？」

「文字列が一致しないのはなぜ？」

JavaScriptで文字列比較を行うときに上記のように思った経験はありませんか？

実は、名前の似ているJavaで使われる文字列比較の関数equalsはJavaScriptでは使えず、代わりに===や==を使います。
本記事では、JavaScriptでの完全一致・部分一致の文字列比較の方法や文字列が一致しない場合の注意点を解説していきます。

生成AIを用いれば、初心者でもJavaScriptを簡単に使いこなすことが可能です。また、文字列の比較はプログラミングで頻繁に使うスキルなので、JavaScriptでの使い方をマスターしてバグを減らせるようになりましょう！

JavaScriptにおける文字列比較とは？

基本的に文字列比較とは、二つの文字列が同一の内容を持つかどうかを判断する操作です。

たとえば、ユーザーがフォームに入力した情報や、データベースから取得した情報の検証などでよく使われます。

また、2つの文字列の比較の仕方は大きく分けて以下の3通りがあります。

• 完全一致
• 部分一致
• 大小比較(<や>など)

上記の比較の方法は後のセクションで使い方を詳しく紹介していますので、ぜひ参考にしてください。

文字列全体を比較する方法

文字列全体を比較する演算子は以下の3種類です。

• ==(等価演算子)
• ===(厳密等価演算子)
• 大小比較演算子

==や===、大小比較演算子を含む式の内容が正しければtrue、正しくなければfalseを返します。

本セクションでは、上記のような文字列全体を比較するための演算子の使い方について解説していきます。

==(等価演算子)での比較

等価演算子==は、二つの値が等しいかどうかをチェックする際に使用します。

たとえば、文字列の比較を行う場合のコードは以下のとおりです。

if (“apple” == “apple”) {
console.log(“文字列が等しいです”); 
}

上記のコードでは2つの文字列の内容がどちらも等しいので、「文字列が等しいです」という文字列がコンソールに出力されます。

一方で、文字列と数値が混在するケースでは、自動的に型変換が行われて判定されます。

if (“123” == 123) {
console.log(“型変換により等価です”); 
}

“123”と123は型が異なりますが、自動的に型が変換されてif文の中身が実行されるという形です。

===(厳密等価演算子)での比較

厳密等価演算子===は、2つの文字列の完全一致(値と型の両方が等しいか)のチェックを行います。

以下は、===を使用した場合の文字列比較のコードの例です。

if (“apple” === “apple”) {
console.log(“文字列は等しいです”);
}

こちらのコードは等価演算子==の場合と同様に、値も型も等しいのでif文の中身の処理が実行されますが、以下のコードでは実行結果が先ほどと異なります。

console.log(“5” === 5); //falseが出力される

式の両辺の値は5ですが、文字列と数値の比較なのでfalseが返されます。

等価演算子とは非常に似ていますが、上記のような違いがあることに注意しましょう。

>や<(大小比較演算子)での比較

主に数値の大小比較に用いられる<や>などの演算子は、文字列の比較でも使用可能です。

文字列の比較においては、Unicode値で大小が判定されます。Unicode値とは、コンピュータ上で使用する文字や記号に割り当てられている一意の数値コードです。

たとえば、AppleとBananaではアルファベット順で”A”の方が先に来るので、”Apple” < “Banana”がtrueになります。

しかし、小文字は大文字のアルファベットよりもUnicode値が大きいため、”apple” <  “Banana”はfalseを返します。

上記を始めとする文字列の大小判定の詳細なルールは後のセクションで紹介していますので、ぜひご確認ください！

文字列の部分一致の比較を行う方法

文字列は全体同士を比較するだけでなく、一部分が一致しているかどうかでも判定を行えます。

部分一致の比較を行う主な方法は以下の3通りです。

• includesメソッド
• indexOf/lastIndexOfメソッド
• 正規表現

本セクションでは、上記の3種類の文字列の部分一致比較メソッドの使い方を紹介していきます。

includesメソッドで比較する

includesは指定された文字列が含まれているかどうかを判定するメソッドです。

console.log(“あいうえお”.includes(“あいう”)); //trueが出力される

こちらは”あいうえお”の中に”あいう”が含まれているので、trueが返されます。

また、includesは第二引数で指定した数値の文字から検索を始めることも可能です。

let str = “JavaScript”;
console.log(str.includes(“va”, 3));  //falseが出力される

str.includes(“va”, 3)は”aScript”という文字列から検索している形になり、”va”は含まれないのでfalseとなります。trueを返したいのであれば、第二引数に1や2を指定すればOKです！

indexOf / lastIndexOfメソッドで比較する 300文字

indexOfはある文字列が別の文字列の中で初めて登場する位置を返し、見つからなかった場合は-1を返すメソッドです。

let str = “JavaScriptは楽しい！”;
console.log(str.indexOf(“楽しい”));  //12が出力される

変数strに”楽しい”という文字列は0番目から数えて12番目にあるので12が出力されます。

一方lastIndexOfは文字列内で指定した文字列が最後に出現する位置を返すメソッドです。

let str2 = “JavaScriptScript”;
console.log(str.lastIndexOf(“Script”)); //10が出力される

変数str2に”Script”は2回出てきますが、最後に登場したのは10番目なので、10が出力されます。

正規表現で比較する

includesやindexOfメソッドの他にも、正規表現を使って部分一致を比較する方法があります。

正規表現とは、特定のパターンに一致する文字列を検索・置換・抽出する手法です。

let testString = “test@test.com”;
let pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

concole.log(pattern.test(testString)); //trueが出力される

上記のコードでは、メールアドレスの書式に合致しているかを判定しています。

正規表現は部分一致とパターン一致を融合した柔軟性の高い比較方法なので、パスワードの入力ルールの判定の際などにも役立つでしょう。

生成AIを使った正規表現の設定

メールアドレスや電話番号、機械の品番などはある程度形式が決まっていますが、ルールが多いために、自分で設定するのが手間に感じる方も少なくないでしょう。

そんな時は、生成AIに対して、「この形式を満たす正規表現を作ってください」とプロンプトするのがおすすめです。ダブルチェックが必要ではあるものの、先ほどの比較方法と組み合わせることで、さらに効率化することが可能です。

文字列が一致しない場合の注意点

今まで文字列の比較の方法を紹介してきましたが、その方法を使っても正しく判定されない場合があります。

特に以下の3点は、文字列比較の際に注意しておくべきポイントです。

• ==(等価演算子)===(厳密等価演算子)
• 大文字と小文字の比較
• 文字列の大小判定

本セクションでは、上記の文字列比較の際の注意点について詳しく解説していきます。

==(等価演算子)と===(厳密等価演算子)の違い

先ほども説明しましたが、==は値が等しいか、===は値と型が等しいかチェックするという違いがあります。

実際のプログラミングでは、文字列全体の比較には===の使用が推奨されます。

==を使うと暗黙的な型変換が行われるため、文字列型の入力を期待しているときに数値が入力されたのにそのまま処理が進んでしまう場合も少なくありません。

バグを生む可能性を少しでも減らすためにも、文字列の比較では===をなるべく使用するのをおすすめします。

大文字と小文字の比較

文字列の完全一致の比較を行うには===が有効ですが、その際は大文字と小文字の違いにも注意しなければなりません。

console.log(“ABC” === “abc”) //falseと出力される
console.log(“ABC”.toLowerCase() === “abc”) //trueと出力される

console.log(“abc” === “ABC”) //falseと出力される
console.log(“abc”.toUpperCase() === “ABC”) //trueと出力される

toLowerCaseは文字列中の大文字を小文字に変換し、toUpperCaseは文字列中の小文字を大文字に変換するメソッドです。

大文字と小文字が混在する文字列と全て大文字または小文字の文字列を比較する場合は、上記のメソッドを使用するよう心がけましょう！

文字列の大小判定

先ほど文字列の大小比較演算子を紹介しましたが、文字のUnicode値に関して以下のようなルールがあります。

• アルファベットはABC順で、大文字<小文字である
• 数字、記号<アルファベットである
• ひらがなやカタカナ同士は五十音順の比較と同様(辞書順)である
• ひらがな<カタカナである
• 漢字は正確な比較が不可能である

Unicode値の大小で文字列の大小が決まるので、上記のルールを意識しながら異なる種類の文字の大小比較を行っていきましょう！

生成AIを使った作業の効率化

コードを書く際は、まずコードの書き方を検索し、ヒットしたものを参考にアレンジするのが基本の流れとなります。しかし、通常検索ではテンプレートのようなコードしか見つからず、アレンジに時間がかかるケースも少なくありません。

一方、生成AIでうまく指示を出すと、8~9割程度はそのまま使えるレベルのコード（土台）を記述してくれるため、かなりの工数削減につながるでしょう。

具体的には、「こういう機能を〜（言語の名前）で作りたい。どういう情報があればコードを書ける？」といった形で、AIが求めている情報を推測するのではなく、逆に聞いてしまうプロンプトを投げます。

あとはAIが求めている情報に順番に答えれば、目的とするコードにグッと近づくでしょう。

JavaScriptで独自の生成AIを開発する

JavaScriptは外部で提供されるサービスの機能を利用できるAPIの組み込みに優れている言語です。数あるAPIの中でも、生成AIのAPIは非常に便利です。

たとえば、JavaScriptで作成したWebサイトにChatGPTのAPIを組み込んで、サイト専用の生成AIを作成できます。

定型的な質問に関してはAPIで開発したチャットボットで24時間対応させたり、ユーザーからのアンケートや感想を分析して改善策を提案させたりする使い方が可能になります。

JavaScriptはサイト制作には欠かせないので、上記のような手法を知っておくとあなたが作りたい製品やサービスの品質が一気に上がるでしょう。

まとめ

本記事では、JavaScriptで文字列比較を行う方法について解説していきました。

文字列の完全一致には値だけの比較を行う==(等価演算子)よりも、値と型両方の比較を行う===(厳密等価演算子)の使用が推奨されます。

また、部分一致ではincludesメソッドやindexOf/lastIndexOfメソッド、正規表現といった複数の比較方法があるので、状況に応じた使い分けが大切です。

さらに文字列を比較する際には、アルファベットの大文字や小文字が区別されることや、文字列の大小が文字のUnicode値の大小で決まる点にも注意する必要があります。

文字列の比較におけるエラーやバグは非常に多いので、適切な比較を行っていきましょう！

そして、生成AIを組み合わせることで、初心者でもJavaScriptが簡単に使えるようになります。JavaScriptで何か製品やサービスを作る際はAPIの組み込み、特に生成AIのAPIの使用を検討してみてください。