Template literals · Cadenas de plantilla
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Esta página necesita un navegador reciente (con soporte para SharedArrayBuffer). Por favor, actualiza Chrome, Edge, Firefox o Safari a la última versión.
English
A cleaner way to build strings
- Wrap a string in backticks
`and you can drop values straight in with${...}. - This is a template literal — much tidier than joining with lots of
+.
Español
Una forma más limpia de construir cadenas
- Envuelve una cadena entre comillas invertidas
`and you can drop values straight in with${...}. - Esto es una cadena de plantilla — mucho más ordenada que unir con muchos
+.
let name = "Ada";
let age = 15;
console.log(`${name} is ${age}`); // → Ada is 15
English
Any expression fits inside ${ }
- Whatever you write inside
${...}is worked out first, then dropped into the string.
Español
Cualquier expresión cabe dentro de ${ }
- Lo que escribas dentro de
${...}se evalúa primero y luego se inserta en la cadena.
let a = 3;
let b = 4;
console.log(`${a} + ${b} = ${a + b}`); // → 3 + 4 = 7
English
Same string, two ways
+and a template literal can build exactly the same text.- In backticks, spaces and punctuation stay where you type them, so a missing space is easy to see.
Español
Misma cadena, dos formas
- El operador
+y una cadena de plantilla pueden generar exactamente el mismo texto. - En las comillas invertidas, los espacios y la puntuación permanecen tal como los escribes, por lo que un espacio faltante es fácil de detectar.
let item = "pen";
let price = 3;
console.log("A " + item + " costs " + price + " yuan."); // → A pen costs 3 yuan.
console.log(`A ${item} costs ${price} yuan.`); // → A pen costs 3 yuan.
English
Watch out
- Backticks
`are not the same as quotes'or".${...}only works inside backticks. - Bonus: a backtick string can span several lines — handy for longer messages.
Español
Ten cuidado
- Las comillas invertidas
`are not the same as quotes'or".${...}solo funciona dentro de comillas invertidas. - Bonus: una cadena entre comillas invertidas puede ocupar varias líneas — útil para mensajes más largos.
English
Common mistakes
- Template literals use backticks and
${...}:`Hi ${name}`, not quotes. - Inside
${...}you can put any expression.
Español
Errores comunes
- Las cadenas de plantilla usan comillas invertidas y
${...}:`Hi ${name}`, no comillas. - Dentro de
${...}puedes poner cualquier expresión.
English
Now you try
- Use backticks and
${...}. - Press Check answer to test it.
Español
Ahora tú intentas
- Usa comillas invertidas y
${...}. - Pulsa Check answer para comprobarlo.
let name = "Sam". Use a template literal (backticks) to log Hello, Sam!. · let name = "Sam". Usa una cadena de plantilla (comillas invertidas) para registrar Hello, Sam!.
Click Run to see the output here. · Haz clic en Ejecutar para ver la salida aquí.
a is 3 and · y b is 4. Use a template literal to log 3 + 4 = 7 (put a + b inside ${ }). · a es 3 y b es 4. Usa una cadena de plantilla para registrar 3 + 4 = 7 (coloca a + b dentro de ${ }).
Click Run to see the output here. · Haz clic en Ejecutar para ver la salida aquí.
Use a template literal to log Total: 10, working out the 10 as 5 * 2 inside ${ }. · Usa una cadena de plantilla para registrar Total: 10, calculando el 10 como 5 * 2 dentro de ${ }.
Click Run to see the output here. · Haz clic en Ejecutar para ver la salida aquí.