0Pricing
Frontend Academy · Aula

Literais de template e encadeamento opcional

Inclua expressões em strings com literais de template, acesse propriedades aninhadas com segurança usando ?. e interrompa a avaliação com o operador de coalescência nula ??.

Literais de template e encadeamento opcional é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Literais de modelo: cadeias com crase

Os literais de modelo (cadeias com crase) permitem cadeias de várias linhas e expressões incorporadas. Eles substituem a concatenação de cadeias com + e tornam a intenção mais clara.

// String concatenation (old way):
const msg = 'Hello, ' + name + '! You have ' + count + ' messages.';

// Template literal (modern):
const msg2 = `Hello, ${name}! You have ${count} messages.`;

Literais de modelo de várias linhas

Os literais de modelo preservam quebras de linha e indentação. Não é mais necessário usar \n nem concatenar cadeias em várias linhas.

const html = `
  <div class="card">
    <h2>${title}</h2>
    <p>${body}</p>
  </div>
`;

const sql = `
  SELECT *
  FROM users
  WHERE age > ${minAge}
  ORDER BY name
`;

Expressões em literais de modelo

Qualquer expressão JavaScript pode ser inserida em ${}: operadores ternários, chamadas de funções, operações aritméticas e chamadas de 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'}
`;

Literais de modelo etiquetados

Um literal de modelo etiquetado chama uma função, passando as partes da cadeia e os valores interpolados como argumentos. É usado por bibliotecas como styled-components, GraphQL (gql``) e sql`` para construir consultas com segurança.

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.`;

Encadeamento opcional: ?.

O operador de encadeamento opcional ?. interrompe a avaliação e retorna undefined em vez de lançar um TypeError se o lado esquerdo for nulo ou indefinido. Isso elimina verificações defensivas de 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 error

Chamadas opcionais de métodos

obj?.method() chama o método somente se obj não for nulo nem indefinido. Se obj for nulo, retorna undefined sem lançar um erro.

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 null

Coalescência de nulos: ??

O operador de coalescência de nulos ?? retorna o lado direito somente quando o lado esquerdo é null ou undefined (e não apenas falso). Ao contrário de ||, ele não trata 0 nem '' como valores nulos.

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!)

Atribuição por coalescência de nulos: ??=

a ??= b atribui b a a somente se a for nulo ou indefinido. É uma forma abreviada de a = a ?? b. É útil para inicializar propriedades de objetos condicionalmente.

let cache = {};
function getUser(id) {
  cache[id] ??= fetchUser(id); // only fetch if not cached
  return cache[id];
}

Operadores de atribuição lógica

&&= atribui somente se o lado esquerdo for avaliado como verdadeiro. ||= atribui somente se o lado esquerdo for avaliado como falso. Junto com ??=, eles tornam as atribuições condicionais concisas.

user.name ||= 'Anonymous';  // set if falsy
user.role &&= user.role.toLowerCase(); // transform if exists

Combinando ?. e ??

Combine o encadeamento opcional e a coalescência de nulos para acessar propriedades com segurança e fornecer um valor padrão.

const city = user?.address?.city ?? 'Unknown';
const total = cart?.items?.length ?? 0;

Métodos de cadeias de caracteres que precisa conhecer

Métodos comuns de cadeias de caracteres: 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'

Verificação rápida

O que const val = obj?.foo?.bar ?? 'default' retorna se obj for null?

Recapitulação: literais de modelo e encadeamento opcional

As cadeias com crase permitem expressões e várias linhas. Os literais de modelo etiquetados possibilitam DSLs. ?. acessa propriedades com segurança, sem verificações de nulos. ?? fornece um valor padrão quando o valor é nulo ou indefinido (e não apenas falso). Combine-os para obter acesso seguro e legível aos dados, com valores padrão.

Perguntas Frequentes

A aula “Literais de template e encadeamento opcional” é grátis?

Sim — o texto completo de “Literais de template e encadeamento opcional” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Literais de template e encadeamento opcional”?

Inclua expressões em strings com literais de template, acesse propriedades aninhadas com segurança usando ?. e interrompa a avaliação com o operador de coalescência nula ??. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Literais de template e encadeamento opcional”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Métodos de array: map filter reduce find
  2. Desestruturação e spread de objetos
  3. Literais de template e encadeamento opcional
  4. Módulos: import e export
← Voltar para Frontend Academy