Novedades ES6 - Plantillas de cadenas de caracteres

Las plantillas literales son cadenas literales que habilitan el uso de expresiones incrustadas. Con ellas, es posible utilizar cadenas de caracteres de más de una línea, y funcionalidades de interpolación de cadenas de caracteres.
En ediciones anteriores de la especificación ES2015, solían llamarse "plantillas de cadenas de caracteres".

Las plantillas literales se delimitan con el caracter de comillas o tildes invertidas (` `), en lugar de las comillas sencillas o dobles.
Las plantillas de cadena de caracteres pueden contener marcadores, identificados por el signo de dólar y envueltos en llaves (${expresión}). Las expresiones contenidas en los marcadores, junto con el texto entre ellas, son enviados como argumentos a una función.
La función por defecto sencillamente concatena las partes para formar una única cadena de caracteres. Si hay una expresión antes de la plantilla literal (aquí indicada mediante etiqueta), se le conoce como "plantilla etiquetada". En este caso, la expresión de etiqueta (típicamente una función) es llamada con la plantilla literal como parámetro, que luego puede ser manipulada antes de ser devuelta.
En caso de querer escapar una comilla o tilde invertida en una plantilla literal, se debe poner una barra invertida (\) antes de la comilla o tilde invertida.

`texto de cadena de caracteres`
`línea 1 de la cadena de caracteres
 línea 2 de la cadena de caracteres`
`texto de cadena de caracteres ${expresión} texto adicional`
etiqueta`texto de cadena de caracteres ${expresión} texto adicional`

El manejo de cadenas de caracteres en JavaScript tradicional se emplean las comillas simples o dobles:

var titulo1='Administración';
var titulo2="Contabilidad";

Cuando se requieren generar otra cadena formada por varias variables de tipo cadena, numérica etc. normalmente se utiliza el operador + para concatenar.

Con ES6 se incorpora la posibilidad de definir cadenas de caracteres utilizando las comillas invertidas `.

Emplearemos este tipo de cadenas cuando necesitemos sustituir el contenido de variables dentro de la cadena de caracteres sin tener que utilizar el operador de concatenación:

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  const valor1=parseInt(prompt('Ingrese primer valor:'));
  const valor2=parseInt(prompt('Ingrese segundo valor:'));
  document.write(`La suma de ${valor1} y ${valor2} es ${valor1+valor2}`);
</script>

</body>
</html>

Ver ejemplo anterior

Para interpolar el contenido de una variable dentro de una plantilla de cadena de caracteres encerramos entre llaves la variable y le antecedemos el caracter $:

  document.write(`La suma de ${valor1} y ${valor2} es ${valor1+valor2}`);

También es importante ver que dentro de las llaves podemos disponer una operación.

Podemos comprobar que es una sintaxis más clara a la de emplear el operador de concatenación:

  document.write("La suma de "+valor1+" y "+valor2+" es "+(valor1+valor2));

Llamada a funciones.

Cuando utilizamos una plantilla de cadenas de caracteres podemos llamar a una función dentro de la plantilla:

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  function mayor(v1,v2) {
    if (v1>v2)
      return v1;
    else
      return v2;
  }

  const valor1=parseInt(prompt('Ingrese primer valor:'));
  const valor2=parseInt(prompt('Ingrese segundo valor:'));
  document.write(`El mayor de ${valor1} y ${valor2} es ${mayor(valor1,valor2)}`);
</script>

</body>
</html>

Ver ejemplo anterior

Plantillas de cadenas de caracteres de múltiples líneas

No se requiere ninguna sintaxis especial si queremos disponer una plantilla de texto de múltiples líneas.

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
  const dia1='Lunes';
  const dia2='Miércoles';
  const dia3='Jueves'
  const cadena=`
  <ol>
    <li>${dia1}</li>
    <li>${dia2}</li>
    <li>${dia3}</li>        
  </ol>`;
  document.write(cadena);
</script>

</body>
</html>

Ver ejemplo anterior

Hemos definido la constante 'cadena' con múltiples líneas:

  const cadena=`
  <ol>
    <li>${dia1}</li>
    <li>${dia2}</li>
    <li>${dia3}</li>        
  </ol>`;