こんにちはTakaです。今回はJavaScriptで文字列を比較する方法について詳しく説明していきます。
この記事では、
・文字列比較とは？
・文字列を比較する方法
・比較演算子の種類
・比較する時の注意点
など、文字列比較に関する基礎的な知識を分かりやすく解説していきます。
Javascriptを学び始めたばかりの方には、文字列ってどうやって比較するの？
==(等価演算子)と===(厳密等価演算子)でなんで実行結果が違うの？
などといった疑問を抱く方も多いのではないでしょうか？この記事を読んで文字列の比較を完璧にマスターしていきましょう！
目次
文字列比較とは？
コンピューターは1つ1つの文字を「文字コード」と呼ばれるもので管理しています。文字コードとは文字を識別する番号です。文字列は1つ以上の文字が連なったものであり、文字列の比較は、文字列の先頭から順番に1つ1つの文字コードを比較していきます。
※文字列と文字列比較の場合は、例え文字列が数値を表す文字列だったとしても文字コードで比較される点にご注意ください。
文字列を比較する方法
JavaScriptには、厳密な比較と型変換の比較があります。
厳密な比較 (例: ===) は、オペランドが同じ型で、内容も一致している場合にのみTrueを返します。よく使用される抽象的な比較 (例: ==) は、比較する前にオペランドを同じ型に変換します。
抽象的な関係比較 (例: <=) では、まず比較前にオペランドがプリミティブ型に変換され、それから同じ型に変換されます。文字列は数値と同様に演算子で比較することが可能です。
※オペランドは日本語で「被演算子」ともいい、数式を構成する要素のうち、数値や変数のことを指します。プリミティブ型とは文字列、数値などのメソッドをもたないデータ型のことです。
まずは単純な文字列の比較方法からみていきましょう。最も一般的な比較方法としては、【 文字列 == 文字列 】のように「==」（等価演算子）を利用することでtrueもしくはfalseを取得することができます。
==（等価演算子）」で文字列を比較する方法
等価演算子は、2 つのオペランドが同じ型でない場合にオペランドを変換して、それから厳密な比較を行います。両方のオペランドがオブジェクトであるなら、 JavaScriptは内部参照を比較するので、オペランドがメモリ内の同じオブジェクトを参照するときに等しくなります。
それでは実際にサンプルをみていきましょう。
Chromeブラウザーのデベロッパーツールを使って実行していきます。
|
1 |
console.log( 'うさぎ' == 'うさぎ' ); |
実行結果です。
|
1 |
true |
このサンプルでは、「うさぎ」という文字列を比較しています。どちらも同じ「うさぎ」という文字なので、もちろん実行結果は「true」となります。
「===（厳密等価演算子）」で文字列を比較する方法
次に、「===」（厳密等価演算子）で比較する方法をみていきましょう。厳密不等価演算子は、オペランド同士が等しくないか、型が等しくない、あるいはその両方であるならTrueを返します。先ほどの「==」を使った比較と同じように文字列同士を指定します。
実際にサンプルをみていきましょう。
|
1 2 3 4 5 |
var str = new String('うさぎ'); console.log( 'うさぎ' == str ); console.log( 'うさぎ' === str ); |
実行結果
|
1 2 3 |
true false |
このサンプルコードでは、「String()」を使って文字列を生成してから変数に代入していますが、全く同じ文字列を比較しているにも関わらず実行結果が違います。
何故だと思いますか？
理由は以下の通りです。
- 「==」は、「値」だけを比較して「型」は無視している
- 「===」は、「値」と「型」を比較している
「String()」で生成された文字列というのは「String型」ではなく「Object型」になります。
そのため、同じ文字列を比較した場合「==」ではtrueになるが、「===」だと型が違うのでfalseになるということです。
このような観点からすると、厳密に比較することができる「===」を優先的に利用するのが良いでしょう。
比較演算子を用いた文字列の比較
続いて、JavaScriptで利用できる比較演算子を解説していきます。
Javascriptで利用可能な比較演算子は先ほど解説した等価、厳密等価演算子を含めて以下の8種類です。
| ==（等価） |
左辺と右辺が等しい場合はtrueを返します。
|
| ===（厳密等価） |
左辺と右辺が等しい、かつ/または同じ型である場合はtrueを返します。
|
| !=（不等価） | 左辺と右辺が等しくない場合はtrueを返します。 |
| !==（厳密不等価） | 左辺と右辺が等しくなく、かつ/または同じ型でない場合はtrueを返します。 |
| >（より大きい） | 左辺が右辺よりも大きい場合はtrueを返します。 |
| <（より小さい） | 左辺が右辺よりも小さい場合はtrueを返します。 |
| >=（以上） | 左辺が右辺よりも大きいか等しい場合はtrueを返します。 |
| <=（以下） | 左辺が右辺よりも小さいか等しい場合はtrueを返します。 |
それぞれの比較演算子を利用したサンプルコードをみていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
console.log('あいうえお' != 'かきくけこ'); console.log('あいうえお' !== 'かきくけこ'); console.log('あいうえお' > 'かきくけこ'); console.log('あいうえお' < 'かきくけこ'); console.log('あいうえお' >= 'かきくけこ'); console.log('あいうえお' <= 'かきくけこ'); |
実行結果です。
|
1 2 3 4 5 6 7 8 9 10 11 |
true true false true false true |
なんとなく分かると思いますが、日本語のひらがなは、「あ,い,う,え,お…」という風に順番が決まっています。これは数字の「1,2,3,4,5…」のイメージと同じで、あいうえお順で次第に大きくなっていきます。
そのため、「’あいうえお’ > ‘かきくけこ’」の実行結果がfalse、「’あいうえお’ < ‘かきくけこ’」がtrueとなります。
ちなみに英語も同じで、「a,b,c,d,e…」と次第に大きくなっていきます。
文字列を比較する時の注意点
ここまでは基本的な文字列の比較方法を紹介しましたが、いくつか注意点があるので解説していきます。
大文字と小文字の比較
まずはアルファベットの「大文字」「小文字」の比較についての注意点を見ていきましょう。
|
1 2 3 |
var result = 'ABC' == 'abc'; console.log(result); |
実行結果
|
1 |
false |
このように、「大文字」と「小文字」という違いだけで実行結果がfalseになってしまいます。
では大文字・小文字を区別することなく比較するにはどのようにすればいいでしょうか？一例をあげると、toUpperCase()メソッドを利用する方法があります。
こちらがサンプルコードです。
|
1 2 3 4 5 |
var text = 'ABC'; var result = 'abc'.toUpperCase() === text; //toUpperCaseを使って両方大文字にしてから比較する console.log( result ); |
実行結果
|
1 |
true |
toUpperCase()は、対象の文字列に小文字のアルファベットが含まれていた場合、大文字に変換した新しい文字列を返してくれるメソッドになります。
文字と数値の組み合わせ
次に文字と数値の組み合わせですが、「文字」と「数値」は、それぞれ「String型」「Number型」というように「型」が違います。
しかし、「文字」と「数値」を連結すると、なんと「型」が変化するので注意が必要です。
実際にサンプルを見ていきましょう。
|
1 2 3 |
var num = 5 + 'ab'; console.log( typeof num ); |
実行結果
|
1 |
string |
数値「5」と文字列「ab」を連結していますが、実行結果から分かる通り、「String型」になっています。
文字と数値の違いは初心者の方が引っかかりやすい部分でもあるので注意してくださいね。
まとめ
いかがでしたか？
今回はJavascriptの文字列の比較について解説しました。
この記事で解説したポイントを、少しずつご自身のコードにも取り入れいみてくださいね。
