Fundamentos de la interpolación de cadenas
Inserte expresiones dentro de literales de plantilla.
Fundamentos de la interpolación de cadenas es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 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 JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Qué son los literales de plantilla
Los literales de plantilla permiten crear cadenas utilizando el carácter de comilla invertida en lugar de comillas. Permiten incrustar expresiones directamente en una cadena sin realizar concatenaciones manuales.
Un marcador se escribe con un signo de dólar seguido de llaves que contienen una expresión. JavaScript evalúa la expresión e inserta su valor en la cadena.
const name = "Alice"
const greeting = "Hello, " + name + "!"
console.log(greeting)Sintaxis de interpolación
Dentro de un literal de plantilla, se coloca una expresión entre una secuencia inicial de signo de dólar y llave, y una llave de cierre. La expresión se evalúa y se convierte en una cadena.
El ejemplo siguiente utiliza una concatenación sencilla para producir el mismo resultado que obtendría mediante interpolación, de modo que la idea quede clara sin mostrar la sintaxis del literal.
const product = "Book"
const price = 12
const line = product + " costs " + price + " dollars"
console.log(line)Por qué ayuda la interpolación
La concatenación con el operador más se vuelve difícil de leer cuando se mezclan muchas variables y texto literal. La interpolación mantiene intacto el texto que rodea la expresión y solo sustituye las partes dinámicas.
- Menos operadores más
- No hay errores de espaciado involuntarios
- La intención es más clara
const user = "Bob"
const count = 3
console.log(user + " has " + count + " messages")Incrustar cualquier expresión
Un marcador puede contener cualquier expresión válida, no solo una variable. Funcionan tanto las operaciones aritméticas como las llamadas a funciones y el acceso a propiedades.
const a = 5
const b = 7
console.log("Sum is " + (a + b))
console.log("Max is " + Math.max(a, b))Llamar a funciones dentro
Puede llamar a una función y hacer que su valor devuelto se incorpore a la cadena. El ejemplo muestra la forma equivalente mediante concatenación.
function upper(s) { return s.toUpperCase() }
const word = "hello"
console.log("Loud: " + upper(word))Acceso a propiedades
Las propiedades de los objetos se pueden leer directamente dentro de un marcador. Aquí se leen campos de un objeto de usuario.
const user = { name: "Eve", age: 30 }
console.log("Name: " + user.name + ", Age: " + user.age)Los números se convierten en cadenas
Cuando un número aparece en un contexto de cadena, se convierte automáticamente a su representación textual. La misma coerción ocurre con la interpolación.
const total = 19.99
console.log("Total: $" + total)Operadores ternarios dentro de marcadores
La lógica condicional con el operador ternario cabe en un marcador, lo que permite elegir entre dos valores directamente.
const score = 72
const grade = score >= 60 ? "Pass" : "Fail"
console.log("Result: " + grade)Expresiones anidadas
Los marcadores pueden contener cadenas de métodos y llamadas anidadas. Se inserta el resultado de evaluar la expresión.
const items = ["a", "b", "c"]
console.log("Joined: " + items.join("-"))
console.log("Count: " + items.length)Combinar muchos valores
Los literales de plantilla resultan especialmente útiles cuando una oración combina varias variables. Compare la versión interpolada y legible, descrita en la explicación, con esta alternativa equivalente mediante concatenación.
const city = "Paris"
const temp = 21
const sky = "sunny"
console.log("In " + city + " it is " + temp + "C and " + sky)Escapar el signo de dólar
Si quiere que una secuencia literal de signo de dólar y llave aparezca como texto en lugar de como marcador, escape el signo de dólar con una barra inversa dentro de un literal de plantilla. En las cadenas normales no es necesario escapar nada.
const text = "Use $\{x\} for a placeholder"
console.log(text)Comprobación rápida
Compruebe su comprensión de la interpolación.
Repaso
Repaso: Los literales de plantilla utilizan comillas invertidas y marcadores para incrustar expresiones en cadenas.
- Un marcador evalúa cualquier expresión
- Los valores se convierten en cadenas
- La interpolación es más clara que una concatenación extensa
- Escape el signo de dólar para mostrarlo literalmente
const n = "World"
console.log("Hello, " + n + "!")Preguntas frecuentes
¿La lección «Fundamentos de la interpolación de cadenas» es gratis?
Sí — el texto completo de «Fundamentos de la interpolación de cadenas» 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 JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Fundamentos de la interpolación de cadenas»?
Inserte expresiones dentro de literales de plantilla. Practicas JavaScript 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 JavaScript Academy?
No se requiere experiencia previa. JavaScript 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 1 de 4.
¿Cuánto tiempo toma la lección «Fundamentos de la interpolación de cadenas»?
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 JavaScript Academy?
Sí. Cada lección de JavaScript 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
- Fundamentos de la interpolación de cadenas
- Cadenas multilínea
- Funciones de plantilla etiquetada
- Casos prácticos de plantillas etiquetadas