Frontend Academy · Lektion

Template literals og optional chaining

Indlejr udtryk i strenge med template literals, tilgå indlejrede egenskaber sikkert med ?., og kortslut med nullish coalescing-operatoren ??.

Lektion 3 af 413 trin

Template literals og optional chaining er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Skabelonliteraler: strenge med backticks

Skabelonliteraler (strenge med backticks) understøtter strenge over flere linjer og indlejrede udtryk. De erstatter strengsammenkædning med + og gør hensigten tydeligere.

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

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

Skabelonliteraler over flere linjer

Skabelonliteraler bevarer linjeskift og indrykning. Du behøver ikke længere \n eller strengsammenkædning over flere linjer.

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

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

Udtryk i skabelonliteraler

Ethvert JavaScript-udtryk kan stå i ${}: ternære udtryk, funktionskald, aritmetik og metodekald.

const tax = 0.2;
const price = 50;
const receipt = `
  Subtotal: $${price}
  Tax (${tax * 100}%): $${price * tax}
  Total: $${price * (1 + tax)}
  ${isPaid ? 'PAID' : 'UNPAID'}
`;

Taggede skabelonliteraler

En tagget skabelon kalder en funktion med strengdelene og de interpolerede værdier som argumenter. Det bruges af biblioteker som styled-components, GraphQL (gql``) og sql`` til sikker opbygning af forespørgsler.

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

Valgfri kædning: ?.

Operatoren til valgfri kædning ?. giver undefined i stedet for at kaste en TypeError, hvis venstresiden er null eller undefined. Den fjerner behovet for defensive null-tjek.

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

Valgfrie metodekald

obj?.method() kalder kun metoden, hvis obj ikke er null/undefined. Hvis obj er null, returnerer den undefined uden at kaste en fejl.

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

Nullish coalescing: ??

Operatoren til nullish coalescing ?? returnerer højresiden, kun hvis venstresiden er null eller undefined (ikke blot falsk). I modsætning til || regner den ikke 0 eller '' for 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!)

Nullish-tildeling: ??=

a ??= b tildeler b til a, kun hvis a er null eller undefined. Det er en kortere form for a = a ?? b. Det er nyttigt til betinget initialisering af objektegenskaber.

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

Logiske tildelingsoperatorer

&&= tildeler kun, hvis venstresiden evalueres som sand. ||= tildeler kun, hvis venstresiden evalueres som falsk. Sammen med ??= gør de betingede tildelinger kortfattede.

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

Kombinér ?. og ??

Kombinér valgfri kædning og nullish coalescing for sikker adgang til egenskaber med en standardværdi.

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

Strengmetoder, du skal kende

Almindelige strengmetoder: 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'

Hurtig test

Hvad returnerer const val = obj?.foo?.bar ?? 'default', hvis obj er null?

Besvar den i den interaktive lektion

Opsummering: Skabelonliteraler og valgfri kædning

Backtick-strenge understøtter udtryk og flere linjer. Taggede skabeloner muliggør DSL'er. ?. giver sikker adgang til egenskaber uden null-tjek. ?? angiver en standardværdi, når værdien er null/undefined (ikke bare falsk). Kombinér dem for sikker og læsbar dataadgang med standardværdier.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Template literals og optional chaining” gratis?

Ja — hele teksten til “Template literals og optional chaining” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Template literals og optional chaining”?

Indlejr udtryk i strenge med template literals, tilgå indlejrede egenskaber sikkert med ?., og kortslut med nullish coalescing-operatoren ??. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Template literals og optional chaining”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Frontend Academy