Literales de plantilla | Programar Plus

0

Template Literal, introducido en ES6, es una nueva forma de crear una cadena. Con él vienen nuevas características que nos permiten un mayor control sobre las cadenas dinámicas en nuestros programas. ¡Atrás quedarán los días de la concatenación de cadenas largas!

Para crear una plantilla literal, en lugar de comillas simples (') o comillas dobles (") comillas usamos la comilla invertida (`) personaje. Esto producirá una nueva cadena y podemos usarla de la forma que queramos.

Uso básico:

let newString = `A string`;

Multilínea

¡Lo mejor de Template Literals es que ahora podemos crear cadenas de varias líneas! En el pasado, si queríamos que una cadena estuviera en varias líneas, teníamos que usar el n o carácter de nueva línea.

// The old way
var myMultiString = 'Some text that I wantnOn two lines!';

Con una cadena de Template Literal, podemos seguir adelante y agregar la nueva línea en la cadena mientras la escribimos.

var myMultiString= `This will be
on two lines!`;

Esto producirá una cadena con una nueva línea. La capacidad de hacer esto con expresiones convierte a Template Literals en un lenguaje de plantillas realmente agradable para la construcción de fragmentos de HTML que cubriremos más adelante. Pero, ¿qué pasa con la concatenación? Veamos cómo podemos agregar valores dinámicamente en nuestros nuevos literales de plantilla.

Expresiones

En la nueva sintaxis de Template Literal tenemos lo que se llama expresiones, y se ven así: ${expression}. Considere el código a continuación.

let name = `Ryan`;

console.log(`Hi my name is ${name}`);

El ${} la sintaxis nos permite poner una expresión en ella y producirá el valor, que en nuestro caso anterior es solo una variable que contiene una cadena. Hay algo a tener en cuenta aquí: si desea agregar valores, como el anterior, no necesita usar un Literal de plantilla para el name variable. Podría ser simplemente una cadena normal.

console.log(`Hi my name is ${'Ryan'}`);

Esto producirá el mismo resultado. Estas expresiones hacen más que simplemente introducir variables que contengan cadenas. Podemos evaluar cualquier tipo de expresión que queramos.

let price = 19.99;
let tax = 1.13;

let total = `The total prices is ${price * tax}`;

También podemos usar esto con un objeto más complejo.

let person = {
    firstName: `Ryan`,
    lastName: `Christiani`,
    sayName() {
        return `Hi my name is ${this.firstName} ${this.lastName}`;
    }
};

Aquí tenemos un person objeto con un sayName() método en él. Podemos acceder a las propiedades desde un objeto dentro del ${} sintaxis.

Plantillas HTML

Con la capacidad de tener cadenas de varias líneas y usar expresiones de plantilla para agregar contenido a nuestra cadena, esto hace que sea realmente agradable de usar para plantillas HTML en nuestro código.

Imaginemos que obtenemos algunos datos de una API que se parece a esto:

{
    "id": 1,
    "name": "Bulbasaur",
    "base_experience": 64,
    "height": 7,
    "is_default": true,
    "order": 1,
    "weight": 69,
    ...
}

¡Esta API “imaginaria” es, por supuesto, la pokeapi! Con esta estructura de datos en mente, creemos el marcado que mostraría este Pokémon.

function createMarkup(data) {
    return `
        <article class="pokemon">
            <h3>${data.name}</h3>
            <p>The Pokemon ${data.name} has a base experience of ${data.base_experience}, they also weigh ${data.weight}</p>
        </article>
    `
}

¡Sin tener que usar una biblioteca como Handlebars o Moustache, podemos crear plantillas agradables y fáciles de usar en nuestro JavaScript!

Plantillas etiquetadas

Otra característica de los literales de plantilla es la capacidad de crear literales de plantilla etiquetados. Creas una función y esta función se verá como cualquier otra función, sin embargo, se verá diferente cuando la llames:

function myTaggedLiteral(strings) {
    console.log(strings);
}

myTaggedLiteral`test`; 
// ["test"]

Tenga en cuenta que no hay parens () cuando llamamos a la función! Aplicamos una Plantilla Literal donde estarían los paréntesis. Como parámetro de nuestra función obtenemos una matriz de cadenas en nuestro literal. Expandamos la cadena que enviamos a la función y haremos que incluya una expresión, y también incluiremos un nuevo parámetro en nuestra función.

function myTaggedLiteral(strings, value) {
    console.log(strings,value);
}

let someText="Neat";
myTaggedLiteral`test ${someText}`; 
// ["test", ""]
// "Neat"

Cuando usamos una expresión, podemos acceder a ella desde los siguientes parámetros y esto continúa. Digamos que agregamos otra expresión.

function myTaggedLiteral(strings, value, value2) {
    console.log(strings,value);
}

let someText="Neat";
myTaggedLiteral`test ${someText} ${2 + 3}`; 
// ["test", ""]
// "Neat"
// 5

Esto es bastante poderoso: le permite tomar los datos utilizados en una cadena y manipularlos a su gusto.

Plantillas reutilizables

Veamos un caso de uso simple para los literales de plantilla. Si recuerdas lo anterior, vimos cómo los literales de plantilla funcionan muy bien para, bueno, ¡hacer plantillas! Vayamos un paso más allá y creemos una función que nos permita crear plantillas reutilizables. La idea aquí es que podemos crear la plantilla inicial y luego pasar los datos para usarlos más tarde.

const student = {
    name: "Ryan Christiani",
    blogUrl: "http://ryanchristiani.com"
}

const studentTemplate = templater`<article>
    <h3>${'name'} is a student at HackerYou</h3>
    <p>You can find their work at ${'blogUrl'}.</p>

</article>`;

const myTemplate = studentTemplate(student);
console.log(myTemplate);
// Output will look like this!
// <article>
//    <h3>Ryan Christiani is a student at HackerYou</h3>
//    <p>You can find their work at http://ryanchristiani.com.</p>
// </article>

Echemos un vistazo a la implementación de nuestro templater función.

const templater = function(strings, ...keys) {

}

Lo primero que notará es esto ...keys parámetro. El ... la sintaxis es lo que se llama Parámetros de descanso; Recopilará cualquier parámetro que tenga la función y creará una matriz para nosotros.

Lo siguiente que queremos hacer es devolver una función que accederá a nuestro objeto. La devolución de la función es lo que nos permite llamar y pasar los datos de nuestros estudiantes, así: studentTemplate(student).

const templater = function(strings, ...keys) {
    return function(data) {

    } 
}

Con estos datos ahora disponibles para nosotros, necesitamos realizar alguna manipulación. El proceso es el siguiente. Primero, necesitamos crear una copia del strings formación. Hacemos una copia por si queremos hacer referencia al original más adelante. Entonces necesitamos recorrer la matriz de keys, y para cada uno de ellos, tome los datos del objeto que coincida con la clave (observe cómo en este ejemplo pasamos una cadena en el ${}) y colóquelo en nuestra matriz donde sea necesario. Finalmente, ¡necesitamos unirlo todo nuevamente como una cadena y devolverlo desde la función!

function templater(strings, ...keys) {
    return function(data) {
        let temp = strings.slice();
        keys.forEach((key, i) => {
            temp[i] = temp[i] + data[key];
        });
        return temp.join('');
    }
};

Notará que este no es un ejemplo exhaustivo. No tenemos forma de acomodar datos anidados o valores de matriz; son simplemente cadenas. Pero espero que este ejemplo ayude a ilustrar lo que puede comenzar a hacer con los literales de plantilla etiquetados.

Portada de Let's Learn ES6

Ryan Christiani es el instructor principal y el líder de desarrollo en HackerYou en Toronto y también el autor de Let’s Learn ES6, un libro con todo lo que necesita saber sobre la última sintaxis en JavaScript.