3.1 Expressões Aninhadas
Nos template literals, você pode usar qualquer expressão, incluindo chamadas de funções, operadores ternários e template literals dentro de outros template literals.
Exemplo:
Na expressão ${a + b} uma operação matemática é realizada, e o resultado é inserido na string 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 Aninhados
Os template literals podem ser aninhados, permitindo criar strings complexas.
Exemplo:
A chamada do método greet() do objeto user está aninhada no 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 Marcados (Tagged Templates)
Os template literals marcados permitem chamar uma função para processar strings template. Isso possibilita realizar manipulações adicionais nas strings, como internacionalização, inserção segura de HTML, etc.
Sintaxe:
function tag(strings, ...values) {
// processamento de strings e valores
return resultado;
}
const result = tag`String template com ${variável}`;
Exemplo:
A função highlight() processa strings e valores, envolvendo os valores em tags HTML <span> com a classe 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 Inserção Segura de Valores
Os template literals ajudam a evitar alguns problemas comuns de segurança, como XSS (cross-site scripting), através da inserção segura de valores. Isso é especialmente útil ao inserir dados do usuário em HTML.
Exemplo:
A função safeHTML() substitui caracteres perigosos nos valores, prevenindo 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