Synonymer:
Skabelon bogstaver
Skabelonstrenge
String skabeloner
Back-Tics syntaks
Skabelonbogstaver brug tilbagemarkeringer (``) i stedet for anførselstegnene ("") til at definere en streng:
let text = `Hello World!`;Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Template Literals</h2>
<p>Template literals use back-ticks (``) to define a string:</p>
<p id="demo"></p>
<p>Template literals are not supported in Internet Explorer.</p>
<script>
let text = `Hello world!`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Med skabelonliterals kan du bruge både enkelte og dobbelte anførselstegn inde i en streng:
let text = `He's often called "Johnny"`;Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Template Literals</h2>
<p>With back-ticks, you can use both single and double quotes inside a string:</p>
<p id="demo"></p>
<p>Template literals are not supported in Internet Explorer.</p>
<script>
let text = `He's often called "Johnny"`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Skabelonliteral tillader strenge med flere linjer:
let text =
`The quick
brown fox
jumps over
the lazy dog`;Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Template Literals</h2>
<p>Template literals allows multiline strings:</p>
<p id="demo"></p>
<p>Template literals are not supported in Internet Explorer.</p>
<script>
let text =
`The quick
brown fox
jumps over
the lazy dog`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Skabelonliteral giver en nem måde at interpolere variable og udtryk i strenge.
Metoden kaldes strenginterpolation.
Syntaksen er:
${...}Skabelonliteral tillader variabler i strenge:
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Template Literals</h2>
<p>Template literals allows variables in strings:</p>
<p id="demo"></p>
<p>Template literals are not supported in Internet Explorer.</p>
<script>
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Automatisk udskiftning af variabler med reelle værdier kaldes strenginterpolation.
Skabelonliteral tillader udtryk i strenge:
let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Template Literals</h2>
<p>Template literals allows variables in strings:</p>
<p id="demo"></p>
<p>Template literals are not supported in Internet Explorer.</p>
<script>
let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
document.getElementById("demo").innerHTML = total;
</script>
</body>
</html>
Automatisk udskiftning af udtryk med reelle værdier kaldes strenginterpolation.
let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
html += `<li>${x}</li>`;
}
html += `</ul>`;Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Template Literals</h2>
<p>Template literals allows variables in strings:</p>
<p id="demo"></p>
<p>Template literals are not supported in Internet Explorer.</p>
<script>
let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
html += `<li>${x}</li>`;
}
html += `</ul>`;
document.getElementById("demo").innerHTML = html;
</script>
</body>
</html>
Template Literals er en ES6-funktion (JavaScript 2015).
Det understøttes i alle moderne browsere:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
Skabelonliterals understøttes ikke i Internet Explorer.
For en komplet strengreference, gå til vores:
Komplet JavaScript-strengreference.
Referencen indeholder beskrivelser og eksempler på alle strengegenskaber og metoder.