Las nuevas cadenas de texto de JavaScript 6

Las cadenas de texto de JavaScript han sido desde siempre muy limitadas,
sobre todo comparadas con las cadenas de lenguajes como PHP, Python o
Ruby. Las Template Strings del estndar EcmaScript 6 (que estn disponibles
a partir de Google Chrome 41) eliminan todas estas limitaciones y permiten
incluso definir DSLs (domain-specific languages) en tus aplicaciones
JavaScript.
Las principales funcionalidades que aportan las Template Strings son:

Interpolacin de cadenas.

Posibilidad de incluir (y evaluar) expresiones dentro de cadenas.

Definicin de cadenas de texto en varias lneas sin tener que usar hacks.

Formatear cadenas de manera avanzada.

Cadenas etiquetadas.

En vez de aadir todas estas funcionalidades en las cadenas que conocemos y

usamos a diario en JavaScript, las Template Strings aaden sus
funcionalidades de una manera completamente nueva.

Sintaxis
Las Template Strings utilizan las comillas invertidas o backticks para delimitar
sus contenidos, en vez de las tradicionales comillas simples o dobles de las
cadenas de texto normales. As que este es un ejemplo de cmo definir
una Template String:
// esto es una Template String
var saludo = `Hola Mundo!`;

// esto es una cadena normal con comillas simples

var saludo = 'Hola Mundo!';

// esto es una cadena normal con comillas dobles

var saludo = "Hola Mundo!";

Aunque de momento las Template Strings no parecen gran cosa, sigue leyendo
para descubrir todas sus funcionalidades.

Interpolacin de cadenas
Una de las mejores caractersticas de las Template Strings es la interpolacin
de cadenas. En pocas palabras, la interpolacin permite utilizar cualquier
expresin vlida de JavaScript (como por ejemplo la suma de dos variables)
dentro de una cadena y obtener como resultado la cadena completa con la
expresin evaluada.
Las partes variables de una Template String se denominan placeholders y
utilizan la sintaxis ${ }para diferenciarse del resto de la cadena. Ejemplo:
// Sustitucin simple de cadenas
var nombre = "Juan";
console.log(`Hola ${nombre}!`);

// resultado => "Hola Juan!"

Como dentro de las partes variables de la cadena se puede incluir cualquier

expresin vlida de JavaScript, en la prctica sirven para mucho ms que
mostrar el contenido de una variable. En los siguientes ejemplos se muestran
cmo interpolar algunas operaciones matemticas sencillas:
var a = 10;
var b = 10;
console.log(`JavaScript se public hace ${a+b} aos!`);

// resultado => JavaScript se public hace 20 aos!

console.log(`Existen ${2 * (a + b)} frameworks JavaScript y no ${10 * (a

+ b)}.`);
// resultado => Existen 40 frameworks JavaScript y no 2000.

Dentro de un valor interpolado tambin se puede utilizar cualquier funcin:

function fn() { return "Este es el resultado de la funcin"; }

console.log(`Hola "${fn()}" Mundo`);

// resultado => Hola "Este es el resultado de la funcin" Mundo

La sintaxis ${} tambin funciona con expresiones que invocan mtodos y

acceden a propiedades:
var usuario = { nombre: 'Juan Perez' };
console.log(`Ests conectado como ${usuario.nombre.toUpperCase()}.`);

// resultado => "Ests conectado como JUAN PEREZ.";

var divisa = 'Euro';

console.log(`Los precios se indican en ${divisa}. Utiliza nuestro convers
or para convertir ${divisa} en tu moneda local.`);

// resultado => Los precios se indican en Euro. Utiliza nuestro conversor

para convertir Euro en tu moneda local.

Si la Template String contiene en su interior las mismas comillas que se usan

para delimitar sus contenidos, escpalas usando la habitual barra
invertida \ delante de la comilla:
var saludo = `\`Hola\` Mundo!`;

Cadenas en varias lneas

Definir una cadena de texto en varias lneas con JavaScript es sencillo, pero
requiere de algunoshacks que ensucian el cdigo de la aplicacin. La solucin
ms utilizada actualmente consiste en aadir una barra invertida antes de cada
salto de lnea. Ejemplo:
var saludo = "Hola \
Mundo";

Aunque este cdigo funciona perfectamente en cualquier engine moderno de

JavaScript, no deja de ser un hack. Otra forma de definir cadenas en varias
lneas consiste en utilizar la concatenacin de cadenas, aunque el resultado no
es mucho mejor que el anterior:
var saludo = "Hola " +

"Mundo";

Las Template Strings simplifican drsticamente la definicin de cadenas en

varias lneas. De hecho, es tan sencillo que no hay que hacer absolutamente
nada: pulsa <Enter> cada vez que quieras incluir un salto de lnea en la cadena
y ya est. Ejemplo:
var cadena = `Lnea nmero 1 de la cadena
Lnea nmero 2 de la cadena`;

Este cdigo funciona bien porque cualquier espacio en blanco (incluyendo los
saltos de lnea) que se incluyen dentro de las comillas invertidas se considera
que es parte de la cadena.

