¿Cuáles son los literales de plantilla en ES6?

Los literales de plantilla son palabras literales en programación que se usan para representar algún tipo de valor fijo y plantilla significa un modelo que puede generar alguna entidad. Por lo tanto, los literales de plantilla se usan para generar strings de un valor fijo. Estos están delimitados con las comillas graves «, podemos inyectar las expresiones de JavaScript y las strings dentro de él.

Sintaxis:

`Any string ${jsExpression} can appear here`

Ejemplo: En este ejemplo, estamos ilustrando una demostración simple de literales de plantilla.

<script>
const str1 = `Hi, GeeksforGeeks Learner`;
console.log(str1);
  
const str = "GeeksforGeeks";
const str2 = `Hi, ${str} Learner`;
console.log(str2);
</script>

Producción:

Hi, GeeksforGeeks Learner
Hi, GeeksforGeeks Learner

Ventajas: El uso de strings de plantilla tiene las siguientes ventajas:

1. Concatenación de strings: los literales de plantilla proporcionan una forma mucho más sencilla de concatenar dos strings. Normalmente usamos el operador «+», pero con los literales de plantilla, podemos escribir lo que queramos.

Ejemplo:

<script>
const strA1 = "Normal Javascript techniques";
const strA2 =  "are a little bit lengthy";
console.log(strA1 + " " + strA2 + ".");
  
const strB1 = "Template literals";
const strB2 =  "make them simple";
console.log(`${strB1} ${strB2}.`);
</script>

Producción:

Normal Javascript techniques are a little bit lengthy.
Template literals make them simple.

2. No es necesario usar secuencias de escape \n y \t: los literales de plantilla reservan cada tipo de espacio, por lo que no es necesario indicar explícitamente una nueva línea o un espacio adicional.

Ejemplo:

<script>
console.log("There will be a tab space after this"
    + "\t" + "end of string.");
console.log("First Line" + "\n" + "Second Line");
  
console.log(`There will be a tab space    after this end of string.`);
console.log(`First Line 
Second Line`);
</script>

Producción:

There will be a tab space after this    end of string.
First Line
Second Line
There will be a tab space after this    end of string.
First Line
Second Line

3. La combinación de expresiones y strings se vuelve fácil: con los literales de plantilla, podemos inyectar cualquier tipo de expresión que se ejecutará y determinará en tiempo de ejecución dentro de las strings. 

Ejemplo 1: en este ejemplo, mostramos cómo se puede usar un operador ternario para generar una string dinámica con literales de plantilla.

<script>
let darkMode = true;
  
console.log(
`The current background color
is ${darkMode ? "#000000" : "#FFFFFF" }`
);
</script>

Producción:

The current background color
is #000000

Ejemplo 2: la ilustración simple de cómo se puede insertar una expresión matemática en literales de plantilla.

const price = 5799.00;
  
console.log(
`The price of product is ${price} and
after 16% discount it would cost ${price-price*16*0.01}`
);

Producción:

The price of product is 5799 and
after 16% discount it would cost 4871.16