【JavaScript入門】文字列の「比較」を完全マスターするコツを伝授!

javascript-compare-tutorial-top
マサト
書いた人 マサト

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

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

JavaScriptでは、単純に「文字」と「文字」を比較したい場合でも、容易に思わぬバグを生み出すことがあります。

特に、「文字と数字」や「大文字と小文字」などを比較する時には、文字列の特性をしっかりと理解しておくことが必要であり、誤ったプログラムを書いていてもエラーにならない場合もあります。

そこでこの記事では、これらの注意するべきポイントを整理してまとめ、文字の「比較」を行う基本的な方法から順を追って解説していきます!

文字列の比較について!

まずは、単純な文字列の「比較」から学習していきましょう!

一般的に、「文字」と「文字」を比較する場合は、「===(厳密等価演算子)」を使うケースが一般的です。

このように記述すると、双方の文字列が同じ場合には「true」、違う場合には「false」が返されます。

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

出力結果は…

となります。

どちらの文字列も同じ「アップル」なので、「true」が返されているわけですね。

ところが、次のサンプルの場合はどうでしょうか?

出力結果は…

となります。

「apple1」は「Stringオブジェクト」から文字列を作成しているのに対し、「apple2」は値を直接指定(プリミティブ値)しているのが分かります。

つまり、どちらも同じ「アップル」という文字列なのですが、オブジェクト型の「apple1」とString型の「apple2」はそれぞれ「型」が違うために「false」になっています。

「===」を使った比較の場合には、「値」と「型」がそれぞれ同じでなければ「false」となるわけです。次の記事では、より詳しい手法と「==」「===」の使い方の違いなどを解説していますので、ぜひ参考にしてみてください!

また、上記の結果を「true」にしたい場合には、「valueOf()」メソッドを利用する方法もあります。

出力結果は…

となります。

このサンプルのように、「new String()」で作成した文字列は、「valueOf()」メソッドを利用することでプリミティブ値となり、文字列を直接代入したケースと同じ扱いにすることが可能なので覚えておきましょう!

ちなみに、文字の比較には「<」「>」「>=」「<=」などの演算子も活用することができます!

例えば、次のサンプルでは「ひらがな」を「<」で比較しています。

出力結果は…

となります。

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

これは数字の「1,2,3,4,5…」のようなイメージと同じで、「あ」の次に「い」が来るので「あ」よりも「い」の方が大きいということになり、サンプルのように「true」が返されるわけです。
(英語も同じで、「’a’ < ‘b’」はtrueになります…)

文字と数字の注意点!

基本的な文字列の「比較」を学んだところで、今度は「文字と数字」についての比較を学習していきましょう!

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

そのため、次のサンプルのように比較するとよく分かります。

出力結果は…

となります。

「num1」は文字列、「num2」は数値を代入していますが、それぞれ異なる「型」なのでfalseが出力されているのが分かります。

しかしながら、「文字」と「数字」を連結すると出力結果に変化が現れるので注意が必要です。

出力結果は…

となります。

文字や数字は「+」を使って連結することが可能ですが、「値」が数値であっても「文字列」と連結すると最終的にはすべて「文字列」の扱いになるのです。

そのため、上記サンプルでは「num1」「num2」どちらも最終的に文字列「10です」となり、trueが返されることになるわけです。

この「+」による連結については、次の記事で詳細に解説していますので、ぜひ参考にしてみてください!

大文字と小文字の比較ポイント!

ここからは、アルファベットの「大文字」「小文字」についての比較方法を学習していきましょう!

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

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

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

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

出力結果は…

となります。

ユーザーが入力したキーワードを変数「text」と想定した場合、どんなパターンで入力されているのか分からないので、比較する際に「toLowerCase()」を使ってすべて小文字に変換するわけです。

そうすれば、すべて小文字の「javascript」に変換されるので、あとは通常通り文字列を比較すれば結果を得られますね。

また、他の方法としては、正規表現を使ったサンプルがベストでしょう。

もともと、正規表現には「大文字・小文字」を区別しないようにする「オプションフラグ」を設定することが可能なので、これを利用するとシンプルに実装することができます。

出力結果は…

となります。

こちらも、ユーザーが入力した文字を「text」とし、正規表現でオプションフラグ「i」を指定すれば、大文字・小文字を区別しなくなるので、そのまま「test()」メソッドを使って比較することが可能です。

正規表現についての基本的な使い方や活用方法に関しては、次の記事で誰でも理解できるようにまとめているので、ぜひ参考にしてみてください!

まとめ

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

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

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

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

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

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

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


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

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


無料体験レッスン実施中

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

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

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

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

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

cta_js2

学習者インタビュー

32歳ベンチャー企業元役員が起業してプログラミングを学んだ話
ヨガスタジオのマネージャーだった私が3ヶ月でWeb制作をマスターするためにした”たった1つ”のこと
Uターン女子がRubyを学んで理想のライフスタイルを手に入れた話
ダメ営業マンがわずか3ヶ月でエンジニアデビューできた理由

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

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


LINEで送る
Pocket

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

最新情報をお届けします

書いた人

マサト

マサト

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

JavaScript以外の趣味は、旅をしながらの登山やアジア巡りなど。