Hoy comenzamos el martes con otra de las maravillas de ECMAScript 6: las template strings o plantillas de cadenas texto. De hecho, recuerdo que en el año 2013 monté una simulación de String.format para JavaScript, además de estar investigando otras librerías del tipo sprintf() for JavaScript que tenían el mismo cometido: no hacer que la concatenación de expresiones y cadenas fuera una autentica locura. En este artículo te quiero enseñar algunos ejemplos de lo que podemos hacer con esta característica.

Concatenación de expresiones

La forma más básica de utilizar template strings es la siguiente:

const name = "Gisela",
    company = "Microsoft";
console.log(`Hello, my name is ${name} and I work at ${company}`);

Como puedes ver, para utilizar este tipo de plantillas debes usar las tildes invertidas (` `) y para incluir una expresión (una variable, la llamada a una función, etcétera) debes utilizar el símbolo del dólar y las llaves para delimitar la expresión. ¿Fácil y limpio verdad?

Cadenas multilínea

Otra de las ventajas que obtienes al usar estas plantillas es que también puedes trabajar con cadenas de más de una línea, tabulaciones, etcétera sin necesidad de utilizar saltos de líneas como veníamos haciendo:

console.log(`Hello from line number 1.
Hello from line number 2.
    Hello from a tabulated line number 3.
    Hello from a tabulated line number 4.`); 

El resultado sería el siguiente:

Tagged templates

Ya has visto lo bien que queda el uso de template strings en tu código JavaScript y cómo puedes librarte de los caracteres especiales, para definir los saltos de línea, tabulaciones, etcétera, pero eso no es todo. Hay una característica más, conocida como tagged templates, que lo que te permite es asociar una función al literal que sea capaz de interpretar o procesar la plantilla a la que está asociada. La idea es que tengamos más control sobre la plantilla que vamos a construir. Por ejemplo, si asociamos una función al primer ejemplo este sería el resultado:

function taggedTemplate(literals, name, company) {
    console.log(literals);
    console.log(name);
    console.log(company);
}
const name = 'Gisela',
    company = 'Microsoft';
taggedTemplate `Hi! my name is ${name} and I work at ${company}`; 

Como puedes ver, la forma de llamar a la función asociada a la plantilla es poniéndola por delante de esta directamente, sin operadores ni nada de nada. El resultado que devuelve taggedTemplate será el siguiente.

A partir de aquí podemos modificar la cadena, limpiar caracteres especiales introducidos por el usuario, etcétera.

¡Saludos!