Πρότυπο JavaScript Literals

Πίνακας περιεχομένων

Συνώνυμα:

Πρότυπο Literals
Συμβολοσειρές προτύπων
Πρότυπα συμβολοσειρών
Σύνταξη Back-Tics

Σύνταξη Back-Tics

Τα Κυριολεκτικά προτύπων χρησιμοποιούν back-ticks (``) αντί για εισαγωγικά ("") για να ορίσουν μια συμβολοσειρά:

Παράδειγμα

let text = `Hello World!`;

Δοκιμάστε το μόνοι σας →

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

Εισαγωγικά μέσα σε χορδές

Με τα literals προτύπου, μπορείτε να χρησιμοποιήσετε τόσο μονά όσο και διπλά εισαγωγικά μέσα σε μια συμβολοσειρά:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Χορδές πολλαπλών γραμμών

Τα Κυριολεκτικά πρότυπα επιτρέπουν συμβολοσειρές πολλαπλών γραμμών:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Παρεμβολή

Οι κυριολεκτικά πρότυπα παρέχουν έναν εύκολο τρόπο παρεμβολής μεταβλητών και εκφράσεων σε συμβολοσειρές.

Η μέθοδος ονομάζεται παρεμβολή συμβολοσειρών.

Η σύνταξη είναι:

${...}

Μεταβλητές Αντικαταστάσεις

Οι κυριολεκτικά προτύπου επιτρέπουν μεταβλητές σε συμβολοσειρές:

Παράδειγμα

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

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

Δοκιμάστε το μόνοι σας →

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

Η αυτόματη αντικατάσταση μεταβλητών με πραγματικές τιμές ονομάζεται παρεμβολή συμβολοσειρών.

Αντικατάσταση έκφρασης

Κυριολεκτικά πρότυπα επιτρέπουν εκφράσεις σε συμβολοσειρές:

Παράδειγμα

let price = 10;
let VAT = 0.25;

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

Δοκιμάστε το μόνοι σας →

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

Η αυτόματη αντικατάσταση παραστάσεων με πραγματικές τιμές ονομάζεται παρεμβολή συμβολοσειρών.

Πρότυπα HTML

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!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 είναι μια δυνατότητα ES6 (JavaScript 2015).

Υποστηρίζεται σε όλα τα σύγχρονα προγράμματα περιήγησης:


Chrome	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

Το Κυριολεκτικά προτύπων δεν υποστηρίζεται στον Internet Explorer.

Πλήρης αναφορά συμβολοσειράς

Για μια πλήρη αναφορά String, μεταβείτε στη διεύθυνση μας:

Ολοκληρώστε την αναφορά συμβολοσειράς JavaScript.

Η αναφορά περιέχει περιγραφές και παραδείγματα όλων των ιδιοτήτων και μεθόδων συμβολοσειράς.