【javascript】三項演算子 「if文」の処理を簡単かつ効率よく記述しよう

三項演算子とは?
三項演算子を使えば、「IF文」と同じような処理を簡単かつ効率よく記述できます。
if文だと5行で書いていたものが、三項演算子を使うと1行で書くことができます。
書き方や、どんな場合に使うかを解説していきます。
三項演算子の書き方
基本


例
時刻が10時前なら、おはよう!、
10時以降なら、こんにちは!
が変数greetingに格納されます。
let time = 7;
let greeting = time <= 10 ? "おはよう!" : "こんにちは!";
上と下は全く同じ処理をしています。三項演算子で書くとスッキリします。
let time = 7;
let greeting;
if (time < 10) {
greeting = "おはよう!";
} else {
greeting = "こんにちは!";
}
else if
else if も三項演算子で書くことができます。
let greeting = time <= 10 ? "おはよう!": time <=18 ? "こんにちは!" : "こんばんは!";
一行が長くなる場合は、改行して書くこともできます。しかし、分岐が多い場合はやはりif文で書いた方が見やすいです。
let greeting = time <= 10 ? "おはよう!"
: time <=18 ? "こんにちは!"
: "こんばんは!";
関数を指定する
以下のように、条件式により関数を呼び出すこともできます。
let language = "e";
language == "ja" ? japanese()
: language == "e" ? english()
: console.log("undifind");;
// => Hello!
function japanese(){
console.log("こんにちは!");
}
function english(){
console.log("Hello!");
}
使用例
文字列かどうかの判定
let judge = typeof 3 == "string" ? true : false;
console.log(judge); // => false
時間表示で、1~9の時、01,02,03と表示させたい場合。
time = time < 10 ? "0" + time : time;
配列(array)からn個取り出す時、 選択した数字(n)がarray.lengthを超えなければ、 n = n、
超えれば、
n = array.lengthとする場合。
let n = n < array.length ? n : array.length;
まとめ
-
- if文を簡潔に記述することができる。
- else if も書くことができる。
- 条件式により、関数を呼び出すこともできる。
- 分岐が多い時はコードが読みにくくなるのが欠点
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを2つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは?window.innerHeightとは?window.pageYOffsetとは?
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript(Object.entries)を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク