El nuevo estándar de Javascript ha traído muchos cambios. Algunos ya los hemos tratado en este blog, como los generadores o las clases. Hoy vamos a tratar un tema bastante menos habitual: vamos a ver cómo trabajar con template strings. Esto es, cómo obtener cadenas de texto usando un constructor que hará las funciones de plantilla.

Constructor

Para llamar al constructor de template strings debemos usar (`). Esto nos permite acceder a todas las funcionalidades que vamos a tratar aquí. Así, lo que en el anterior estándar de Javascript hubiera sido:

var saludo = "Hola Mundo!";  
var saludo = 'Hola Mundo!';  

ahora es:

let saludo = `Hola Mundo`;  

Por supuesto, también existe la posibilidad de escapar este símbolo si deseamos usarlo en la propia cadena:

let saludo = `\`Hola\` Mundo!!`  

template string es6 escapada

Multiline

Hasta ahora era necesario usar algún tipo de "truquito" si queríamos tener cadenas multiline en nuestro código. Cosas como estas:

var multilinea =[ "linea 1", "linea 2"].join("\n")

console.log( multilinea );  

Por el contrario, cuando usemos templates strings en ES6 el salto de línea es un caracter perfectamente válido, así que podrás usarlo como otro cualquiera:

let multilinea = `linea1  
linea2`;

console.log(multilinea);  

template string es6 multiline

Debes tener cuidado, sin embargo, con la maquetación del texto. Cualquier tabulador que usaras para alinear el texto dentro del template string se verá reflejado también en la salida:

template string es6 multiline con tabulación

Interpolación

Una de las características que más he echado de menos en el lenguaje hasta ahora es la interpolación. Ya hace mucho tiempo que otros lenguajes como Ruby o CoffeSCript la tienen. Consiste en la posibilidad de reemplazar una variable dentro de la cadena por su valor en el momento de crear dicha cadena. Algo parecido a lo que solemos lograr con la concatenación de una cadena y una variable:

var nombre = "Carlos";  
var saludo = "Hola " + nombre + ", ¿cómo estas?"

console.log( saludo );

// Hola Carlos, ¿cómo estas?

Ahora podemos conseguirlo de una forma mucho más elegante usando los símbolos de interpolación ${}:

let nombre = "Carlos";  
letsaludo = `Hola ${nombre}, ¿cómo estas?`

console.log( saludo );  

template string es6 interpolación

La interpolación no solo permite sustituir la variable por su valor, sino que podemos usar cualquier expresión que sea válida en Javascript, dentro de los símbolos de interpolación:

let nombre = "Carlos";  
let edad = 30  
let saludo = `Me llamo ${nombre} y mi edad es de ${edad + 3} años`

console.log( saludo );  

template string es6 interpolacion expresión

Tagging

En el tagging reside el auténtico poder de las nuevas posibilidades de las template strings. Mediante el uso de tags tenemos la posibilidad de poder procesar la cadena de texto de tantas formas como queramos antes de que esta sea consumida por el cliente.

Para taggear un template string hay que poner el tag justo antes de la primera (`), como pudes ver en el siguiente ejemplo:

let saludo = myTag`Hola mundo!`  

Aquí estamos aplicando el tag myTag. Pero, ¿qué es un tag? Un tag no es más que una función que recibe dos parámetros:

  • literales, que es una array de todos los fragmentos del template string que corresponden a cadenas de texto.

  • ...valores, que se define usando un Spread Operator y corresponde al listado de interpolaciones ya resueltas que hay en el template string.

Veamos un ejemplo de la función tag:

let myTag = function( literales, ...valores ){  
  for( let [index, literal] of literales.entries() ){
    console.log( `Número de literal ${index}: ${literal}` );
  }

  for( let [index, valor] of valores.entries() ){
    console.log( `Posición ${index} de valores es ${valor}` );
  }
}

let nombre = "Carlos";  
let edad = 30;  
let saludo = myTag`Hola me llamo ${nombre} y tengo ${edad} años`;  

template strings es6 tags

Fíjate que este tag muestra lo que he comentado antes. Como nuestro template string es

`Hola me llamo ${nombre} y tengo ${edad} años`

tenemos 3 literales y 2 interpolaciones.

Ahora es cuando podemos hacer transformaciones usando tags. Por ejemplo, imagínate que quieres incrementar en 3 el valor de todos los Integers que vayan a haber en tu cadena final. Así pues, creamos un tag llamado incInteger que hará justamente eso:

let incIntegers = function( literales, ...valores ){  
  let string = ""

  for( let [index, valor] of valores.entries()){
    string += literales[index]
    if( Number.isInteger( valor ) ){
      valor = valor + 3;
    }
    string += valor;
  }

  return string += literales[literales.length - 1  ];
}

let nombre = "Carlos";  
let edad = 30;  
let saludo = incIntegers`Hola me llamo ${nombre} y tengo ${edad} años`;

console.log( saludo );  

template string es6 tags

Aquí puedes ver cómo, si detectamos un Integer, le incrementamos el valor en 3 unidades: aunque originalmente la variable edad tenía un valor de "30 años", luego de pasar el template string por el tag incInteger la edad pasa a ser 33 años.

Recuerda que las funciones tags son siempre síncronas.

Bonus

No te olvides de que un tag no deja de ser una función. Así que no hay nada que te impida crear los tags programáticamente. Por ejemplo, si deseas crear un tag que incremente los Integers de una función en un valor arbitrario, obtendríamos algo así

let incIntegers = function( delta ) {  
  return function( literales, ...valores ){
    let string = ""

    for( let [index, valor] of valores.entries()){
      string += literales[index]
      if( Number.isInteger( valor ) ){
        valor = valor + delta;
      }
      string += valor;
    }

    return string += literales[literales.length - 1  ];
  }

};

let nombre = "Carlos";  
let edad = 30;  
let saludo = incIntegers(3)`Hola me llamo ${nombre} y tengo ${edad} años`;  
let saludoMayor = incIntegers(50)`Hola me llamo ${nombre} y tengo ${edad} años`;

console.log( saludo );  
console.log( saludoMayor );  

Evidentemente, las aplicaciones son muchísimas. Imagínate un tag para hacer I18N en tu aplicación ;)

Si quieres saber más sobre template string, échale un ojo Understanding ES6.

Si te ha gustado este post, difunde la palabra. Tampoco dudes en dejar comentarios u observaciones. ¡Gracias! :)

Suscríbete a mi lista de correo

* Campos obligatorios