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:

    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:

    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:

    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.

    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 鈥嬧媋l 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.

    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:

    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.

     

    Etiquetas:

    Deja una respuesta

    Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *