{`${props.title} `}与{props.title}的差异

Question

我发现在某些地方，为了从props中获取title的值，我们使用

{`${props.title} `}

而在其他一些地方，我们使用它

{props.title}

有什么关系？

Answer 1

第一个选项是使用模板文字，请从文档中进一步阅读here：

模板文字是允许嵌入表达式的字符串文字。您可以将多行字符串和字符串插值功能与它们一起使用。

第二种选择只是将字符串值传递给属性。

请考虑以下几点：

​

const data = {
  title: 'random title'
};

console.log(data.title);
console.log(`${data.title}`);

​

我希望这对你有帮助！

Answer 2

第一个是当你必须使用一些字符串文字时使用的。例如，在这种情况下，当你想向你的title追加一些东西的时候。

如果您只想使用title，通常会使用第二个。

Answer 3

这里的两个答案都是好的。我不知道你的问题的背景，但在你的例子中，

{${props.title}}

和

{props.title}

可能是因为在第一次使用模板文字时，在最后一个反引号之前有一个额外的空格。

当你想做像这样的事情时，jsx很有用

<p>
 {`${props.withExtraSpacing}: some text`}
</p>

而不是

<p>
 {props.withoutExtraSpacing} + " " + ": some text"
</p>