JavaScriptの比較演算子を完全ガイド!初心者でもわかる基本
新人
「JavaScriptで、2つの値を比較して、どちらが大きいか小さいかを調べる方法ってどうやるんですか?」
先輩
「それには、比較演算子を使います。比較演算子を使うと、値や型を比較して結果を得ることができますよ。」
新人
「具体的にはどのように使うんですか?」
先輩
「では、比較演算子を使った例を見ていきましょう!」
1. 比較演算子とは?
JavaScriptの比較演算子は、2つの値を比較して、条件が満たされるかどうかを調べるために使います。比較の結果は、真(true)または偽(false)のいずれかになります。
主な比較演算子は以下の通りです:
==: 値が等しいか===: 値と型が等しいか!=: 値が等しくないか!==: 値もしくは型が等しくないか<: より小さいか>: より大きいか<=: 以下か>=: 以上か
2. 値と型が等しい(===)
「値と型が等しいか」を調べる場合は、===を使います。===は、値だけでなく、データ型も一致しているかどうかを比較します。
次のコードでは、2つの変数が値と型の両方で等しいかどうかを比較しています。
<script>
let x = 5;
let y = 5;
if (x === y) {
document.write("xとyは値も型も等しいです。");
} else {
document.write("xとyは等しくありません。");
}
</script>
ブラウザ表示
このコードでは、xとyが値も型も等しいので、「xとyは値も型も等しいです。」が表示されます。
3. 値が等しい(==)
「値が等しいか」を調べる場合は、==を使います。==は、値が等しいかを比較しますが、型の違いは自動的に変換されて比較されます。
次のコードでは、2つの変数が値で等しいかどうかを比較しています。
<script>
let x = "5"; // 文字列型
let y = 5; // 数値型
if (x == y) {
document.write("xとyは値が等しいです。");
} else {
document.write("xとyは値が等しくありません。");
}
</script>
ブラウザ表示
このコードでは、文字列型のxと数値型のyは値が等しいため、「xとyは値が等しいです。」が表示されます。
4. 値もしくは型が等しくない(!==)
「値もしくは型が等しくないか」を調べる場合は、!==を使います。この演算子は、値または型のどちらかが異なる場合にtrueを返します。
次のコードでは、2つの変数が値または型が異なるかどうかを比較しています。
<script>
let x = 5;
let y = "5"; // 型が違う
if (x !== y) {
document.write("xとyは値もしくは型が等しくないです。");
} else {
document.write("xとyは等しいです。");
}
</script>
ブラウザ表示
このコードでは、xとyは型が異なるため、「xとyは値もしくは型が等しくないです。」が表示されます。
5. より小さい(<)
「より小さいか」を調べる場合は、<を使います。この演算子は、左辺の値が右辺より小さい場合にtrueを返します。
次のコードでは、2つの変数を比較して、左辺が右辺より小さいかどうかを調べています。
<script>
let x = 3;
let y = 5;
if (x < y) {
document.write("xはyより小さいです。");
}
</script>
ブラウザ表示
このコードでは、xがyより小さいので、「xはyより小さいです。」が表示されます。
6. より大きい(>)
「より大きいか」を調べる場合は、>を使います。この演算子は、左辺の値が右辺より大きい場合にtrueを返します。
次のコードでは、2つの変数を比較して、左辺が右辺より大きいかどうかを調べています。
<script>
let x = 10;
let y = 5;
if (x > y) {
document.write("xはyより大きいです。");
}
</script>
ブラウザ表示
このコードでは、xがyより大きいため、「xはyより大きいです。」が表示されます。
7. 以下(<=)
「以下か」を調べる場合は、<=を使います。この演算子は、左辺の値が右辺より小さいか、等しい場合にtrueを返します。
次のコードでは、2つの変数を比較して、左辺が右辺以下かどうかを調べています。
<script>
let x = 5;
let y = 5;
if (x <= y) {
document.write("xはy以下です。");
}
</script>
ブラウザ表示
このコードでは、xがy以下なので、「xはy以下です。」が表示されます。
8. 以上(>=)
「以上か」を調べる場合は、>=を使います。この演算子は、左辺の値が右辺より大きいか、等しい場合にtrueを返します。
次のコードでは、2つの変数を比較して、左辺が右辺以上かどうかを調べています。
<script>
let x = 10;
let y = 5;
if (x >= y) {
document.write("xはy以上です。");
}
</script>
ブラウザ表示
このコードでは、xがy以上なので、「xはy以上です。」が表示されます。