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:

let titulo1='Administración';
let 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