【JavaScript入門】文字列を「比較」する演算子の使い方まとめ！

こんにちは、ライターのマサトです！

今回は、文字列を「比較」する基本から注意するべきポイントまでまとめて学習致します！

この記事では、

などの基本的な使い方から応用的な使い方に関しても解説していきます。

この記事で、文字列の比較をしっかり学習して自分のスキルアップを目指しましょう！

「文字列の比較」とは？

まずは、「文字列の比較」について基本的な知識から学んでいきましょう！

JavaScriptに限らず、プログラミングの世界では「文字」と「文字」を比較することがよくあります。一般的には、目的とする「文字列」を正しく取得できているかを条件分岐で処理するケースが多いでしょう。

ただし、文字列を比較する際には注意点が多くあり、例えば「文字と数字」「大文字と小文字」などは間違いやすい代表です。

本記事では、基本的な文字列の比較方法から間違いやすいポイントまで体系的に学べるように構成しているのでぜひ参考にしてみてください！

「イコール(equals)」の使い方

ここからは、文字列を比較する際によく使われる「=（イコール）」の使い方について学んでいきます。
JavaScriptでは「==」「===」の2種類がよく使われているので、それぞれの違いや実際のプログラミング例を見ていきます。

「==（等価演算子）」で文字列を比較する方法

まずは単純な文字列の比較方法から学習しましょう！

一般的な比較方法としては、【 文字列 == 文字列 】のように「==」を利用することでtrue / falseを取得することができます。

次のサンプル例を見てください！

console.log( 'りんご' == 'りんご' );

実行結果

true

この例では、「りんご」という文字列を比較しているのが分かりますね。どちらも同じ「りんご」という文字なので、当然ですが結果は「true」となり等しいことが分かります。

ちなみに、文字列同士の比較だけでなく変数などを使って比較することも可能です。

var str = 'りんご';

console.log( 'りんご' == str );

この例では、「りんご」という文字列を変数に代入してから比較しているのが分かりますね。もちろん結果は「true」となり、どちらも等しいことが分かります。

「===（厳密等価演算子）」で文字列を比較する方法

次に、イコール3つを使った「===」で比較する方法を見てみましょう！

基本的な使い方は、先ほどの「==」を使った比較と同じように文字列同士を指定すればOKです。

次のサンプル例を見てください！

var str = new String('りんご');

console.log( 'りんご' == str ); //「==」で比較

console.log( 'りんご' === str );//「===」で比較

実行結果

true

false

この例では、「String()」を使って文字列を生成してから変数に代入しています。

注目すべきは、「==」と「===」で同じように比較しているものの実行結果に差があるという点です！

なぜなら、以下のような違いがあるからです。

実は、「String()」で生成された文字列というのは「String型」ではなく「Object型」になります。

そのため、文字列と比較した場合「==」ではtrueになるものの、「===」だと型が違うのでfalseになるというわけです。

このような理由から、通常は厳密に比較することができる「===」を優先して利用するのが良いでしょう。

文字列の比較を使ったIF文の書き方

それでは、これまで学んだ比較方法を活用して簡単な条件分岐処理を作ってみましょう！

IF文の「条件式」に比較結果をそのまま当てはめることで、比較した結果に応じた分岐処理を簡単に作れます。

次のサンプル例を見てください！

var str = '花子';

if('太郎' === str) {
    console.log('あなたは太郎さんです！');
}
else {
    console.log('あなたは太郎さんではありません');
}

この例では、「太郎」という文字列と比較して等しいかどうかをIF文の条件式にしています。

このように記述すれば、等しい場合にはtrueの処理が実行されて等しくない場合はfalseの処理が実行されるわけです。また、IF文について今回学習した比較の応用例を次の記事でさらに詳しく解説しているのでぜひ参考にしてみてください！

比較演算子の使い方

ここからは、「=（イコール）」も含めてJavaScriptで利用できる比較演算子を解説していきます。

比較演算子の種類とその使い方、indexOf()を利用した活用方法なども合わせて学習していきましょう！

比較演算子の種類と使い方

まずは、比較演算子の種類について見ていきましょう。

JavaScriptで利用できる演算子の一覧は以下のとおりです！

>	左辺が右辺よりも大きい場合はtrue
>=	左辺が右辺よりも大きいか等しい場合はtrue
<	左辺が右辺よりも小さい場合はtrue
<=	左辺が右辺よりも小さいか等しい場合はtrue
=== (==)	左辺と右辺が等しい場合はtrue
!== (!=)	左辺と右辺が等しくない場合はtrue

簡単な使い方として、比較演算子の「<」を利用したプログラミングを見てみましょう！

var result = 'あ' < 'い';

console.log( result );

実行結果

true

この例では、ひらがなの「あ」と「い」を比較しています。

日本語のひらがなは、「あ」の次に「い」がきてその次に「う」がくる…という風に順番が決まっていますよね？これは数字の「1,2,3,4,5…」のイメージと同じで、「あ」の次に「い」が来るので「あ」よりも「い」の方が大きいということになるのです。