Cadenas etiquetadas
Otra de las funcionalidades avanzadas de las Template Strings son las "tagged
strings" o cadenas etiquetadas. Las etiquetas permiten transformar los
contenidos de una cadena aplicndoles una funcin. El nombre de la etiqueta
se indica justo delante de la cadena y su nombre coincide con el de la funcin
que se ejecutar para transformar los contenidos de la cadena:
fn`Hola ${nombre}! Tu ltima conexin fue el ${fechaUltimaConexion}.`

En este ejemplo, fn es el nombre de la etiqueta y por tanto, tambin es el

nombre de la funcin que se ejecuta. El siguiente cdigo muestra cmo se
transforman realmente los contenidos de la Template String en los argumentos
de la funcin:
fn(["Hola ", "! Tu ltima conexin fue el
onexion);

", "."], nombre, fechaUltimaC

A continuacin, se muestra un ejemplo prctico del uso de las cadenas

etiquetadas. Imagina que en tu aplicacin necesitas escapar todo el contenido
HTML que puedan contener las cadenas de texto. Gracias a las cadenas
etiquetadas, podras definir una etiqueta llamada html y utilizarla de esta
manera:
html`<b>${nombreUsuario} dice</b>: "${comentario}"`

Lo que queremos es que el contenido de las

variables nombreUsuario y comentario se escape automticamente para que no
"rompan" el contenido HTML de la pgina. La funcin a desarrollar tendr dos

argumentos llamados nombreUsuario y comentario. Los dos argumentos pueden

contener caracteres problemticos desde el punto de vista HTML (<, >, &, etc.)
La funcin html() que utilizaremos como etiqueta podra tener este contenido:
function html(parametros) {
var resultado = parametros[0];
var substituciones = [].slice.call(arguments, 1);
for (var i = 0; i < substituciones.length; ++i) {
resultado += escape(substituciones[i]) + parametros[i + 1];
}

return resultado;
}

function escape(s) {
return s.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/'/g, "&#39;")
.replace(/"/g, "&quot;");
}

var nombreUsuario = "Juan Perez";

var comentario = "aprendiendo <em>JavaScript</em> & <b>ES6</b>";

console.log(html`<b>${nombreUsuario} dice</b>: "${comentario}"`);

// resultado => <b>Juan Perez dice</b>: "aprendiendo &lt;em&gt;JavaScript
&lt;/em&gt; &amp; &lt;b&gt;ES6&lt;/b&gt;"

Las posibilidades de las cadenas etiquetadas son prcticamente ilimitadas.

Puedes utilizarlas para escapar informacin, formatear cadenas, traducirlas y
cualquier otra sustitucin avanzada que puedas imaginar:
// Escapar informacin
qsa`.${className}`;
safehtml`<a href="${url}?q=${query}" onclick="alert('${mensaje}')" style=
"color: ${color}">${mensaje}</a>`;

// Formatear valores en funcin del idioma (:numero y :divisa transforman

el contenido)
l10n`Hola ${nombre}; eres nuestro visitante ${visitante}:numero. El saldo
de tu cuenta es ${dinero}:divisa.`

// Embeber HTML/XML
jsx`<a href="${url}">${texto}</a>` // se transforma en React.DOM.a({ hre
f: url }, texto)

// DSL propio para ejecutar comandos

var proceso = sh`ps ax | grep ${pid}`;

Resumen y referencias
Las Template Strings se pueden utilizar en Google Chrome 41, la Tech
Preview de Internet Explorer, Firefox 35 y el framework io.js. La mayor parte
de transpilers de ES6 tambin las soportan, como por ejemplo Tracuer.
Puedes encontrar ms ejemplos sobre Template Strings en el repositorio de
ejemplos de cdigo de Google Chrome. Consulta tambin este artculo para
descubrir el cdigo equivalente en ES5 para conseguir una funcionalidad
similar a la ofrecida por ES6.
Las Template Strings aaden funcionalidades muy interesantes a las cadenas
de texto tradicionales de JavaScript. Entre otras, permiten interpolar
expresiones, definir cadenas en varias lneas y crear tu propio lenguaje DSL
gracias a las cadenas etiquetadas.

Esta ltima es la funcionalidad ms importante, ya que gracias a las etiquetas,

las aplicaciones pueden definir sus propios lenguajes DSL. En la prctica, las
etiquetas reciben como argumentos las diferentes partes de una cadena y los
procesan para obtener como resultado una nueva cadena.
Referencias interesantes

http://www.2ality.com/2015/01/template-strings-html.html

https://leanpub.com/understandinges6/read/#leanpub-auto-taggedtemplates

http://jaysoo.ca/2014/03/20/i18n-with-es6-template-strings/

http://odetocode.com/blogs/scott/archive/2014/09/30/features-of-es6-part8-tagged-templates.aspx

Sobre el autor
Este artculo fue publicado originalmente por Addy Osmani y ha sido traducido
con permiso porJavier Eguiluz.