JavaScript、テンプレートリテラルとは

Sun Jan 6, 2019 - JavaScript
Sat Jan 25, 2020

テンプレートリテラルとは、これまでのES5の書き方よりもより便利に書けるやり方。

テンプレート文字列、テンプレートストリングと呼ばれることもある。

ES5での書き方。

1
2
3
4
5
6
function getMessage() {
  const year = new Date().getFullYear();
  return "今年は" + year +"年です。"
}

getMessage();

テンプレートリテラルでの書き方。

`` (バッククオート)${}を使う。

Rubyの式展開#{}と似てる。

1
2
3
4
5
6
function getMessage() {
  const year = new Date().getFullYear();
  return `今年は${year}年です。`
}

getMessage();

使い所

  • dataなどに使うと見やすくなる

  • あまり使いすぎると意味不明になるので注意

See Also