Javascript: Ejemplos de Template Literal

Los Template Literal son plantillas que permiten intercalar expresiones dentro de una cadena, lo cual hace posible escribir cadenas sin tener que recurrir a la concatenación con el uso del operador +. También permiten escribir cadenas que tengan más de una línea, de nuevo sin recurrir al +. Además con los Templates etiquetados podemos incorporar procesamiento ad hoc. 

Ejemplo simple

Un ejemplo muy simple de es:

let miPrimerTemplateLiteral = `Este es un template literal`;

aquí se está usando el caracter ` que es el que declara un template literal, pero no se está haciendo uso de ninguna de sus ventajas comparativas con las cadenas normales declaradas con ' o ".

Ejemplo de intercalado de expresiones

Un ejemplo que si saca partido a las posibilidades de un Template Literal sería:

let nombre = "Luis";

let cantidad = 23;

let precioUnitario= 105;

let iva = 1.21;

let plantilla= `Querido/a ${nombre},\nEspero que te encuentres bien.

Te recuerdo que el importe de la factura asciende a ${cantidad*precioUnitario*iva}`;

console.log(plantilla);

// Resultado:

// Querido/a Luis,

// Espero que te encuentres bien.

// Te recuerdo que el importe de la factura asciende a 2922.15

aquí el uso de ${} muestra como se pueden incluir expresiones dentro del literal que se sustituyen por su valor en tiempo de ejecución. También se puede observar cómo un Template Literal puede ocupar más de una línea y cómo puede incluir un salto de línea \n.

Ejemplo de anidación

Los template literal se pueden poner unos dentro de otros

let color = 'rojas';

let count = 3;

let message = `Tengo ${color ? `${count} manzanas ${color}` : `${count} manzanas`} `; // Noncompliant; nested template strings not easy to read

console.log('Mesagge ', message)

// Resultado: Mesagge  Tengo 3 manzanas rojas

No  obstante esta forma de codificación está desaconsejada por SonarQube, herramienta que vela por la calidad del código. El motivo es la poca legibilidad del mismo, aconsejando esta herramienta codificar de la siguiente manera

let apples = color ? `${count} manzanas ${color}` : `${count} manzanas`;

message = `Tengo ${apples}`;

console.log('Mesagge ', message)

// Resultado: Mesagge  Tengo 3 manzanas rojas

 

Ejemplo de templates etiquetados

Un tTmplate se puede etiquetar con el nombre de una función. Esta recibe los textos y expresiones del Template Literal pudiendo procesarlo como se requiera.

function templatetag(literales, ...expresiones){

  console.log('lit ', literales, 'exp ', expresiones)

}

templatetag`amigo ${2+2} mio`

// Resultado; lit  [ 'amigo ', ' mio' ] exp  [ 4 ]

Esta característica de los Template Literal permite procesar su contenido según se requiera, por ejemplo

function priceonSeason(literales, ...expresiones) {

  let precio = 100;

  if (literales[1] == ' diciembre')    

     return `Su reserva para temporada baja ha sido confirmada.

     ${expresiones[0]} personas por un importe de ${precio*0.90}`

  else

    return `Su reserva para temporada alta ha sido confirmada.

    ${expresiones[0]} personas por un importe de ${precio}`

}

let pax = 2;

let respond = priceonSeason`Reserva de plaza para ${pax} diciembre`;

console.log ('Ejemplo etiquetado', respond)

// Resultado

// Ejemplo etiquetado Su reserva para temporada baja ha sido confirmada.      

//      2 personas por un importe de 90

 

Conclusión

Los Template Literal son cadenas de caracteres con características avanzadas que proporcionan medios al programador para trabajar con cadenas de caracteres de una muy versatil.