Que signifie $ {} (signe dollar et accolades) dans une chaîne en Javascript?

160

Je n'ai rien vu ici ni sur MDN. Je suis sûr que je manque juste quelque chose. Il doit y avoir de la documentation à ce sujet quelque part?

Fonctionnellement, il semble que cela vous permet d'imbriquer une variable dans une chaîne sans faire de concaténation à l'aide de l' +opérateur. Je recherche de la documentation sur cette fonctionnalité.

Exemple:

var string = 'this is a string';

console.log(`Insert a string here: ${string}`);

Développer l'extrait

— Darren Joy
source

Pouvez-vous donner un contexte à ce que vous demandez? Cette question n'est pas claire telle qu'elle est écrite.

— Sam Hanley

3

5

Ce n'est pas une mauvaise question. C'est une nouvelle fonctionnalité, et je ne peux certainement pas trouver de doublon sur SO, bien qu'un exemple de ce qui a été vu exactement aurait été bon.

@ squint - d'accord, mais un exemple de code et une référence à la source auraient été utiles.

— RobG

Exemple ajouté. La référence était dans un défi de codage mais c'était une donnée, comme si c'était quelque chose que vous venez d'utiliser. Je n'avais rien vu dessus et je n'ai rien trouvé non plus. (Au cours des dernières années, je n'ai jamais eu à poser de question ici. Donc, il semble que presque tout ait maintenant ...)

— Darren Joy

192

Vous parlez de littéraux de modèle .

Ils permettent à la fois les chaînes multilignes et l'interpolation de chaînes.

Chaînes multilignes:

console.log(`foo
bar`);
// foo
// bar

Développer l'extrait

Interpolation de chaîne:

var foo = 'bar';
console.log(`Let's meet at the ${foo}`);
// Let's meet at the bar

Développer l'extrait

— Rick Runyon
source

67

Une chose qui m'a longtemps dérouté est que les modèles littéraux utilisent le backtick, qui se trouve à gauche de «1» sur le clavier, au lieu d'un guillemet simple (').

— Sydney le

19

Cool: Vous pouvez même "injecter" du code:console.log(`Your array:\n ${arr.join('\n ')}`)

— T4NK3R

5

C'est bizarre que ce Template Literalne soit pas pris en charge dans IE ou c'est peut-être naturel pour IE de ne pas prendre en charge les choses cool. Lire la suite

— Mohammad Musavi

12

Comme mentionné dans un commentaire ci-dessus, vous pouvez avoir des expressions dans les chaînes / littéraux du modèle. Exemple:

const one = 1;
const two = 2;
const result = `One add two is ${one + two}`;
console.log(result); // output: One add two is 3

Développer l'extrait

— Joël H
source

Est-il correct de dire que les chaînes de modèle peuvent être utilisées pour injecter du code dans la chaîne?

— carloswm85 le

Vous injectez des expressions et les expressions sont du code. Vous ne pouvez cependant injecter aucun type de code, mais uniquement des expressions JavaScript.

— Joel H le

J'essaierai d'être plus précis. Lors de l'utilisation de chaînes littérales, je peux injecter des expressions comme obj.value INSIDE dans n'importe quelle chaîne en utilisant la notation $ {}. Droite?

— carloswm85 le

Oui, et vous pouvez l'essayer vous-même dans la console, par exemplehey ${obj.name}

— Joel H le

0

Vous pouvez également effectuer des conversions de type implicites avec des littéraux de modèle. Exemple:

let fruits = ["mango","orange","pineapple","papaya"];

console.log(`My favourite fruits are ${fruits}`);
// My favourite fruits are mango,orange,pineapple,papaya

— Shalom David
source