Literales de cadena / plantilla ES6 en Node.js

Introducción

En este artículo, vamos a hablar sobre los literales de plantilla de JavaScript. También se les llamaba 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 los literales de plantilla normales.

¿Qué es una plantilla literal?

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 plantillas de cadenas

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

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

Generalmente, usamos la declaración de comillas simples de forma predeterminada y la declaración de comillas dobles si la cadena contiene comillas simples. Lo mismo se aplicó al revés: fue para evitar el uso de caracteres de escape como en a y b.

Además, si quisiéramos concatenar dos cadenas, el operador más era la forma más común de hacerlo:

Te puede interesar:Uso de enlaces asíncronos para el manejo del contexto de solicitudes en Node.js

let firstName="Janith";
let lastName="Kasun";

let fullName = firstName + ' ' + lastName;

// fullName -> Janith Kasun

Si quisiéramos incluir espacios en blanco (incluyendo la pestaña y la nueva línea), usamos el carácter de nueva línea (n) y el carácter de espacio de tabulación (t) Para hacer eso.

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

let info = 'Name:tJohn Doen'
info = info + 'Age:t20n';
info = info + 'City:tLondon';

console.log(info);

Ejecutar este código resultaría en:

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 pueden complicar un poco las cosas en determinadas situaciones. Veamos cómo podemos evitar estos problemas utilizando literales de plantilla.

Declarar una plantilla literal

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

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

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

Te puede interesar:Manejo de CORS con Node.js

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

Cadena y pestañas multilínea

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:

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

Este código da como resultado:

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 texto y cadenas dinámicas se hizo realmente fácil con la inclusión de expresiones.

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

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

Esto resultaría en:

The sum of 5 and 10 is 15

Ahora, eso está bien en el extremo resultante. Pero tener que romper la cadena en varios lugares y agregar los 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 de tipos de datos implícitos y toda la declaración se vuelve incorrecta.

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

Te puede interesar:Trabajar con imágenes en Node.js – GraphicsMagick e ImageMagick

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

Esto también resulta en:

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:

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. Completemos un objeto con la misma información y luego leamos sus valores:

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:

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 para aprobar el examen es 50. Queremos crear una plantilla etiquetada que muestre si el candidato ha aprobado el examen o no.

Te puede interesar:Escribir en archivos usando el comando cat en Linux

Por ejemplo, la aplicación mostraría «John aprobó el examen» o «Ann no aprobó el examen», según su calificación.

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

function exampleTag(personExp, strings, marksExp) {
    let resultStr;

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

Aquí, según los parámetros pasados ​​al exampleTag() función, determinamos si el resultado se establece para ser passed o failed. En última instancia, devolvemos una plantilla literal. 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:

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 resultará en:

John had failed
Ann had passed

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

Strings crudas

Finalmente, hablemos del raw propiedad al crear una plantilla etiquetada literal.

Te puede interesar:node: Mostrar archivos en un directorio

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 ella.

Considere el siguiente ejemplo:

function rawTag(strings) {
    console.log(strings.raw[0]);
}

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

Esto resultaría en:

this is a t sample text with  escape characters nt

Como puede ver, podemos usar caracteres de escape como texto sin formato usando el raw propiedad con plantillas etiquetadas.

También puede utilizar el String.raw() función para hacer eso que es un literal de plantilla etiquetado 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:

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

Esto también resulta en:

Te puede interesar:El mito de la multitarea como desarrollador

this is a t sample text with  escape characters nt

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 literales de plantilla, expresiones dentro de literales de plantilla y finalmente etiquetamos literales de plantilla.