Template literals
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Esta página precisa de um navegador recente (com suporte a SharedArrayBuffer). Por favor, atualize Chrome, Edge, Firefox ou Safari para a versão mais recente.
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
+.
Português
Uma forma mais limpa de construir strings
- Envolver uma string em backticks
`permite inserir valores diretamente com${...}. - Esta é uma literal de modelo — muito mais limpa do que juntar com muitas
+.
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.
Português
Qualquer expressão cabe dentro de ${ }
- O que quer que você escreva dentro de
${...}é calculado primeiro, depois inserido na string.
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.
Português
Mesma string, duas formas
+e uma literal de modelo podem construir exatamente o mesmo texto.- Em crases, espaços e pontuação ficam onde você digita, então um espaço faltando é fácil de ver.
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.
Português
Atenção
- Backticks
`não são iguais a aspas'ou".${...}só funciona dentro de backticks. - Bônus: uma string de crase pode ocupar várias linhas — útil para mensagens maiores.
English
Common mistakes
- Template literals use backticks and
${...}:`Hi ${name}`, not quotes. - Inside
${...}you can put any expression.
Português
Erros comuns
- Literais de modelo usam backticks e
${...}:`Hi ${name}`, não aspas. - Dentro de
${...}você pode colocar qualquer expressão.
English
Now you try
- Use backticks and
${...}. - Press Check answer to test it.
Português
Agora você tenta
- Use crases e
${...}. - Pressione Check answer para testá-lo.
let name = "Sam". Use a template literal (backticks) to log Hello, Sam!. · let name = "Sam". Use um template literal (crases) para fazer log de Hello, Sam!.
Click Run to see the output here. · Clique em Executar para ver a saída aqui.
a is 3 and · e b is 4. Use a template literal to log 3 + 4 = 7 (put a + b inside ${ }). · a é 3 e b é 4. Use um template literal para fazer log de 3 + 4 = 7 (coloque a + b dentro de ${ }).
Click Run to see the output here. · Clique em Executar para ver a saída aqui.
Use a template literal to log Total: 10, working out the 10 as 5 * 2 inside ${ }. · Use um template literal para fazer log de Total: 10, calculando o 10 como 5 * 2 dentro de ${ }.
Click Run to see the output here. · Clique em Executar para ver a saída aqui.