JavaScriptのテンプレートリテラル内で条件分岐を行う方法

JavaScriptでES6以降は「テンプレートリテラル」という機能が使えます。

これはバックティック記号（`）で区切ったリテラルのことで、${}の中に変数や簡単な演算を入力して、表示できます。

let text = `合計金額は${totalPrice * 1.1}円です`;

スッキリ書けて便利なのですが、この中で普通にif文を入力するとエラーが表示されます。

// 条件分岐で値がnullなどの場合は0円にしたいが、エラーになる
let text = `合計金額は${if(totalPrice){ totalPrice * 1.1 }else{ 0 }}円です`;

三項演算子を使う

テンプレートリテラル内で条件分岐をしたい場合は、三項演算子を使います。
三項演算子は下記の形式で条件分岐を行います。

条件 ? trueのときの表示 : falseのときの表示

書く内容や順番はif文と同じで「条件 → true → false」の順に書きます。
あとは「?」と「:」記号を忘れたり、逆にしないように注意しましょう。

if(条件){
  trueのときの表示
}else{
  falseのときの表示
}

この方法であればテンプレートリテラル内でも記述して、条件分岐ができます。

let text = `合計金額は${totalPrice ? totalPrice * 1.1 : 0 }円です`;

データが無い場合のデフォルト表示によく使う

テンプレートリテラルはシンプルに書けますし、三項演算子を使った分岐はデータが無い場合のデフォルト表示の処理によく使います。

知らないとまったく意味の分からない記述ですが、慣れれば1行で簡単に記述できますし、テンプレートリテラル以外でも使えます。

真偽それぞれの処理が1行ずつくらいしかない場合は、こちらを使った方がラクそうです。