Plantillas de String de JavaScript

Sinónimos:

  • Cadenas Literales de Plantilla
  • Cadenas de Plantilla
  • Plantillas de String
  • Sintaxis de Back-Tics

Sintaxis de Back-Tics

Literales de plantillaUsa comillas invertidas (``) en lugar de comillas ("" ) para definir una cadena:

Ejemplo

let text = `Hello World!`;

Prueba personalmente

comillas dentro de una cadena

Al usarLiterales de plantilla，puede usar comillas simples y dobles en una cadena al mismo tiempo:

Ejemplo

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

Prueba personalmente

Cadenas multilínea

Literales de plantillaPermite cadenas multilínea:

Ejemplo

let text =
The quick
brown fox
salta sobre
the lazy dog`;

Prueba personalmente

Interpolación

Literales de plantillaProporciona un método simple para insertar variables y expresiones en una cadena.

Este método se llama interpolación de cadenas (string interpolation).

Sintaxis

${...}

Sustitución de variables

Literales de plantillaPermite variables dentro de una cadena:

Ejemplo

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

Prueba personalmente

La sustitución automática de variables con valores reales se llamaInterpolación de cadenas.

Sustitución de expresiones

Literales de plantillaPermite expresiones dentro de una cadena:

Ejemplo

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

Prueba personalmente

La sustitución automática de expresiones con valores reales se llama interpolación de cadenas.

Plantilla 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>`;

Prueba personalmente

Compatibilidad del navegador

Internet Explorer no admiteLiterales de plantilla.

La primera versión del navegador que admite completamente las literales de plantilla es:

Chrome IE Firefox Safari Opera
Chrome 41 Edge 13 Firefox 34 Safari 10 Opera 29
Marzo de 2015 Noviembre de 2015 Diciembre de 2014 Septiembre de 2016 Abril de 2015

Referencia completa de cadenas

Para obtener una referencia completa, por favor visite nuestra referencia completa Manual de referencia de String de JavaScript.

Este manual contiene descripciones e instancias de todas las propiedades y métodos de las cadenas.