3.1 Expresiones Anidadas
En los template literals, puedes usar cualquier tipo de expresión, incluyendo llamadas a funciones, operadores ternarios y template literals dentro de otros template literals.
Ejemplo:
En la expresión ${a + b} se realiza una operación matemática, y el resultado se inserta en la cadena result.
const a = 5;
const b = 10;
const result = `The result of ${a} + ${b} is ${a + b}.`;
console.log(result); // "The result of 5 + 10 is 15."
3.2 Template Literals Anidados
Los template literals pueden anidarse, lo que permite crear cadenas complejas.
Ejemplo:
La llamada al método greet() del objeto user está anidada en el template literal message.
const user = {
name: 'Bob',
age: 25,
greet() {
return `Hello, ${this.name}!`;
}
};
const message = `${user.greet()} You are ${user.age} years old.`;
console.log(message); // "Hello, Bob! You are 25 years old."
3.3 Template Literals Etiquetados (Tagged Templates)
Los template literals etiquetados permiten llamar a una función para procesar las cadenas. Esto da la oportunidad de realizar manipulaciones adicionales con las cadenas, como la internacionalización, la inserción segura de HTML, etc.
Sintaxis:
function tag(strings, ...values) {
// procesamiento de cadenas y valores
return resultado;
}
const result = tag`String con plantilla con ${variable}`;
Ejemplo:
La función highlight() procesa cadenas y valores, envolviendo los valores en etiquetas HTML <span> con la clase highlight.
function highlight(strings, ...values) {
return strings.reduce((result, str, i) =>
`${result}${str}${values[i] || ''}`, '');
}
const name = 'Carol';
const hobby = 'painting';
const message = highlight`My name is ${name} and I love ${hobby}.`;
console.log(message);
// "My name is <span class="highlight">Carol</span> and I love <span class="highlight">painting</span>."
3.4 Inserción Segura de Valores
Los template literals ayudan a evitar algunos problemas comunes de seguridad, como el XSS (cross-site scripting), mediante la inserción segura de valores. Esto es especialmente útil al insertar datos de usuario en HTML.
Ejemplo:
La función safeHTML() reemplaza caracteres peligrosos en los valores, previniendo ataques XSS.
function safeHTML(strings, ...values) {
return strings.reduce((result, str, i) =>
`${result}${str}${String(values[i]).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')}`, '');
}
const userInput = '<script>alert("XSS")</script>';
const message = safeHTML`User input: ${userInput}`;
console.log(message);
// "User input: <script>alert("XSS")</script>"
GO TO FULL VERSION