Разница между {`$ {props.title}`} и {props.title}

Question

Я вижу в некоторых местах, чтобы получить значение title из реквизита, мы используем

{`${props.title} `}

, в то время как в некоторых других местах мы используем его

{props.title}

Что такое разница?

Answer 1

Первый вариант - использование литералов шаблона, подробнее здесь из документации:

Литералы шаблона - это строковые литералы, допускающие встроенные выражения. С ними можно использовать многострочные строки и функции интерполяции строк.

Второй вариант - просто передать строковое значение атрибуту.

Примите во внимание следующее:

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

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

Надеюсь, это поможет!

Answer 2

Оба ответа уже здесь хороши. Я не знаю контекст вашего вопроса, но в вашем примере разница между

{`$ {props.title}`}

и

{props.title}

возможно из-за того, что на первом, использующем литералы шаблона, перед последним обратным трюком есть дополнительный интервал.

Это полезно с jsx когда вы хотите сделать что-то вроде

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

вместо

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

Answer 3

Первый используется, когда вам нужно использовать некоторые строковые литералы. Например, если вы хотите добавить что-то к вашему title в этом случае.

Если вы хотите использовать только title, обычно используется второй.