THE HAM MEDIA BLOG

JavaScriptの勉強:条件演算子「?」

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
条件演算子
比較演算子
javascript

条件演算子「?」

実はまだまだ知らない事が多いJavaScriptの基本、
ちゃんと勉強しないとなーなんて思うのですが、
ちょくちょく気づいた時にしかできなかったりします。

そんな今回「あれ?なんだっけな、これ?」
なんて思ったのが「?」の使いどころ。
調べてみたら、条件演算子ということ。
どういう使い方ができるのか、少し試してみた。

条件演算子を使ってみた

条件演算子を使ったサンプルを作ってみる事にした。
ついでにifの条件分岐とちょっとだけ正規表現とかも入れてみた。

$(function(){
  $('button').click(function(){
    $('form').attr('action','');
    xx = $('input').val();
    if(xx >= 21 || xx <= 0){
      alert('数字は1から20の間で入力してください。');
      return false;
    }else if(xx.match(/\D/)){
      alert('数字を入力してください');
      return false;
    }else{
      yy = (xx >= 10) ? "big" : "small";
      $('div.preview p.demo01').text(xx+'は'+yy);
      return false;
    };
  });
});

1〜20の数字を入力してください。10以上ならbig、それ以下ならsmallを表示。

ここに判定結果を表示

またわかり辛い例を作ってしまった。
1〜20の数字を入れたときのbig or smallの判定を条件演算子を使っている。
あとは条件分岐のifで分岐させてしまった。
その部分も比較演算子とかでもできるのだろうか。
・・・それは別の機会に考えてみることにしよう。
とりあえず簡易判定には使えそうだ。

もう少しわかりやすい条件演算子例

もう少し部分的に作ってみた

$(function(){
  var xyz = 10; 
  var zz = (xyz >= 5) ? "5以上です(true)" : "5以下です(false)";
  $('p#demo00').text('xyzが10の時zzは'+zz);
});

xyzが5以下か5以上かの判定。

xyzが10の時zzは

ついでに比較演算子も

ついでに比較演算子についても勉強。
特に、変数に入れる段階で指定する場合は何がはいるのかを確認。

$(function(){
  var hoge = 2;
  var hoge2 = 2;
  var Display1 = (hoge == hoge2);
  var Display2 = (hoge != hoge2);
  var Display3 = (hoge < hoge2);
  var Display4 = (hoge <= hoge2);
  var Display5 = (hoge > hoge2);
  var Display6 = (hoge >= hoge2);
  var Display7 = (hoge === hoge2);
  $('#test1').text('hoge == hoge2は '+Display1);
  $('#test2').text('hoge != hoge2は '+Display2);
  $('#test3').text('hoge < hoge2は '+Display3);
  $('#test4').text('hoge <= hoge2は '+Display4);
  $('#test5').text('hoge > hoge2は '+Display5);
  $('#test6').text('hoge >= hoge2は '+Display6);
  $('#test7').text('hoge === hoge2は '+Display7);
});

hoge = 2でhoge2 = 2の時

  • hoge == hoge2は
  • hoge != hoge2は
  • hoge < hoge2は
  • hoge <= hoge2は
  • hoge > hoge2は
  • hoge >= hoge2は
  • hoge === hoge2は

なるほど、trueとかの判定が返ってくるのですね。
これも勉強になりました。

この記事へのコメント
ご無沙汰です。JSでこの演算子は知りませんでした。
見た目から三項演算子っぽいですね。
Posted by ichimura at 2008年10月28日
>ichimuraさん
僕も調べるまで実はしらなかったのです。
まだまだ勉強不足ですよ&#12316;。
この方法はtrueかfalseかを判定して、
それぞれの結果を出すだけのことで利用するなら、
ifを使うよりも簡単だと思います。
Posted by ハム at 2008年10月28日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。