En este artículo vamos a hablar de una de las mejoras de ES6 aplicadas al lenguaje Javascript, las "Template Strings", que nos sirven para dulcificar la sintaxis en la creación de cadenas donde queremos embutir contenido de variables. Es una de las novedades de EcmaScript 2015, de las muchas que nos ofrece y que estamos revisando en el Manual de ES6.

Las template strings, o cadenas de texto de plantilla, son una de las herramientas de ES6 para trabajo con cadenas de caracteres que nos pueden venir muy bien para producir un código Javascript más claro. Usarlas es por tanto una recomendación dado que facilitará el mantenimiento de los programas, gracias a que su lectura será más sencilla con un simple vistazo del ojo humano.

La sintaxis es bien simple y muy fácil de entender, como veremos en este artículo.

Interpolación de variables en cadenas con Javascript tradicional

En un programa realizado en Javascript, y en cualquier lenguaje de programación en general, es normal crear cadenas en las que tenemos que juntar el contenido de literales de cadena con los valores tomados desde las variables. A eso le llamamos interpolar.

var sitioWeb = "DesarrolloWeb.com";
var mensaje = 'Bienvenido a ' + sitioWeb;

Eso es muy fácil de leer, pero a medida que el código se complica y en una cadena tenemos que interpolar el contenido de varias variables, el código comienza a ser más enrevesado.

var nombre = 'Miguel Angel';
var apellidos = 'Alvarez'
var profesion = 'desarrollador';
var perfil = '<b>' + nombre + ' ' + apellidos +  '</b> es ' + profesion;

Quizás estás acostumbrado a ver esto así. El código está bien y no tiene ningún problema, pero podría ser mucho más bonito si usas los template strings.

Crear un template string

Para crear un template string simplemente tienes que usar un carácter distinto como apertura y cierre de la cadena. Es el símbolo del acento grave.

var cadena = `Esto es un template String`;

Usos de las cadenas plantilla

Las cadenas de plantilla tienen varias características interesantes que, cómo decíamos, facilitan la sintaxis. Veremos a continuación algunos de ellos con código de ejemplo.

Interpolación de valores

Creo que lo más interesante es el caso de la interpolación que genera un código poco claro hasta el momento. Echa un vistazo al código siguiente que haría lo mismo que el que hemos visto anteriormente del perfil.

var nombre = 'Miguel Angel';
var apellidos = 'Alvarez'
var profesion = 'desarrollador';
var perfil = `<b>${nombre} ${apellidos}</b> es ${profesion}`;

Como puedes comprobar, dentro de un template string es posible colocar expresiones encerradas entre llaves y precediendo de un símbolo "$". Algo como ${ expresion }.

En las expresiones podemos colocar código que queramos volcar, una vez evaluado, dentro de la cadena. Las usamos generalmente para colocar valores de varibles, pero también servirían para colocar operaciones matemáticas, por ejemplo.

var suma = `45 + 832 = ${45 + 832}`;

O bien algo como esto:

var operando1 = 7;
var operando2 = 98;
var multiplicacion = `La multiplicación entre ${operando1} y ${operando2} equivale a  ${operando1 * operando2}`;

Saltos de línea dentro de cadenas

Hasta ahora, si queremos hacer una cadena con un salto de línea teníamos que usar el caracter de escape "contrabarra n".

var textoLargo = "esto es un texto\ncon varias líneas";

Con un template string tenemos la alternativa de colocar el salto de línea tal cual en el código y no producirá ningún problema.

var textoLargo = `esto es un texto
con varias líneas`;

Conclusión

Esto es lo básico sobre las cadenas de plantilla, que deberías usar ya mismo en tu código, pues te permiten una sintaxis bastante mejorada en operaciones habituales con cadenas de caracteres.

Hay que advertir que todavía hay algunas otras cosas interesantes, detalles más avanzados pero también útiles que se podrían hacer con los template string, que no hemos visto en este artículo, pero que revisaremos más adelante.