Plantilla ES6/Literales de cadena en Node.js

En este tutorial, nos sumergiremos en los literales de plantilla en ES6 JavaScript/Node.js. También cubriremos los literales de plantilla etiquetados y las expresiones literales de plantilla.

Introducción

En este artículo, vamos a hablar sobre Literales de plantilla de JavaScript. También se llamaban Template Strings antes de la especificación ES2015.

Aparte de eso, también vamos a cubrir qué son los Literales de plantilla etiquetados y cómo podemos usarlos con Literales de plantilla normales.

¿Qué es un literal de plantilla?

Los literales de plantilla se introdujeron con JavaScript ES2015 (ES6) para manejar cadenas de una manera más fácil y legible.

Nos permite incrustar expresiones (interpolación de expresiones) dentro de una declaración de cadena, manejar cadenas de varias líneas y crear "literales de plantilla etiquetados", que es una forma más avanzada de literales de plantilla.

La forma antigua de manejar las plantillas de cadenas

Antes de ES6, se usaban comillas simples o dobles para declarar una cadena. Considere el siguiente ejemplo:

1
2
3
4
5
6
7
8
9
let x = 'This is a sample string';
let y = "This is a sample string with a 'quote' in it";
let z = 'This is a sample string with a "double quote" in it';

let a = 'This is another sample with a \'quote\' in it';
let b = "This is yet another sample with a \"double quote\" in it";

// a -> This is another sample with a 'quote' in it
// b -> This is yet another sample with a "double quote" in it

En general, usamos la declaración de comillas simples por defecto y la declaración de comillas dobles si la cadena contiene comillas simples dentro de ella. Lo mismo se aplicaba al revés: era para evitar el uso de caracteres de escape como en a y b.

Además, si queríamos concatenar dos cadenas, el operador más era la forma más común de hacerlo:

1
2
3
4
5
6
let firstName = 'Janith';
let lastName = 'Kasun';

let fullName = firstName + ' ' + lastName;

// fullName -> Janith Kasun

Si queríamos incluir espacios en blanco (incluido el tabulador y la nueva línea), usamos el carácter de nueva línea (\n) y el carácter de tabulador (\t) para hacerlo.

La sintaxis anterior no permitía dividir el texto en la siguiente línea sin usar caracteres especiales como la nueva línea:

1
2
3
4
5
let info = 'Name:\tJohn Doe\n'
info = info + 'Age:\t20\n';
info = info + 'City:\tLondon';

console.log(info);

Ejecutar este código daría como resultado:

1
2
3
Name:   John Doe
Age:    20
City:   London

Sin embargo, como puede ver en este ejemplo, el uso de caracteres especiales reduce la legibilidad del código.

Literales de plantilla ES6

