Spring til indhold
Academi.dk

JavaScript

Skabelonstrenge

Begynder DA↔EN-ordliste

En skabelonstreng skrives med baglæns apostroffer i stedet for anførselstegn og lader dig sætte variabler direkte ind i teksten med dollartegn og krølleparentes. Den kan også fylde flere linjer, og den gør al tekstsammensætning lettere at læse.

Forudsætter, at du har set variabler i javascript .

Plusser bliver hurtigt uoverskuelige

Sådan har du sat tekst sammen indtil nu:

Eksempel 
const navn = "Ida";
const alder = 21;

console.log("Hej " + navn + ", du er " + alder + " år gammel.");

Output

Tryk på “Kør koden”.

Det virker, men tæl anførselstegnene. Mellemrummene skal ligge de rigtige steder, og en glemt plus giver en syntaksfejl. Der findes en pænere måde.

Eksempel 
const navn = "Ida";
const alder = 21;

console.log(`Hej ${navn}, du er ${alder} år gammel.`);

Output

Tryk på “Kør koden”.

Teksten står mellem baglæns apostroffer (tasten til venstre for backspace på et dansk tastatur, ofte med Shift). Alt inde i ${…} bliver regnet ud og sat ind som tekst.

Der må stå et regnestykke indeni

Det behøver ikke være en variabel. Alt, der giver en værdi, kan stå der.

Eksempel 
const antal = 3;
const styk = 49.5;

console.log(`Total: ${antal * styk} kr.`);
console.log(`Status: ${antal > 0 ? "på lager" : "udsolgt"}`);

Output

Tryk på “Kør koden”.

Den sidste er et ternært udtryk: betingelse, spørgsmålstegn, værdi hvis sand, kolon, værdi hvis falsk. Det er en kort if, og den bruges ofte netop her.

Flere linjer

En almindelig tekst må ikke gå over flere linjer. Det må en skabelonstreng.

Eksempel 
const navn = "Omar";

const brev = `Kære ${navn}

Du er tilmeldt kurset.

Venlig hilsen
Studiekontoret`;

console.log(brev);

Output

Tryk på “Kør koden”.

Det bruges hele tiden, når du bygger HTML i JavaScript. Se DOM.

Når du får brug for tegnet selv

Skal der stå en baglæns apostrof eller et dollartegn efterfulgt af en krølleparentes i teksten, sætter du en omvendt skråstreg foran.

Eksempel 
console.log(`Et dollartegn: \${ikke en variabel}`);

Output

Tryk på “Kør koden”.

Det er sjældent, men det dukker op, når man skriver om kode i kode.

Kort opsamling

  • Baglæns apostroffer i stedet for anførselstegn.
  • ${…} sætter en værdi ind i teksten.
  • Flere linjer er tilladt.
  • Brug textContent frem for HTML-skabeloner, når indholdet kommer fra brugeren.

Læs videre

Senest gennemgået .