Edited at

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


問題

こういった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タグを使用する。

ない場合は、""を返す。

という式になる。