La sintaxis para concatenar strings en JavaScript siempre ha sido bastante mala, en otros lenguajes como Ruby o PHP podemos incluir las variables dentro de un string y se pueden evaluar sin problema, permitiendo tener un código más organizado y limpio.

La nueva versión de JavaScript nos permite hacer interpolaciones, esto significa que podemos evaluar expresiones dentro de un string, por ejemplo.

const name = 'Crysfel';
const hello = `Hello ${name}!`;

Para poder interpolar un string simplemente utilizaremos el backtick o comilla invertida (`). Dentro de las comillas podemos definir el string que necesitemos y para evaluar una expresión simplemente usamos ${ expresión }. 

Dentro de la expresión podemos usar variables o inclusive funciones.

const getMessage = function(lang) {
  const i18n = {
    en: 'Hello',
    es: 'Hola',
    ja: 'Konnichiwa',
  };
  return i18n[lang];
};

const name = 'Crysfel';
const text = `${getMessage('ja')} ${name}!`;

Como se puede observar, dentro de la expresión estamos invocando una función y el string final contendrá el resultado de dicha función.

También podemos evaluar operaciones aritméticas, por ejemplo.

const x = 1;
const y = 2;
const result = `${x} + ${y} = ${x + y}`;

Podemos utilizar ternarios, arreglos, objetos y prácticamente todo lo que necesitemos.

Personalmente he estado utilizando este tipo de strings desde hace el año pasado en proyectos que he deployado a producción usando Babel. Es muy conveniente su uso ya que nos permite escribir código más limpio.

Si tienes alguna pregunta puedes dejarla en los comentarios.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso JavaScript Next, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!