¿Qué significa $ {} (signo de dólar y llaves) en una cadena en Javascript?

160

No he visto nada aquí ni en MDN. Estoy seguro de que solo me falta algo. ¿Tiene que haber alguna documentación sobre esto en alguna parte?

Funcionalmente, parece que le permite anidar una variable dentro de una cadena sin hacer concatenación utilizando el +operador. Estoy buscando documentación sobre esta característica.

Ejemplo:

var string = 'this is a string';

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

Expandir fragmento

— Darren Joy
fuente

¿Puedes dar algún contexto a lo que estás preguntando? Esta pregunta no está clara como está escrita.

— Sam Hanley

3

55

Esta no es una mala pregunta. Es una nueva característica, y seguro que no puedo encontrar un duplicado en SO, aunque un ejemplo de lo que se vio exactamente hubiera sido bueno.

@ bizquear: de acuerdo, pero el código de muestra y la referencia a la fuente hubieran sido útiles.

— RobG

Ejemplo agregado. La referencia estaba en un desafío de codificación, pero era un hecho, como si fuera algo que acaba de usar. No había visto nada en él y tampoco podía encontrar nada. (En los últimos años nunca he tenido que preguntar una Q aquí. SO parece tener casi todo ahora ...)

— Darren Joy

192

Estás hablando de plantillas literales .

Permiten cadenas multilínea e interpolación de cadenas.

Cuerdas multilínea:

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

Expandir fragmento

Interpolación de cadenas:

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

Expandir fragmento

— Rick Runyon
fuente

67

Una cosa que me confundió durante mucho tiempo es que los literales de plantilla usan la tecla de retroceso, que está a la izquierda de "1" en el teclado, en lugar de comillas simples (').

— Sydney

19

Genial: Incluso puedes "inyectar" código:console.log(`Your array:\n ${arr.join('\n ')}`)

— T4NK3R

55

Es extraño que Template Literalno sea compatible con IE o tal vez sea natural que IE no admita cosas interesantes. Leer más

— Mohammad Musavi

12

Como se mencionó en un comentario anterior, puede tener expresiones dentro de las cadenas de plantilla / literales. Ejemplo:

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

Expandir fragmento

— Joel H
fuente

¿Es correcto decir que las cadenas de plantilla se pueden usar para inyectar código en la cadena?

— carloswm85

Estás inyectando expresiones y las expresiones son código. Sin embargo, no puede inyectar ningún tipo de código, solo expresiones de JavaScript.

— Joel H

Intentaré ser más específico. Cuando uso literales de cadena, puedo inyectar expresiones como obj.value DENTRO de cualquier cadena usando la notación $ {}. ¿Correcto?

— carloswm85

Sí, y puedes probarlo tú mismo en la consola, por ejemplohey ${obj.name}

— Joel H

0

También puede realizar conversiones de tipo implícito con literales de plantilla. Ejemplo:

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

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

— Shalom David
fuente