関係演算子

広告

詳しい使い方は別のページで解説しますが、条件によって実行する処理を分けたり、条件が満たされている間は繰り返し同じ処理を行うといった記述の仕方が可能です。

このような処理において条件式を記述するのに使われるのが関係演算子です。次のようなものが用意されています。

演算子使用例意味
<a < ba は b よりも小さい
<=a <= ba は b よりも小さいか等しい
>a > ba は b よりも大きい
>=a > ba は b よりも大きいか等しい
==a == ba と b は等しい
===a === ba と b は同一
!=a != ba は b は等しくない
!==a !== ba は b は同一でない
ina in baがbオブジェクトのプロパティ名かどうか
instanceofa instanceof bオブジェクトaがbクラスのインスタンスかどうか

※「==」演算子、「===」演算子、「!=」演算子、「!===」演算子については次のページで解説します。

※in演算子及びinstanceof演算子はオブジェクトのページで解説します。

関係演算子は2つの値を比べます。大きいか小さいかまたは等しいかなどを評価し、結果として式全体が論理値であるtrue又はfalseを返します。(論理値については「論理値」を参照して下さい)。

次の例を見てください。 

var old = 10;

if (old >= 20){
  alert("20歳以上です");
}else{
  alert("20歳未満です");
}

変数「old」に代入された値を20と比較します。if文では条件式「old >= 20」がtrueを返した場合は直後の「{」から「}」の間に記載された文を実行し、falseを返した場合にはelseの後の「{」から「}」の間に記載された文を実行します。今回の場合は「old >= 20」がfalseを返しますので「alert("20歳未満です");」が実行されることになります。

なお「>=」演算子は「大きいか等しい」を判別しますが、実際には「小さくない」場合にtrueとなります。また「<=」演算子は「小さいか等しい」を判別しますが、実際には「大きくない」場合にtrueとなります。

比較の手順

関係演算子の対象となる値がどちらも数値だった場合には数値の大きさを単に比較しますが、そうでない場合には次のように比較が行われます。

比較演算子の対象の値が文字列の場合にはアルファベット順に並べ替えられて比較されます。文字列の「abc」と「def」を比較した場合、「def」の方が大きいと判断されます。また「abc」と「ABC」を比較した場合、「abc」の方が大きいと判断されます。 

abc > def    false
abc > ABC    true

数値と文字列の比較の場合には、まず文字列を数値に変換した上で比較します。例えば数値の「10」と文字列の「20」を比較した場合には、まず文字列の「20」が数値の「20」に変換されて比較されるため、文字列の「20」の方が大きいと判断されます。

なお文字列が数値に変換できなかった場合には「NaN」に変換され条件式は必ずfalseとなります。 

"20" > 10    true
"14" > "20"  false
"abc" > 10   false ("abc"はNaNになるため)

対象の値がオブジェクトの場合には数値または文字列に変換した上で比較が行われます(文字列に変換された場合はさらに数値に変換されます)。変換できなかった場合は条件式はfalseとなります。またどちらかの値がNaNの場合は必ずfalseとなります。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script11_1.js">
</script>

</body>
</html>

var old = 10;
document.write("<p>年齢は" + old + "歳です。");
if (old >= 20){
  document.write("20歳以上です。");
}else{
  document.write("20歳未満です。");
}
document.write("</p>");

if ('abc' > 'def'){
  document.write("<p>abc は def より大きいです</p>");
}else{
  document.write("<p>abc は def より大きくありません</p>");
}

if ('abc' > 'ABC'){
  document.write("<p>abc は ABC より大きいです</p>");
}else{
  document.write("<p>abc は ABC より大きくありません</p>");
}

if (10 < "20"){
  document.write("<p>10 は '20' より小さいです</p>");
}else{
  document.write("<p>10 は '20' より小さくありません</p>");
}

上記を実際にブラウザ見てみると次のように表示されます。

p11-1

( Written by Tatsuo Ikura )