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.
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.
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
name
contiene mi nombre 'Italo'.lastname
contiene mi apellido 'Morales'.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
//...
...data
. También pudiera especificar uno a uno cada parámetro y el resultado sería function fullname(string, name, lastname)
.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
JavaScript es hoy día un lenguaje de programación muy popular, las grandes y pequeñas empresas necesitan programadores con mucha habilid...
En esta lección tocamos parte importante del fundamente JavaScript, var
, let
y const
presentan pequeñas diferencias importantes, a...
Hablar de template strings es mencionar al mismo tiempo a las "plantillas de cadena de caracteres", significa que este método habilita l...