JavaScript の比較
1. 比較オペレータ
比較オペレータは、2つの値を比較するために使用されます。
比較の結果は、常に true または false のいずれかのブーリアン値で返されます。
x = 5 と仮定した場合、各比較オペレータの挙動は以下の通りです。
| オペレータ | 説明 | 比較の例 | 結果 |
|---|---|---|---|
| == | 等しい | x == 8 | false |
| x == 5 | true | ||
| x == "5" | true | ||
| === | 値とタイプ(型)が等しい | x === 5 | true |
| x === "5" | false | ||
| != | 等しくない | x != 8 | true |
| !== | 値またはタイプが等しくない | x !== 5 | false |
| x !== "5" | true | ||
| x !== 8 | true | ||
| > | より大きい | x > 8 | false |
| < | より小さい | x < 8 | true |
| >= | 以上 | x >= 8 | false |
| <= | 以下 | x <= 8 | true |
比較オペレータは、コンディショナルステートメント(条件文)において、値を比較し、その結果に応じて特定のアクションを実行するために頻繁に利用されます。
if (age < 18) text = "アルコールを購入するには若すぎます";コンディショナルステートメントの具体的な使い方は、今後の if...else の章で詳しく解説します。
2. JavaScript ストリング(文字列)の比較
上記の比較オペレータはすべて、ストリングに対しても使用可能です。
例
let text1 = "A";
let text2 = "B";
let result = text1 < text2; // trueストリングの比較はアルファベット順(辞書順)で行われる点に注意してください。
例
let text1 = "20";
let text2 = "5";
let result = text1 < text2; // true上記の例では、"2" は "5" よりもアルファベット順(文字コード順)で小さいため、"20" は "5" より小さいと判定されます。
3. 異なるタイプ(型)の比較
異なるデータタイプ同士を比較すると、予期しない結果を招くことがあります。
JavaScript は、ストリングとナンバー(数値)を比較する際、ストリングをナンバーに変換してから比較を行います。
- 空のストリング (
"") は0に変換されます。 - 数値以外のストリング は
NaN(Not-a-Number) に変換されます。なお、NaN を含む比較の結果は常に false です。
| ケース | 値 | 結果 |
|---|---|---|
| 2 < 12 | 2 < 12 | true |
| 2 < "12" | 2 < "12" | true |
| 2 < "John" | 2 < "John" | false |
| 2 > "John" | 2 > "John" | false |
| 2 == "John" | 2 == "John" | false |
| "2" < "12" | "2" < "12" | false |
| "2" > "12" | "2" > "12" | true |
| "2" == "12" | "2" == "12" | false |
2つのストリングを比較する場合、"2" は "12" よりも大きくなります。これはアルファベット順において、"2" は "1" よりも後に来るためです。
意図した通りの比較結果を確保するためには、比較を行う前にバリアブルを適切なタイプに変換しておくのがベストプラクティスです。
例
// age をナンバーに変換
age = Number(age);
if (isNaN(age)) {
voteable = "入力値がナンバーではありません";
} else {
// 三項演算子による比較
voteable = (age < 18) ? "若すぎます" : "十分な年齢です";
}