18-Literales de plantilla en javascript

Los literales de plantilla son literales delimitados con un acento grave ( `) caracteres, lo que permite cadenas de varias líneas , interpolación de cadenas con expresiones incrustadas y construcciones especiales denominadas plantillas etiquetadas .

Los literales de plantilla a veces se denominan informalmente cadenas de plantilla , porque se usan más comúnmente para la interpolación de cadenas (para crear cadenas mediante la sustitución de marcadores de posición).

Sin embargo, un literal de plantilla etiquetado puede no dar como resultado una cadena; se puede usar con una función de etiqueta personalizada para realizar las operaciones que desee en las diferentes partes del literal de la plantilla.

Sintaxis

`string text`
`string text line 1
 string text line 2`
`string text ${expression} string text`
tagFunction`string text ${expression} string text`       
    

Otro ejemplo de sintaxis

let text = `Hello World!`;    
    

...

Cotizaciones dentro de cadenas

Los literales de plantilla , puede usar comillas simples y dobles dentro de una cadena:

ejemplo

 let text =`A menudo se le llama "Johnny"`;  
    

Para escapar de un acento grave en un literal de plantilla, coloque una barra invertida ( \) antes del acento grave.

ejemplo

`\`` === "`"; // true 
    

Los signos de dólar también se pueden escapar para evitar la interpolación.

ejemplo

`\${1}` === "${1}"; // true 
    

Cadenas de varias líneas

Cualquier carácter de nueva línea insertado en la fuente es parte del literal de la plantilla.

Usando cadenas normales, tendría que usar la siguiente sintaxis para obtener cadenas de varias líneas:

ejemplo

console.log("string text line 1\n" + "string text line 2");
// "string text line 1
// string text line 2"
    

Usando literales de plantilla, puede hacer lo mismo con esto:

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"
    

otro ejemplo

            let text =
            `El rapido
            zorro marrón
            salta por encima
            el perro perezoso`;
    

---

Interpolación

Sin literales de plantilla, cuando desee combinar la salida de expresiones con cadenas, las concatenaría mediante el operador de suma +:

ejemplo

 const a = 5;
 const b = 10;
 console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
 // "Fifteen is 15 and
 // not 20."             
    

Si tiene multiples expresiones, se puede tornar dificil de ler

Con los literales de plantilla, puede evitar el operador de concatenación y mejorar la legibilidad de su código mediante el uso de marcadores de posición del formulario ${expression}para realizar sustituciones de expresiones incrustadas:

ejemplo

 const a = 5;
 const b = 10;
 console.log(`Fifteen is ${a + b} and
 not ${2 * a + b}.`);
 // "Fifteen is 15 and
 // not 20."              
    

Plantillas de anidamiento

Por veces anidar plantillas es la forma mas facil de tener cadenas configurables

Dentro de una plantilla delimitada por acentos graves, es simple permitir acentos graves internos usándolos dentro de un ${expression}marcador de posición dentro de la plantilla.

Por ejemplo, sin literales de plantilla, si quisiera devolver un cierto valor basado en una condición particular, podría hacer algo como lo siguiente:

let classes = "header";
classes += isLargeScreen()
  ? ""
  : item.isCollapsed
  ? " icon-expander"
  : " icon-collapser";             
    

Con una plantilla literal pero sin anidar, podría hacer esto:

const classes = `header ${
    isLargeScreen() ? "" : item.isCollapsed ? "icon-expander" : "icon-collapser"
  }`;                 
    

Con el anidamiento de literales de plantilla, puede hacer esto:

const classes = `header ${
    isLargeScreen() ? "" : `icon-${item.isCollapsed ? "expander" : "collapser"}`
  }`;
    

Sustituciones de variables

Los literales de plantilla permiten variables en cadenas:

ejemplo

let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
Salida: Welcome John, Doe!
    

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

Sustitución de expresiones

Los literales de plantilla permiten expresiones en cadenas:

ejemplo

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

Nota El reemplazo automático de expresiones con valores reales se denomina interpolación de cadenas.

Plantillas etiquetadas y secuencias de escape

En los literales de plantilla normales, las secuencias de escape en los literales de cadena se permiten todas

Cualquier otra secuencia de escape mal formada es un error de sintaxis

Esto incluye:

• \seguido de cualquier dígito decimal que no sea 0, o \0seguido de un dígito decimal; Por ejemplo \9y \07(que es una sintaxis obsoleta )
• \xseguido de menos de dos dígitos hexadecimales (incluido ninguno); Por ejemplo \xz
• \uno seguido por {y seguido de menos de cuatro dígitos hexadecimales (incluido ninguno); Por ejemplo \uz
• \u{}que incluye un punto de código Unicode no válido: contiene un dígito no hexadecimal o su valor es mayor que 10FFFF; Por ejemplo \u{110000}y \u{z}

Nota: \seguidos de otros caracteres, aunque pueden ser inútiles ya que no se escapa nada, no son errores de sintaxis.

Sin embargo, esto es problemático para las plantillas etiquetadas que, además del literal "cocinado", también tienen acceso a los literales sin procesar (las secuencias de escape se conservan tal cual).

ejemplo

latex`\unicode`;
// Incluye versiones anteriores de ECMAScript (ES2016 y anteriores)
// SyntaxError: secuencia de escape de caracteres Unicode mal formada
    

Ir al indice