Javascript {}对${}in和`对'；（倒勾与报价）

我对JSX和javascript都是新手，我对基于它们内部和周围的内容而具有多重含义的

{}

感到困惑。我对以下示例中的

{}

和

${}

之间的区别感到困惑。
在一个解释钩子的示例中，我们看到

this.setState（{count:this.state.count+1}）>

在这里，最里面的大括号表示一个JS对象和一个

key:value

对是作为唯一参数传递给this.setState（）的对象

稍后，在

componentDidUpdate

和

componentDidMount

方法中，我们看到

document.title=`您单击了${this.state.count}次/`

在这个代码段中，大括号没有包围
key:value
对，所以我知道它不是JSON对象。它位于JSX中的{}内，因此this.state.count应该计算为一个数字，但在这个表达式中，
$
的含义是什么

提前谢谢

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
计数：0
};
}
componentDidMount（）{
document.title=`您单击了${this.state.count}次'；
}
componentDidUpdate（）{
document.title=`您单击了${this.state.count}次'；
}
render（）{
返回(
您单击了{this.state.count}次

this.setState（{count:this.state.count+1}）}>
点击我
);
}
}
在JavaScript中，反勾号之间的内容是一个，而
${…}
是可用于在模板中嵌入JavaScript表达式的语法

在JSX
{…}
中，用于将动态值（相对于静态值）分配给组件上的道具。
和$组合是一种连接字符串的方法，比使用
+
的旧方法更易于读取

例如，假设您通过一些输入获得了users firstname，您可能会输出一些字符串，如
你好，马克
其中Mark是用户名。
你可以用任何一种方法来做
“你好”+user.firstname+“！”
或
`你好${user.firstname}`