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

URL: https://webrandum.net/javascript-template-literals-if/
公開日: 2022-10-24
更新日: 2022-10-24
カテゴリー: コーディング
タグ: JavaScript
出典: Webrandum（著者: サイトウ マサカズ）

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行ずつくらいしかない場合は、こちらを使った方がラクそうです。