Plantillas literales de JavaScript en profundidad

Estrada Web Group
Estrada Web Group
Plantillas literales de JavaScript en profundidad

Resumen: en este tutorial, aprenderás sobre las plantillas literales en JavaScript, que te permite trabajar con una plantilla de cadena más fácilmente.

Introducción a las plantillas literales

Antes de ES6, se usaba comillas simples (') o comillas dobles (") para envolver una cadena de texto o string. Y las cadenas tienen una funcionalidad muy limitada.

Para permitir resolver problemas más complejos, las plantillas de ES6 proporcionan la sintaxis que permite trabajar con cadenas de manera más segura y limpia.

En ES6, se crea una plantilla literal envolviendo el texto en acentos graves (`) de la siguiente manera:

let simple = `This is a template literal`;

Con las plantillas literales obtienes las siguientes características:

  • Una cadena multilínea: una cadena que puede abarcar varias líneas.
  • Formato de cadena: la capacidad de sustituir parte de la cadena por los valores de variables o expresiones. Esta función también se denomina interpolación de cadenas.
  • Escape de HTML: la capacidad de transformar una cadena para que sea seguro incluirla en HTML.

Sintaxis básica de las plantillas literales de JavaScript

Como se mencionó anteriormente, en lugar de usar comillas simples o dobles, una plantilla literal usa acentos graves, como se muestra en el siguiente ejemplo:

let str = `Template literal in ES6`;

console.log(str);// Template literal in ES6
console.log(str.length); // 23
console.log(typeof str);// string

Usando las comillas invertidas o acento grave, puedes usar libremente las comillas simples o dobles en la plantilla literal.

let anotherStr = `Here's a template literal`;

Si una cadena contiene un acento grave, debes usar una barra invertida (\):

let strWithBacktick = `Template literals use backticks \` insead of quotes`;

Cadenas multilínea

Antes de ES6, se utilizaba la siguiente técnica para crear una cadena de varias líneas al incluir manualmente el carácter de nueva línea (\n) en la cadena de la siguiente manera:

let msg = 'Multiline \n\
string';

console.log(msg);
//Multiline
//string

Ten en cuenta que la barra invertida (\) colocada después del carácter de nueva línea (\n) indica la continuación de la cadena en lugar de una nueva línea.

Esta técnica, sin embargo, no es consistente entre los motores de JavaScript. Por lo tanto, era bastante común crear una cadena de varias líneas que dependiera de una matriz y una concatenación de cadenas de la siguiente manera:

let msg = ['This text',
         'can',
         'span multiple lines'].join('\n');

Las plantillas literales te permiten definir cadenas de varias líneas más fácilmente porque necesitas agregar una nueva línea en la cadena donde lo desees:

let p =
`This text
can
span multiple lines`;

Ten en cuenta que el espacio en blanco es una parte de la cadena. Por lo tanto, debes asegurarte de que el texto se alinee con la sangría adecuada. Supongamos que tienes un objeto de publicación:

let post = {
    title: 'JavaScript Template Literals',
    excerpt: 'Introduction to JavaScript template literals in ES6',
    body: 'Content of the post will be here...',
    tags: ['es6', 'template literals', 'javascript']
};

El siguiente código devuelve el código HTML del objeto de publicación. Ten en cuenta que utilizamos la técnica de desestructuración de objetos para asignar las propiedades del objeto de publicación a variables individuales: title, excerpt, body y tags.

let {title, excerpt, body, tags} = post;

let postHtml = `<article>
<header>
    <h1>${title}</h1>
</header>
<section>
    <div>${excerpt}</div>
    <div>${body}</div>
</section>
<footer>
    <ul>
      ${tags.map(tag => `<li>${tag}</li>`).join('\n      ')}
    </ul>
</footer>`;

El siguiente es el resultado de la variable postHtml. Observa cómo usamos el espacio para la sangría correctamente de las etiquetas <li>.

<article>
<header>
    <h1>JavaScript Template Literals</h1>
</header>
<section>
    <div>Introduction to JavaScript template literals in ES6</div>
    <div>Content of the post will be here...</div>
</section>
<footer>
    <ul>
      <li>es6</li>
      <li>template literals</li>
      <li>javascript</li>
    </ul>
</footer>

Sustituciones de variables y expresiones

En este punto, una plantilla literal es como una versión mejorada de una cadena JavaScript normal. La gran diferencia entre una plantilla literal y una cadena normal son las sustituciones.

Las sustituciones te permiten incrustar variables y expresiones en una cadena. El motor de JavaScript reemplazará automáticamente estas variables y expresiones con sus valores. Esta función se conoce como interpolación de cadenas.

Para indicarle a JavaScript que sustituya una variable y una expresión, coloque la variable y la expresión en un bloque especial de la siguiente manera:

${variable_name}

Veamos el siguiente ejemplo:

let firstName = 'John',
    lastName = 'Doe';

let greeting = `Hi ${firstName}, ${lastName}`;
console.log(greeting); // Hi John, Doe

La sustitución ${firstName} y ${lastName} acceden a las variables firstName y lastName para insertar sus valores en la cadena greeting.

La variable greeting luego contiene el resultado de las sustituciones. El siguiente ejemplo sustituye una expresión en su lugar:

let price = 8.99,
    tax = 0.1;

let netPrice = `Net Price:$${(price * (1 + tax)).toFixed(2)}`;

console.log(netPrice); // netPrice:$9.89

Etiquetas de Plantillas

Una etiqueta de plantilla lleva la transformación en la plantilla literal y devuelve la cadena de resultado.

Coloca la etiqueta al comienzo de la plantilla antes del carácter de acento grave (`) de la siguiente manera:

let greeting = tag`Hi`;

En este ejemplo, tag es la etiqueta de plantilla que se aplica al literal de plantilla Hi. La etiqueta puede ser cualquier función con la siguiente firma:

function tag(literals, ...substitutions) {
    // return a string
}

En esta función:

  • El parámetro de literals es una matriz que contiene las cadenas literales.
  • El parámetro substitutions contiene los argumentos posteriores interpretados para la cada sustitución.

Veamos el siguiente ejemplo:

function format(literals, ...substitutions) {
    let result = '';

    for (let i = 0; i < substitutions.length; i++) {
        result += literals[i];
        result += substitutions[i];
    }
    // add the last literal
    result += literals[literals.length - 1];
    return result;
}

let quantity = 9,
    priceEach = 8.99,
    result = format`${quantity} items cost $${(quantity * priceEach).toFixed(2)}.`;

console.log(result); // 9 items cost $80.91.

En este ejemplo, la función format() acepta tres argumentos: la matriz de literales y otros dos argumentos almacenados en la matriz de sustituciones.

El primer argumento es la matriz de literales que contiene tres elementos:

  • Una cadena vacía antes de la primera sustitución (”). Ten en cuenta que el primer argumento de la matriz de literales es una cadena vacía.
  • Una cadena de 'items cost' que se ubica entre la primera y la segunda sustitución.
  • Una cadena que sigue a la segunda sustitución ('.')

El segundo argumento es 9, que es el valor interpretado de la variable cantidad. Se convierte en el primer elemento de la matriz de sustituciones. El tercer argumento es 80.91, que es el valor interpretado de la expresión (quantity * priceEach).toFixed(2). Se convierte en el segundo elemento de la matriz de sustituciones.

Resumen

Usa el acento grave para crear un literal de cadena para la interpolación de cadenas.

 

Compartir artículo:

Más artículos geniales

Cómo usar la declaración if de JavaScript

Cómo usar la declaración if de JavaScript

Resumen: en este tutorial, aprenderás a usar la declaración if de JavaScript para ejecutar un bloque cuando una condición es verdadera.

Ver artículo completo
Instrucción while de JavaScript para crear bucles

Instrucción while de JavaScript para crear bucles

Resumen: en este tutorial, aprenderás a usar la instrucción while de JavaScript para crear un bucle que ejecute un bloque siempre que una condición sea verdadera.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla