【テンプレートリテラル】JavaScriptで文字列結合がうまくいかない

簡単にいうとバックスラッシュで記載すべきところをシングルクオートで記載していたのが原因でした。

間違っていたコード
正しいコード
まとめ

間違っていたコード

以下のように時間を表示しようとしていたのですが、これでは動きません。

class Clock extends React.Component{
  render(){
    this.now = new Date();
    this.time = '${this.now.getHours()}:${this.now.getMinutes()}:${this.now.getSeconds()}';
    return <p> {this.time}</p>
  }
}

ちなみに以下のように書くことも可能ですが、できるだけ新しい書き方（ES6以降）で書きたかったがためにはまりました。

class Clock extends React.Component{
  render(){
    this.now = new Date();
    this.time = this.now.getHours()+':'+this.now.getMinutes()+':'+this.now.getSeconds();
    return <p> {this.time}</p>
  }
}

正しいコード

以下のようにシングルクオートをバッククオートにするだけです。

class Clock extends React.Component{
  render(){
    this.now = new Date();
    this.time = `${this.now.getHours()}:${this.now.getMinutes()}:${this.now.getSeconds()}`;
    return <p> {this.time}</p>
  }
}