¿Cómo usar el literal de string de plantilla en ECMAScript 6?

En este artículo, vamos a aprender sobre los literales de plantilla . Hay diferentes tipos de literales en JavaScript, como los literales de objetos y los literales booleanos. También tenemos strings literales que se indican con comillas simples ‘ ‘ o comillas dobles ” “. 

A partir de ES6 (ECMAScript 6) , tenemos literales de plantilla que se indican con el carácter de comilla invertida («). Los literales de plantilla nos ayudan a escribir código limpio. También se denomina string de plantilla.

Sintaxis:

`string text`

Esta plantilla de literales también puede contener marcadores de posición. Podemos indicarlo con el signo de dólar y las llaves.

`string text ${expression} string text`

Veamos cómo estos literales de plantilla nos facilitan la vida con los siguientes ejemplos.

Ejemplo 1: forma tradicional de usar strings con un carácter de nueva línea.

<script>
    const textMessage = "GFG is the\n" +
    "best place to learn DS";
    console.log(textMessage);
</script>

Producción:

GFG is the
best place to learn DS

Ejemplo 2: Usando Plantillas Literales, podemos hacer lo mismo que el ejemplo anterior sin usar el carácter de nueva línea. En su lugar, podemos escribir el texto según sea necesario con saltos de línea.

<script>
    const textMessage = `GFG is the
    best place to learn DS`;
    console.log(textMessage);
</script>

Producción:

GFG is the
best place to learn DS

Ejemplo 3: También podemos encerrar parte del texto entre comillas simples y se mostraría sin ningún problema.

<script>
    const textMessage = `GFG is the
    best 'place' to learn DS`;
    console.log(textMessage);
</script>

Producción:

GFG is the
best 'place' to learn DS

También podemos agregar contenido dinámico dentro de la string de plantilla. Esto es posible definiendo la variable necesaria entre llaves con un signo de dólar delante.

Ejemplo 4: En este ejemplo, mostraremos el nombre dentro de la string usando el literal de plantilla.

<script>
    const name = "User";
    const message = `Hi ${name}, Welcome to the GeeksForGeeks`;
    console.log(message);
</script>

Producción:

Hi User, Welcome to the GeeksForGeeks