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

javascript-string-compare-re2
マサト
書いた人 マサト
侍エンジニア塾ブログは、未経験からWebアプリ開発と仕事獲得をサポートする
侍エンジニア塾のオウンドメディアです。
プログラミング学習を覗き見

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

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

この記事では、

・「文字列の比較」とは?(新規)
・「イコール(equals)」の使い方

という基本的な内容から、

・比較演算子の使い方
・文字列比較の注意点

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

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

「文字列の比較」とは?

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

JavaScriptに限らず、プログラミングの世界では「文字」「文字」を比較することがよくあります。

一般的には、目的とする「文字列」を正しく取得できているかを条件分岐で処理するケースが多いでしょう。

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

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

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

ここからは、文字列を比較する際によく使われる「=(イコール)」の使い方について学んでいきます。

JavaScriptでは「==」「===」の2種類がよく使われているので、それぞれの違いや実際のプログラミング例を見ていきます。

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

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

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

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

実行結果

この例では、「りんご」という文字列を比較しているのが分かりますね。

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

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

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

もちろん結果は「true」となり、どちらも等しいことが分かります。

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

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

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

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

実行結果

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

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

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

・「==」は、「値」だけを比較して「型」はチェックしない
・「===」は、「値」と「型」を比較している

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

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

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

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

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

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

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

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

このように記述すれば、等しい場合にはtrueの処理が実行されて等しくない場合はfalseの処理が実行されるわけです。

また、IF文について今回学習した比較の応用例を次の記事でさらに詳しく解説しているのでぜひ参考にしてみてください!

比較演算子の使い方

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

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

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

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

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

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

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

実行結果

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

日本語のひらがなは、「あ」の次に「い」がきてその次に「う」がくる…という風に順番が決まっていますよね?

これは数字の「1,2,3,4,5…」のイメージと同じで、「あ」の次に「い」が来るので「あ」よりも「い」の方が大きいということになるのです。

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

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

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

この時に、検索したい目的の文字列が見つからなかった場合は「-1」が返り値として取得できる特徴があります。

これを活用して比較演算子と組み合わせると、検索結果に応じた条件分岐の処理が可能になります。

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

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

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

文字列比較の注意点

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

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

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

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

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

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

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

実行結果

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

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

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

この仕様を知らずに比較演算子を使ったプログラムを記述すると、バグの原因にもなり得るので十分に注意しておきましょう!

ちなみに「+」による連結についての詳細は、次の記事で基本から応用技まで解説していますのでぜひ参考にしてみてください!

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

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

例えば、「JavaScript」というキーワードを、ユーザーに入力してもらうケースを想定してみます。

この場合、「javascript」とすべて小文字で入力したり、「javaScript」と「S」だけ大文字になったりなど、さまざまなパターンが想定されます。

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

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

実行結果

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

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

そうすれば、すべて小文字の「javascript」に変換されるので、あとは通常通り文字列を比較すれば良いわけです!

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

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

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

しかし、できることが多い分だけ学習コストも高いわけですが、重要なポイントは「完全一致」と「部分一致」を意識することです。

正規表現では「^ $」を利用することで完全一致が実現でき、使わなければ部分一致を利用できます。

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

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

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

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

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

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

実行結果

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

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

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

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

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

まとめ

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

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

・文字列の比較には、「===」や「>」「<」なども利用することができる!
・比較するときは「値」と「型」に注意する!
・文字と数字を比較するときは、連結方法に気をつける!
・大文字・小文字を区別しないときは「toLowerCase()」を使う!
・正規表現で比較する時は「完全一致」「部分一致」を意識する!

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

JavaScriptカリキュラム無料公開中!

この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。

JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


無料体験レッスン実施中

今あなたはこんな悩みをお持ちではないでしょうか?

「つまづいてばかりで学習が進まない…」
「どこまで勉強すればいいのか、終わりが見えない…」
「習得できたとしてもどうやって仕事につなげればいいのかわからない…」

プログラミング学習やキャリアに関してお困りであれば、まずは『無料体験レッスン』にお申し込み下さい。

あなたにとって、最適の解決策をご提案させていただきます。

詳しくは下の画像をから詳しいサービス内容をご確認ください。

cta_js2

学習者インタビュー

人気記事セレクション

プログラミング学習者必見

専属講師に質問し放題、レッスンし放題!最短1ヶ月でフリーランスエンジニア
プログラミング学習カリキュラム無料公開中
Ruby学習カリキュラム無料公開中
Python学習カリキュラム無料公開中
 1記事最大11,000円!テックライター募集


LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。

JavaScript以外の趣味は、旅をしながらの街歩きや登山など。