Literales de plantilla de JavaScript

Tabla de contenido

Sinónimos:

Literales de plantilla
Cadenas de plantilla
Plantillas de cadenas
Sintaxis de Back-Tics

Sintaxis de Back-Tics

Los literales de plantilla utilizan comillas invertidas (``) en lugar de comillas ("") para definir una cadena:

Ejemplo

let text = `Hello World!`;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Template Literals</h2>

<p>Template literals use back-ticks (``) to define a string:</p>

<p id="demo"></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>
let text = `Hello world!`;
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Cotizaciones dentro de cadenas

Con los literales de plantilla, puedes usar comillas simples y dobles dentro de una cadena:

Ejemplo

let text = `He's often called "Johnny"`;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Template Literals</h2>

<p>With back-ticks, you can use both single and double quotes inside a string:</p>

<p id="demo"></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>
let text = `He's often called "Johnny"`;
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Cadenas multilínea

Los literales de plantilla permiten cadenas multilínea:

Ejemplo

let text =
`The quick
brown fox
jumps over
the lazy dog`;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Template Literals</h2>

<p>Template literals allows multiline strings:</p>

<p id="demo"></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>
let text =

`The quick
brown fox
jumps over
the lazy dog`;

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Interpolación

Los literales de plantilla proporcionan una forma sencilla de interpolar variables y expresiones en cadenas.

El método se llama interpolación de cadenas.

La sintaxis es:

${...}

Sustituciones de variables

Los literales de plantilla permiten variables en cadenas:

Ejemplo

let firstName = "John";
let lastName = "Doe";

let text = `Welcome ${firstName}, ${lastName}!`;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Template Literals</h2>

<p>Template literals allows variables in strings:</p>

<p id="demo"></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>
let firstName = "John";
let lastName = "Doe";

let text = `Welcome ${firstName}, ${lastName}!`;

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

La sustitución automática de variables por valores reales se denomina interpolación de cadenas.

Sustitución de expresión

Los literales de plantilla permiten expresiones en cadenas:

Ejemplo

let price = 10;
let VAT = 0.25;

let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Template Literals</h2>

<p>Template literals allows variables in strings:</p>

<p id="demo"></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>
let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

document.getElementById("demo").innerHTML = total;
</script>

</body>
</html>

La sustitución automática de expresiones por valores reales se denomina interpolación de cadenas.

Plantillas HTML

Ejemplo

let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];

let html = `<h2>${header}</h2><ul>`;

for (const x of tags) {
  html += `<li>${x}</li>`;
}

html += `</ul>`;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Template Literals</h2>

<p>Template literals allows variables in strings:</p>

<p id="demo"></p>

<p>Template literals are not supported in Internet Explorer.</p>

<script>
let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];

let html = `<h2>${header}</h2><ul>`;

for (const x of tags) {
  html += `<li>${x}</li>`;
}

html += `</ul>`;
document.getElementById("demo").innerHTML = html;
</script>

</body>
</html>

Soporte del navegador

Template Literals es una característica de ES6 (JavaScript 2015).

Es compatible con todos los navegadores modernos:


Chrome	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

literales de plantilla no se admiten en Internet Explorer.

Referencia de cadena completa

Para obtener una referencia completa de cadenas, vaya a nuestro:

Referencia completa de cadenas de JavaScript.

La referencia contiene descripciones y ejemplos de todas las propiedades y métodos de cadena.