More than 5 years have passed since last update.

JavaScriptで三項演算子を使用する際の注意点！

Last updated at 2019-02-06Posted at 2019-02-06

#問題
こういったjsファイルの記述をif文から三項演算子で一文にしたい。

message.js

var imagefile = '';
if (message.image.url) {
imagefile = `<img src="${message.image.url}", class = 'lower-message__image'>`;
}

#解答

  var imagefile = message.image.url? `<img src="${message.image.url}", class = 'lower-message__image'>` : "";

<読みやすいように改行すると、こう>

  var imagefile = message.image.url? 
`<img src="${message.image.url}", class = 'lower-message__image'>` : "";

#注意するポイント

元々のjsファイルではtrueしか記述していない、
jsファイルはこれでも動くことができる。

だがしかし、
三項演算子の場合だと　必ずtrueを表す「?」 とelseを表す「:」 がいる

今回の問題の場合、
trueの時は処理をimgの表示
elseの時は何もしないようにしたかった。

そのため、else　　すなわち「:」以下を、 ""　　とした。

つまり、

もし message.image.urlがあるならimgタグを使用する。
ない場合は、""を返す。

という式になる。