Template literals y encadenamiento opcional
Inserte expresiones en cadenas con template literals, acceda de forma segura a propiedades anidadas con ?., y use el cortocircuito con el operador de coalescencia nula ??.
Template literals y encadenamiento opcional es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
Plantillas literales: cadenas con comillas invertidas
Las plantillas literales (cadenas con comillas invertidas) admiten cadenas de varias líneas y expresiones incrustadas. Sustituyen la concatenación de cadenas con + y hacen más clara la intención.
// String concatenation (old way):
const msg = 'Hello, ' + name + '! You have ' + count + ' messages.';
// Template literal (modern):
const msg2 = `Hello, ${name}! You have ${count} messages.`;Plantillas literales de varias líneas
Las plantillas literales conservan los saltos de línea y la sangría. Ya no necesita \n ni concatenar cadenas en varias líneas.
const html = `
<div class="card">
<h2>${title}</h2>
<p>${body}</p>
</div>
`;
const sql = `
SELECT *
FROM users
WHERE age > ${minAge}
ORDER BY name
`;Expresiones en plantillas literales
Cualquier expresión de JavaScript puede ir dentro de ${}: operadores ternarios, llamadas a funciones, operaciones aritméticas y llamadas a métodos.
const tax = 0.2;
const price = 50;
const receipt = `
Subtotal: $${price}
Tax (${tax * 100}%): $${price * tax}
Total: $${price * (1 + tax)}
${isPaid ? 'PAID' : 'UNPAID'}
`;Plantillas literales etiquetadas
Una plantilla etiquetada llama a una función y le proporciona las partes de la cadena y los valores interpolados como argumentos. Se utiliza en bibliotecas como styled-components, GraphQL (gql``) y sql`` para construir consultas de forma segura.
function highlight(strings, ...values) {
return strings.reduce((acc, str, i) =>
acc + str + (values[i] !== undefined ? `<mark>${values[i]}</mark>` : ''), '');
}
const msg = highlight`Hello ${name}, you have ${count} messages.`;Encadenamiento opcional: ?.
El operador de encadenamiento opcional ?. devuelve undefined en lugar de lanzar un TypeError si el lado izquierdo es null o undefined. Elimina las comprobaciones defensivas de valores nulos.
const user = null;
// Without optional chaining (throws TypeError):
// user.profile.avatar
// With optional chaining (returns undefined):
const avatar = user?.profile?.avatar;
console.log(avatar); // undefined — no errorLlamadas opcionales a métodos
obj?.method() llama al método únicamente si obj no es null/undefined. Si obj es null, devuelve undefined sin lanzar una excepción.
const timer = getTimer(); // might return null
timer?.start(); // only calls start() if timer exists
// Also works on array access:
const firstItem = arr?.[0]; // undefined if arr is nullCoalescencia de nulos: ??
El operador de coalescencia de nulos ?? devuelve el lado derecho únicamente si el izquierdo es null o undefined (no si es falsy). A diferencia de ||, no trata 0 ni '' como valores nullish.
const port = config.port ?? 3000; // 3000 only if port is null/undefined
const name = user.name ?? 'Anonymous';
// Compare with ||:
console.log(0 ?? 'default'); // 0 (not nullish)
console.log(0 || 'default'); // 'default' (falsy!)Asignación por coalescencia de nulos: ??=
a ??= b asigna b a a únicamente si a es null o undefined. Es una forma abreviada de a = a ?? b. Resulta útil para inicializar propiedades de objetos de forma condicional.
let cache = {};
function getUser(id) {
cache[id] ??= fetchUser(id); // only fetch if not cached
return cache[id];
}Operadores de asignación lógica
&&= asigna únicamente si el lado izquierdo es truthy. ||= asigna únicamente si el lado izquierdo es falsy. Junto con ??=, permiten escribir asignaciones condicionales de forma concisa.
user.name ||= 'Anonymous'; // set if falsy
user.role &&= user.role.toLowerCase(); // transform if existsCombinar ?. y ??
Combine el encadenamiento opcional y la coalescencia de nulos para acceder a propiedades de forma segura y proporcionar un valor predeterminado.
const city = user?.address?.city ?? 'Unknown';
const total = cart?.items?.length ?? 0;Métodos de string que debe conocer
Métodos habituales de string: trim(), trimStart(), trimEnd(), padStart(), padEnd(), startsWith(), endsWith(), includes(), replaceAll(), at().
const str = ' Hello World ';
str.trim(); // 'Hello World'
str.includes('World'); // true
'5'.padStart(3, '0'); // '005'
'abc'.at(-1); // 'c'
'aabbcc'.replaceAll('b', 'x'); // 'aaxxcc'Comprobación rápida
¿Qué devuelve const val = obj?.foo?.bar ?? 'default' si obj es null?
Resumen: plantillas literales y encadenamiento opcional
Las cadenas con comillas invertidas admiten expresiones y varias líneas. Las plantillas etiquetadas permiten crear DSL. ?. accede a propiedades de forma segura sin comprobaciones de valores nulos. ?? proporciona un valor predeterminado cuando el valor es null/undefined (no solo falsy). Combínelos para acceder a datos de forma segura, legible y con valores predeterminados.
Preguntas frecuentes
¿La lección «Template literals y encadenamiento opcional» es gratis?
Sí — el texto completo de «Template literals y encadenamiento opcional» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Template literals y encadenamiento opcional»?
Inserte expresiones en cadenas con template literals, acceda de forma segura a propiedades anidadas con ?., y use el cortocircuito con el operador de coalescencia nula ??. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Template literals y encadenamiento opcional»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Métodos de arrays: map filter reduce find
- Desestructuración y spread de objetos
- Template literals y encadenamiento opcional
- Módulos: import y export