Listado completo de tutoriales

ES6 - Plantillas de cadenas de caracteres


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>

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>

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>

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

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

Retornar