ES6: Template literals

En anteriores entradas, ya hemos visto algunas de las novedades que presenta ES6. Algunas de las que hemos tratado son las nuevas formas de declarar variables, las funciones flecha y las nuevas formas de declarar parámetros (por defecto, REST y el operador SPREAD). En esta entrada, vamos a ver otra novedad que es muy interesante porque simplifica mucho la forma tradicional de construir strings.

Los template literals podríamos decir que tienen dos tipos los template literals y los tagged template literals.

Template literals

En JavaScript tradicional, si queríamos introducir unas variables en un string lo que hacíamos era concatenar las variables con +. Con ES6, se introduce un nuevo tipo de string, a los que ya teníamos (“” y ‘’) , que se declara con . Por tanto, lo que tenemos que hacer es poner el string entre y las variables dentro con ${}. Vamos a ver un ejemplo:

const text = "world!";

const num = 5;

// ES5

console.log('Hello ' + text + ' Cálculo:' + num * 4);

// ES6

console.log(`Hello ${text} Cálculo:${num * 4}`);

Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-Template-strings

También, si queríamos que un string tuviese saltos de línea teníamos que hacerlo con \n. Ahora, con los template literals no es necesario, simplemente poniendo un salto de línea en el string, ya se incluirá:

// ES5

console.log('String\nmultilínea');

// ES6

console.log(`String

multilínea`);

Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-Template-literals-con-saltos-de-linea

Tagged template literals

Los tagged template literals son funciones a las cuales les pasamos un template string como parámetro sin poner los paréntesis y lo parsean:

const text = "world!";

const num = 5;

function testTag(strings, exp1, exp2) {

console.log(strings, exp1, exp2);

// [ 'Hello ', ' Cálculo:', '' ] 'world!' 20

}

testTag`Hello ${text} Cálculo:${num * 4}`;

function testTagRest(strings, ...exps) {

console.log(strings, exps);

// [ 'Hello ', ' Cálculo:', '' ] [ 'world!', 20 ]

}

testTagRest`Hello ${text} Cálculo:${num * 4}`;

Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-Tagged-template-literals

Si te fijas, si no supiesemos cuantas variables tendrá la cadena de texto, podemos hacer uso de los parámetros REST que vimos en la entrada anterior, para que nos recoja todos los parámetros extra.

Dentro de la función se podría hacer cualquier cosa, si quieres varios ejemplos, puedes echarle un vistazo a este enlace.

Template literals

Tagged template literals

Deja una respuesta Cancelar la respuesta