En este tutorial, aprenderá sobre los literales de plantillas de JavaScript (cadenas de plantillas) con la ayuda de ejemplos.
Los literales de plantilla (cadenas de plantilla) le permiten utilizar cadenas o expresiones incrustadas en forma de cadena. Están encerrados entre comillas invertidas ``. Por ejemplo,
const name = 'Jack'; console.log(`Hello $(name)!`); // Hello Jack!
Nota : La plantilla literal se introdujo en 2015 (también conocida como ECMAScript 6 o ES6 o ECMAScript 2015). Es posible que algunos navegadores no admitan el uso de literales de plantilla. Visite el soporte de JavaScript Template Literal para obtener más información.
Literales de plantilla para cadenas
En las versiones anteriores de JavaScript, usaría una comilla simple ''o una comilla doble ""para las cadenas. Por ejemplo,
const str1 = 'This is a string'; // cannot use the same quotes const str2 = 'A "quote" inside a string'; // valid code const str3 = 'A 'quote' inside a string'; // Error const str4 = "Another 'quote' inside a string"; // valid code const str5 = "Another "quote" inside a string"; // Error
Para usar las mismas citas dentro de la cadena, puede usar el carácter de escape .
// escape characters using const str3 = 'A \'quote\' inside a string'; // valid code const str5 = "Another "quote " inside a string"; // valid code
En lugar de utilizar caracteres de escape, puede utilizar literales de plantilla. Por ejemplo,
const str1 = `This is a string`; const str2 = `This is a string with a 'quote' in it`; const str3 = `This is a string with a "double quote" in it`;
Como puede ver, los literales de la plantilla no solo facilitan la inclusión de citas, sino que también hacen que nuestro código se vea más limpio.
Cadenas de varias líneas con literales de plantilla
Los literales de plantilla también facilitan la escritura de cadenas de varias líneas. Por ejemplo,
Usando literales de plantilla, puede reemplazar
// using the + operator const message1 = 'This is a long message' + 'that spans across multiple lines' + 'in the code.' console.log(message1)
con
const message1 = `This is a long message that spans across multiple lines in the code.` console.log(message1)
La salida de ambos programas será la misma.
Este es un mensaje largo que se extiende por varias líneas en el código.
Interpolación de expresiones
Antes de JavaScript ES6, usaría el +operador para concatenar variables y expresiones en una cadena. Por ejemplo,
const name = 'Jack'; console.log('Hello ' + name); // Hello Jack
Con los literales de plantilla, es un poco más fácil incluir variables y expresiones dentro de una cadena. Para eso usamos la $(… )sintaxis.
const name = 'Jack'; console.log(`Hello $(name)`); // template literals used with expressions const result = `The sum of 4 + 5 is $(4 + 5)`; console.log(result); console.log(`$(result < 10 ? 'Too low': 'Very high')`)
Salida
Hola Jack La suma de 4 + 5 es 9 Muy alta
El proceso de asignación de variables y expresiones dentro de la plantilla literal se conoce como interpolación.
Plantillas etiquetadas
Normalmente, usaría una función para pasar argumentos. Por ejemplo,
function tagExample(strings) ( return strings; ) // passing argument const result = tagExample('Hello Jack'); console.log(result);
Sin embargo, puede crear plantillas etiquetadas (que se comportan como una función) utilizando literales de plantilla. Utiliza etiquetas que le permiten analizar literales de plantilla con una función.
La plantilla etiquetada se escribe como una definición de función. Sin embargo, no pasa paréntesis ()al llamar al literal. Por ejemplo,
function tagExample(strings) ( return strings; ) // creating tagged template const result = tagExample`Hello Jack`; console.log(result);
Salida
("Hola Jack")
Se pasa una matriz de valores de cadena como primer argumento de una función de etiqueta. También puede pasar los valores y expresiones como los argumentos restantes. Por ejemplo,
const name = 'Jack'; const greet = true; function tagExample(strings, nameValue) ( let str0 = strings(0); // Hello let str1 = strings(1); // , How are you? if(greet) ( return `$(str0)$(nameValue)$(str1)`; ) ) // creating tagged literal // passing argument name const result = tagExample`Hello $(name), How are you?`; console.log(result);
Salida
Hola Jack, ¿cómo estás?
De esta manera, también puede pasar múltiples argumentos en el temaplate etiquetado.
