Template Strings

↑ Me gusta (1)

Hablar de template strings es mencionar al mismo tiempo a las "plantillas de cadena de caracteres", significa que este método habilita literalmente lo que expresamos. Podemos a través de ello utilizar matemática, saltos de lineas, etc.

Empezamos a construir template strings delimitando nuestro contenido con un signo ortográfico especial, este se llama tilde invertido o acento grave. Es muy importante esta diferencia porque estamos acostumbrados a trabajar con comillas dobles o simples. Veamos algunos ejemplos:

console.log(`mi primer template string`);

var template = `primer texto de mi contenido
final de mi contenido`;

console.log(template);

Podemos ver claramente que con usar el acento grave tenemos como resultado un template string y hay algo importante que debemos notar y aprender, lo que aquí ingreses se maneja como literal. Fíjate que la frase "final de mi contenido" está completamente pegada a la izquierda, si lo hubiese organizado a la derecha se habría afectado mi resultado.

Nota importante: Template Strings es igual a LITERAL, habilita literalmente lo que expresamos.

Expresiones en Template Strings

Luego de ES6 comenzamos a trabajar con una fluidez increíble, principalmente por su expresividad y estas ventajas de hacer mas legible nuestro código.

var num1 = 9;
var num2 = 3;

console.log(`La suma de ${num1} + ${num2} es ${num1 + num2}`);
console.log(`La resta de ${num1} - ${num2} es ${num1 - num2}`);

El resultado es:

La suma de 9 + 3 es 12
La resta de 9 - 3 es 6

Esto nos ayudará por ejemplo cuando construimos una ruta en axios, es crear literalmente nuestra URL con el ID y los parámetros necesarios.

Postprocesador

Esto es muy interesante, es una de nivel superior o avanzada de crear los templates strings, a esta forma se le conoce como función de postprocesado.

Post: Significa "después de..."

Procesado: Hace referencia a que algún elemento atravesó un proceso y está transformado

Esto es vital entenderlo porque nos dice que podemos modificar a conveniencia la salida o resultado de nuestras plantillas usando una función.

Su sintaxis es: El primer argumento de esta función es un array que incluirá la cadena literal de texto, y muchos argumentos mas con los valores que necesitemos. Finalmente, esta función puede llamarse de cualquier manera.

Ejemplo:

var name     = 'Italo';
var lastname = 'Morales';

function fullname(string, ...data)
{
    return `${string[0]}${name} ${lastname}`;
}

console.log(fullname`Mi nombre completo es ${name} ${lastname}`);

El resultado es //Mi nombre completo es Italo Morales

1. La variable name contiene mi nombre 'Italo'.
2. La variable lastname contiene mi apellido 'Morales'.
3. En la función recibimos dos parámetros pero que a su vez son muchos datos; string es un parámetro que podría tener cualquier nombre, representa todo mi texto.
4. Si hacemos un console.log(string) obtenemos el resultado, esto representa un array pero le he llamado string porque es a quien representa. en mi caso al texto "Mi nombre completo es "

Array contraído:

Array(3) [ "Mi nombre completo es ", " ", "" ]

Array expandido:

(3) […]
    0: "Mi nombre completo es "
    1: " "
    2: ""
    length: 3
//...

5. El segundo parámetro representa a todos los parámetros, en mi caso se llama ...data. También pudiera especificar uno a uno cada parámetro y el resultado sería function fullname(string, name, lastname).

Algunos ejemplos

Ciclo:

var list = [
    {
        name : "PHP"
    },
    {
        name : "Javascript"
    }
];

list.map(
    item => console.log(`${item.name}`)
)

Plantilla Simple:

var app = "Rimorsoft Online";
	
var template = `Web ${app}`;
	
console.log(template);

Objeto de datos:

var app = {
    name : "Rimorsoft Online",
    web  : "rimorsoft.com"
};
	
var template = `Nuestra web es ${app.web}`;

console.log(template);

Has aprendido lo que se conoce como "plantillas de cadena de texto" o template strings

Compra el libro Laravel Engineer →