El uso intercambiable de comillas simples (') y comillas dobles ("), así como el uso de caracteres especiales y de escape puede complicar un poco las cosas en ciertas situaciones. Veamos cómo podemos evitar esto problemas mediante el uso de literales de plantilla.

Declaración de un literal de plantilla

Los literales de plantilla de JavaScript usan el carácter de acento grave (`) para declarar una cadena en lugar de comillas simples o dobles. Por ejemplo:

1
let x = `This is a new template literal`;

Puede usar las comillas y las comillas dobles dentro de la declaración de cadena con literales de plantilla:

1
2
let y = `This is a string with a 'single quote'`;
let z = `This is a string with a "double quote"`;

Cadena multilínea y pestañas

Con los literales de plantilla, podemos simplemente agregar una nueva línea dentro de la declaración misma. En lugar de usar el carácter de nueva línea, simplemente podemos dividir el código en la siguiente línea:

1
2
console.log(`This is the first line
This is the second line`);

Este código da como resultado:

1
2
This is the first line
This is the second line

Expresiones con literales de plantilla (interpolación de expresiones)

Si la única característica de Template Literals fuera evitar el uso indebido de comillas simples y dobles y líneas de ruptura, no cambiarían las reglas del juego. Sin embargo, la creación de cadenas y texto dinámicos se hizo realmente fácil con la inclusión de expresiones.

Puede agregar una expresión dentro de un literal de plantilla y la cadena resultante contendrá el valor evaluado de la expresión. Por ejemplo, sin literales de plantilla, podríamos estar viendo algo como:

1
2
3
let a = 5;
let b = 10;
console.log('The sum of ' + a + ' and' + b + ' is ' + (a + b));

Esto daría como resultado:

1
The sum of 5 and 10 is 15

Ahora, eso está bien en el extremo resultante. Pero tener que dividir la cadena en varios lugares y agregar valores como este es ilegible cuando tiene más que una simple suma. Sin mencionar que un solo error tipográfico puede causar problemas con las conversiones implícitas de tipos de datos y toda la declaración se vuelve incorrecta.

Con los literales de plantilla, podemos simplemente agregar expresiones, siguiendo la sintaxis ${...}, directamente en las declaraciones de cadena. Cuando ejecutamos el código, las expresiones se evalúan y sus valores se ingresan:

1
2
3
let a = 5;
let b = 10;
console.log(`The sum of ${a} and ${b} is ${a+b}`);

Esto también resulta en:

1
The sum of 5 and 10 is 15

Esta es una solución mucho más limpia para una tarea bastante rudimentaria. Reescribamos el ejemplo de espacios en blanco de antes, usando literales de plantilla:

1
2
3
4
5
let info = `Name:   John Doe
Age:    20
City:   London`;

console.log(info);

Sin embargo, la información estática como esta rara vez se usa. Rellenemos un objeto con la misma información y luego leamos sus valores:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 20,
    city: 'London'
}

let info = `Name:   ${person.firstName} ${person.lastName}
Age:    ${person.age}
City:   ${person.city}`;

console.log(info);

Esto también resulta en:

1
2
3
Name:   John Doe
Age:    20
City:   London

Literales de plantilla etiquetados

Los literales de plantilla etiquetados proporcionan un uso más avanzado de los literales de plantilla mediante una función personalizable.

Considere el siguiente escenario.

Hay una hoja de resultados de un examen reciente. La nota de aprobación para el examen es 50. Queremos crear una plantilla etiquetada que muestre si el candidato aprobó el examen o no.

Por ejemplo, la aplicación mostraría "Juan ha aprobado el examen" o "Ann ha reprobado el examen", según su calificación.

Definamos una función de plantilla etiquetada que determine si el estudiante ha aprobado o reprobado:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
function exampleTag(personExp, strings, marksExp) {
    let resultStr;

    if (marksExp >= 50) {
        resultStr = 'passed';
    } else {
        resultStr = 'failed'
    }
    return `${personExp}${strings[0]}${resultStr}`;
}

Aquí, en función de los parámetros pasados ​​a la función exampleTag(), determinamos si el resultado está configurado como aprobado o fallido. En última instancia, devolvemos un literal de plantilla. Este literal de plantilla contiene expresiones que representan el nombre de la persona, una cadena y las marcas.

Hagamos un par de personas y pasémoslas a la función:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
let p1 = {
    person: 'John',
    marks: 45
}

let p2 = {
    person: 'Ann',
    marks: 67
}

let ex1 = exampleTag`${p1.person} had ${p.marks}`;
let ex2 = exampleTag`${p2.person} had ${p.marks}`;

console.log(ex1);
console.log(ex2);

Ejecutar este código dará como resultado:

1
2
John had failed
Ann had passed

Aunque solo tenemos una cadena aquí, tenía, fácilmente podríamos haber tenido muchas. Por lo tanto, el parámetro strings es una matriz. Puede hacer referencia a cada cadena pasada, de acuerdo con su apariencia en el literal de plantilla pasado a la función exampleTag().

Cuerdas sin procesar {#Cuerdas sin procesar}

Finalmente, hablemos de la propiedad sin procesar al crear un literal de plantilla etiquetada.

Esta propiedad está disponible en el primer parámetro de la plantilla etiquetada. Le permite obtener el valor de la cadena sin procesar sin procesar los caracteres de escape de la misma.

Considere el siguiente ejemplo:

1
2
3
4
5
function rawTag(strings) {
    console.log(strings.raw[0]);
}

rawTag`this is a \t sample text with \ escape characters \n\t`;

Esto daría como resultado:

1
this is a \t sample text with \ escape characters \n\t

Como puede ver, podemos usar caracteres de escape como texto sin procesar usando la propiedad sin procesar con plantillas etiquetadas.

También puede usar la función String.raw() para hacer eso, que es un literal de plantilla con etiquetas de JavaScript incorporado que le permite declarar cadenas sin procesar sin procesar los caracteres de escape.

Simplemente puede usar esto si no necesita ninguna lógica adicional:

1
let rawString = String.raw`this is a \t sample text with \ escape characters \n\t`

Esto también resulta en:

1
this is a \t sample text with \ escape characters \n\t

Conclusión

En este artículo, hemos cubierto la forma antigua de manejar cadenas dinámicas, espacios en blanco y caracteres de escape. Luego, saltamos a los literales de plantilla, las expresiones dentro de los literales de plantilla y, finalmente, los literales de plantilla etiquetados.