Template Literals en JavaScript

Los template literals, también conocidos como plantillas literales, aparecieron en JavaScript en su versión ES6, proporcionando un nuevo método de declarar cadenas haciendo uso de comillas invertidas, ofreciendo diversas mejores y nuevas posibilidades.

Acerca de los template literals

Los template literals o plantillas literales se introdujeron en la versión ES6 de JavaScript, permitiendo declarar cadenas mediante la sintaxis de comillas invertidas:

const cadena = `texto de la cadena`;

Este nuevo método ofrece nuevas posibilidades en comparación con las cadenas declaradas con comillas simples o dobles estándares. Por ejemplo, mediante esta sintaxis es posible deifnir cadenas en varias líneas, pudiendo también insertar variables en cualquier parte de las cadenas sin necesidad de tener que concatenar varias cadenas.

Además, también podrás crear DSLs (Domain Specific language) con etiquetas embebidas, tal y como ocurre en React o en Styled Components. No te preocupes si no comprendes a qué me refiero, ya que a continuación veremos en detalle cada una de estas características.

Inserción de Variables

La inserción de variables o expresiones en mitad de las cadenas es muy sencilla con los template literals. A esto también se le llama interpolación de variables. Para ello basta con usar la sintaxis ${varaible} o ${expresión}.

En este ejemplo insertamos una variable en una cadena:

const web = 'neoguias';
const cadena = `Bienvenido a ${web}`;

Además también podrás insertar cualquier expresión, ya sean funciones u operaciones. En este ejemplo insertamos una expresión matemática:

const operacion = `La suma de 2 + 2 es ${2 + 2}`;

En este ejemplo llamamos a una función y mostramos una cosa u otra en base al resultado de la misma:

const resultado = `El resultado es ${comprobar() ? 'correcto' : 'falso'}`

Cadenas en varias líneas

Con las cadenas de toda la vida de JavaScript, que son las que había antes de su versión ES6, también es posible definir cadenas en varias líneas a nivel de editor mediante una barra invertida \ al final de la línea:

const cadena =
  'Esto es una \
cadena multilínea';

Esto permite definir cadenas en varias líneas, pero a la hora de renderizarlas solamente se verá en una. En el caso del ejemplo anterior, verás la cadena Esto es una cadena multilínea por pantalla, en una sola línea.

Sin embargo, también es posible definirlas en dos líneas reales usando el caracter \n de salto de línea:

const cadena = 'Esto es una \n cadena multilínea';

En caso de que quieras que lo que escribas en pantalla se traslade al tu resultado, no te quedará otra que combinar el salto de línea \n con el caracter \:

const cadena = 'Esto es una \n \
cadena multilínea';

Sin embargo, las plantillas literales o template literals facilitan mucho la definición de cadenas en varias líneas, ya que una vez inicies la cadena, bastará con que pulses INTRO para crear una nueva línea que se reflejará tanto el tu editor como en el resultado final:

const cadena = `Esto es una
 cadena multilínea`;

Puedes definir todas las líneas que quieras:

const cadena = `Esta es la primera línea de la cadena, 
esta es la segunda y 
esta es la tercera.`;

Sin embargo debes tener cuidado con los espacios y las sangrías de tu editor, ya que si defines la siguiente cadena:

const cadena = `Esta es la primera línea de la cadena, 
                 y esta es la segunda`;

Lo que verás por pantalla es lo siguiente:

Esta es la primera línea de la cadena,
                 y esta es la segunda

Lo que puedes hacer para solucionar esto es dejar la primera línea en blanco para así no tener que agregar espacios en la segunda si quieres formatear el código:

const cadena = `
Esta es la primera línea de la cadena,
y esta es la segunda`.trim();

Como ves también hemos usado la función trim() para eliminar el primer salto de línea.

Template tags

Esta es una funcionalidad que de entrada parece no tener importancia, aunque en realidad es utilizada por montones de famosas librerías como GraphQL, Apollo o Styled Components. Veamos cómo funciona. Realmente siempre he trabajado con JavaScript en otro idioma, así que no tengo ni idea de cómo llamarles en español, por lo que diré etiquetas de plantilla, aunque no suena demasiado bien, la verdad.

Las template tags son sencillamente funciones que se colocan antes del template literal, tal que así:

templatetag`templateliteral ${2 + 2}`;

Tal y como puedes ver, hemos agregado la función templatetag, que se debería corresponder con una función real que hayamos definido:

function templatetag(literales, ...expresiones)
{
  // Código de la función
}

Esta función acepta dos parámetros; los literales y las expresiones. Vamos a ver lo que representa cada uno de estos parámetros:

• Literales: Un array que contiene las diferentes partes de los template literals; es decir las partes de la cadena de texto que separan los elementos interpolados.
• Expresiones: Contiene todas las expresiones, variables o elementos que hayamos interpolado.

Vamos a proponer el siguiente ejemplo.

const cadena = `el resultado de ${2 + 2} es cuatro`;

Los literales de nuestro ejemplo serán un array con dos elementos. El primer elemento del array será la cadena el resultado de  y el segundo elemento será la cadena  es cuatro, incluyendo espacios. Es decir, se incluyen las cadenas de texto que están delimitadas por los elementos interpolados.

Por otro lado, las expresiones de nuestro ejemplo contendrán un único elemento, que será el elemento 4, resultado de 2 + 2.

Como ves, al igual que ocurre cuando usamos template literals normales, no especificamos una función. Sin embargo, eso no significa que no se ejecute ninguna función, ya que por defecto se asignará una función que interpola las variables y las cadenas.

Vamos a definir ahora un ejemplo más complejo como el siguiente, en el que la variable azul tiene el valor '#00bed5' y la variable verde tiene el valor '#11b200':

const cadena = `voy a decir que
el cielo es ${azul}
y la hierba ${verde}
o eso creo`;

En este ejemplo los literales serán un array cuyo primer elemento será:

`voy a decir que
el cielo es `

El segundo elemento, que incluye el salto de línea, será:

`
y el mar es `

Y finalmente el tercer elemento, incluyendo también el salto de línea, será:

`
o eso creo `

En cuanto a las expresiones, en este caso son un array con los elementos '#00bed5' y '#11b200'.

La función que se le pase a ese template literal puede hacer cualquier tarea con dichos parámetros.

En el siguiente ejemplo vamos a definir una función o template tag que, al igual que ocurre habitualmente cuando no asignas ninguna función, interpole las expresiones con los literales:

const resultado = interpolar`Tengo ${50}€`

A continuación tienes la función de interpolación que podríamos usar, a modo de ejemplo:

function interpolar(literales, ...expresiones)
{
  let cadena = ``;
  for (const [i, exp] of expresiones.entries()) {
    cadena += literales[i] + exp;
  }
  cadena += literales[literales.length - 1];
  return cadena;
}

Como decíamos antes, tanto GraphQL como Styled Components o Apollo usan template tags.

En Styled Components, las template tags se usan para crear definiciones CSS de los componentes. En el siguiente ejemplo, el template tag sería la función styled.h1:

const Titulo = styled.h1`
  font-size: 1.6em;
  text-align: center;
  color: #000;
`;

En Apollo, las template tags se usan para definir esquemas de consultas de GraphQL. En el siguiente ejemplo, la template tag sería la función gql:

const consulta = gql`
  query {
    ...
  }
`

Y esto ha sido todo.

---