そのため、実行結果はtrueとなり「あ」よりも「い」の方が大きいという意味になるわけです。
（英語も同じで、「’a’ < ‘b’」はtrueになります…）

indexOf()で部分一致させる方法

JavaScriptでは文字列を検索する時に「indexOf()」メソッドをよく利用します。

この時に、検索したい目的の文字列が見つからなかった場合は「-1」が返り値として取得できる特徴があります。これを活用して比較演算子と組み合わせると、検索結果に応じた条件分岐の処理が可能になります。

次のサンプル例を見てください！

var str = 'リンゴ、バナナ、メロン、イチゴ';

var result = str.indexOf('バナナ');

if(result !== -1) {
    console.log('見つかりました！');
}
else {
    console.log('見つかりませんでした')
}

この例では、複数の単語が記述された文字列から「バナナ」が含まれているかどうかを「indexOf()」を使って検索しています。

このindexOf()の結果が「-1」であれば見つからなかったということなので、「!==」を使って条件式を組み立てれば良いわけです。

文字列比較の注意点

基本的な文字列の比較を学んだところで、間違いやすいポイントをについて見ていきましょう！

よくあるケースとして、文字と数値の組み合わせや大文字・小文字の比較、正規表現を使ったものまでそれぞれ詳しく見ていきましょう！

文字と数値の組み合わせに注意するべき点

まずは「文字と数値」を比較する場合の注意点を学びましょう！

まず、大前提として「文字」と「数値」は、それぞれ「String型」「Number型」というように「型」が違うので同じではありません。

しかしながら、「文字」と「数値」を連結すると「型」が変化するので注意が必要なのです！

次のサンプル例を見てください！

//数値と文字を連結する
var num = 10 + 'です';

console.log( typeof num );

実行結果

string

この例では、数値「10」と文字列「です」を連結していますよね？

注目すべきは実行結果です！

実は、数値は文字列と連結することで「型」がStringになるのです。

この仕様を知らずに比較演算子を使ったプログラムを記述すると、バグの原因にもなり得るので十分に注意しておきましょう！ちなみに「＋」による連結についての詳細は、次の記事で基本から応用技まで解説していますのでぜひ参考にしてみてください！

大文字と小文字の比較で注意するべき点

次に、アルファベットの「大文字」「小文字」についての注意ポイントを見ていきましょう！

例えば、「JavaScript」というキーワードを、ユーザーに入力してもらうケースを想定してみます。この場合、「javascript」とすべて小文字で入力したり、「javaScript」と「S」だけ大文字になったりなど、さまざまなパターンが想定されます。

このように、大文字・小文字が混在しているような場合でも、区別することなく比較するにはどうすれば良いのでしょうか？

最も簡単な例としては、「toLowerCase()」メソッドを利用する方法があります。

var text = 'JavaScript';

//変数「text」をすべて小文字に変換して比較する 
var result = 'javascript' === text.toLowerCase();

console.log( result );

実行結果

true

この例では、 ユーザーが入力したキーワードを変数「text」に代入すると想定しています。

どのような文字列パターンで入力されているのか分からないので、比較する際に「toLowerCase()」を使ってすべて小文字に変換するわけです。そうすれば、すべて小文字の「javascript」に変換されるので、あとは通常通り文字列を比較すれば良いわけです！

正規表現で文字列比較をする時に注意すること

今度は、特殊な方法である正規表現を使った注意点を見ていきます。

正規表現を活用すれば、どのような文字列でも検索できたり比較することが可能です。

しかし、できることが多い分だけ学習コストも高いわけですが、重要なポイントは「完全一致」と「部分一致」を意識することです。正規表現では「^ $」を利用することで完全一致が実現でき、使わなければ部分一致を利用できます。

次のサンプル例を見てください！

var text = '田中太郎';

var reg = new RegExp(/^田中太郎$/);

var result = reg.test( text );

console.log( result );

実行結果

true

この例では、正規表現を使って「人物名」を比較しています。

「^」は文字列の先頭を意味し、「$」は文字列の末尾を意味しています。

つまり、「/^田中太郎$/」は「田中」で始まり「太郎」で終わる文字列かどうかを比較しているというわけです。

これは完全一致しないとtrueにならないことを意味しているわけですね。

反対に「^ $」を使わない場合も見てみましょう！

var text = '田中太郎';

var reg = new RegExp(/太郎/);

var result = reg.test( text );

console.log( result );

実行結果

true

注目すべきは正規表現の箇所です！

「/太郎/」と記述することで、名字は何でもOKで名前が「太郎」であるかどうかだけを比較しているのです。

もちろん、「/田中/」と記述して名字だけをチェックするのもOKです。

つまり、これは部分一致を意味しており柔軟な比較処理を記述できるわけですね。

正規表現についての基本的な使い方や活用方法に関しては、次の記事で詳しく解説しているのでぜひ参考にしてみてください！

まとめ

今回は、文字列を「比較」する時に、注意するべきポイントをいくつかまとめて学習しました！

もう一度、簡単にポイントをまとめると次のようになります！

これらの内容を基本としつつ、自分のコードへ積極的に取り入れながら、ぜひ有効活用してみてください！