JavaScript-mallin kirjaimet


Sisällysluettelo

    Näytä sisällysluettelo

Synonyymit:

  • Mallin kirjaimet

  • Mallin merkkijonot

  • Merkkijonomallit

  • Back-Tics-syntaksi

Back-Tics-syntaksi

Mallikirjaimet käyttävät merkkijonoa (``) lainausmerkkien ("") sijaan merkkijonon määrittämiseen:

Esimerkki

let text = `Hello World!`;

Kokeile itse →

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

Sitaatit Inside Strings

Mallikirjaimilla voit käyttää merkkijonon sisällä sekä lainausmerkkejä että kaksoislainausmerkkejä:

Esimerkki

let text = `He's often called "Johnny"`;

Kokeile itse →

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

Moniriviset merkkijonot

Malliliteraalit sallii moniriviset merkkijonot:

Esimerkki

let text =
`The quick
brown fox
jumps over
the lazy dog`;

Kokeile itse →

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

Interpolointi

Malliliteraalit tarjoavat helpon tavan interpoloida muuttujia ja lausekkeita merkkijonoiksi.

Menetelmää kutsutaan merkkijonointerpolaatioksi.

Syntaksi on:

${...}


Muuttujan vaihdot

Malliteraalit sallivat muuttujat merkkijonoissa:

Esimerkki

let firstName = "John";
let lastName = "Doe";

let text = `Welcome ${firstName}, ${lastName}!`;

Kokeile itse →

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

Muuttujien automaattista korvaamista todellisilla arvoilla kutsutaan merkkijonointerpolaatioksi.


Ilmaisun korvaaminen

Malliliteraalit sallivat lausekkeet merkkijonoissa:

Esimerkki

let price = 10;
let VAT = 0.25;

let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

Kokeile itse →

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

Lausekkeiden automaattista korvaamista todellisilla arvoilla kutsutaan merkkijonointerpolaatioksi.


HTML-malleja

Esimerkki

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

Kokeile itse →

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

Selaimen tuki

Mallikirjaimet on ES6-ominaisuus (JavaScript 2015).

Sitä tuetaan kaikissa nykyaikaisissa selaimissa:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

Mallikirjaimia ei tueta Internet Explorerissa.

Täydellinen merkkijonoviittaus

Täydellisen merkkijonoviitteen saat osoitteesta:

Täydellinen JavaScript-merkkijonoviittaus.

Viite sisältää kuvauksia ja esimerkkejä kaikista merkkijonon ominaisuuksista ja menetelmistä.