ES6: Template Strings en JavaScript
Tags: javascript, es6, webdev, spanish
Published: 2020-07-20 16:22:34

Los **Template Strings** o **Template Literals** es una característica bastante sobresaliente y novedosa que incorpora la versión ES6 de JavaScript permitiendo una manipulación de cadenas de texto mas pulcra y legible.

## **¿Qué podemos hacer con un Template String?**
* Interpolación de cadenas de texto.
* Escritura de código multilínea.

## **Sintaxis**
```javascript
let texto = `Esto es un Template Literal`;
```
> *Basta encapsular los strings entre comillas simples invertidas (alt+96)*

## **Interpolación de cadenas de texto**
La concatenación clásica de caracteres se hace de la siguiente manera:

```javascript
let nombre = "Roxana";
let apellido = "Rodriguez";
console.log("El nombre completo es: " + nombre + " " + apellido)
//salida: "El nombre completo es: Roxana Rodriguez"
```

Ahora con los Template Strings podríamos hacer lo siguiente:
```javascript
let nombre = "Roxana";
let apellido = "Rodriguez";
console.log(`El nombre completo es: ${nombre} ${apellido}`)
//salida: "El nombre completo es: Roxana Rodriguez"
```
> *`${expresion}` permite imprimir expresiones dentro de las llaves (siempre y cuando se use Template Literals)*

Si en el último ejemplo uso comillas simples o dobles tendríamos el siguiente resultado:

```javascript
let nombre = "Roxana";
let apellido = "Rodriguez";
console.log('El nombre completo es: ${nombre} ${apellido}')
//salida "El nombre completo es: ${nombre} ${apellido}"
```

### **Imprimiendo expresiones**
Es posible imprimir cualquier tipo de expresión dentro de `${}`. Por ejemplo:

```javascript
console.log(`${10+10}`);
//salida: "20"
```

También pueden usarse para llamar funciones:
```javascript
let saludo = (nombre) => `Hola ${nombre}`;
console.log(`${saludo("Ruben")}`)
//salida: "Hola Ruben"
```
> En la línea 1 se usa una "Fat Arrow Function" (veremos estas funciones en post posteriores)

## **Strings multilínea**
Por ejemplo, si queremos imprimir un texto en varias líneas usaríamos `\n\` :
 
```javascript
let frase = "Las palabras nunca alcanzan \n\cuando lo que hay que decir \n\desborda el alma.";
console.log(frase);
/* salida:
"Las palabras nunca alcanzan 
cuando lo que hay que decir 
desborda el alma."
*/
```

Usando Template Strings obtendríamos el mismo resultado de la siguiente manera:

```javascript
let frase = `
Las palabras nunca alcanzan
cuando lo que hay que decir
desborda el alma
`;
console.log(frase);
/* salida:
"Las palabras nunca alcanzan 
cuando lo que hay que decir 
desborda el alma."
*/
```
## **Más usos posibles**
### **Arrays**
```javascript
//Ejemplo 1
let arrayNumeros = [1,2,3,4,5,6,7,8,9,10];
console.log(`La suma de todos los numeros es: ${arrayNumeros.reduce((a,b) => a+b )}`);

//salida: "La suma de todos los numeros es: 55"

//Ejemplo 2
let arraySaludo = ["Pero", "que","pasa","chavales?", "Todo", "bien?", "Todo", "correcto?"];
console.log(`${arraySaludo.join(" ")}`)
//salida: "Pero que pasa chavales? Todo bien? Todo correcto?"
```

### **Objetos**
```javascript
let tipo = "gato";
let mascota = [
  {id:1, nombre:"Scott", edad:5, tipo:"perro"},
  {id:2, nombre:"Shorty", edad:8, tipo:"perro"},
  {id:3, nombre:"Fyfy", edad:2, tipo:"gato"}
];

console.log(`Nombre: ${mascota.find(item => item.tipo === tipo).nombre}`);
//salida: "Nombre: Fyfy"
```

### **Operador ternario o if reducido**
```javascript
let mascota = {
  id:1, nombre:"Scott", edad:5, tipo:"perro",dueño:true
}

console.log(`${mascota.dueño ? mascota.nombre : "No tiene dueño"}`);
//salida: Scott

```
¿Bastante sencillo no crees?
![link](https://media.giphy.com/media/62PP2yEIAZF6g/giphy.gif)

## **Referencias** 👌
* https://www.etnassoft.com/2016/10/05/template-strings-en-es6-estudiando-las-nuevas-plantillas-de-cadena-en-javascript/
* https://desarrolloweb.com/articulos/template-strings-es6.html

---

## **Conclusiones** ✅
* Los template strings son útiles en código multilinea.
* Es una buena práctica realizar interpolaciones con template strings.
* Son bastante sencillos de usar y de comprender.
* Legibilizan el código.