JavaScript String Templates

Συνώνυμα:

  • Template Literals
  • Template Strings
  • String Templates
  • Back-Tics Grammar

Back-Tics Grammar

Template literalsUse backticks (``) instead of quotes ("") to define strings:

παράδειγμα

let text = `Hello World!`;

Δοκιμάστε το προσωπικά

Quotes inside the string

By usingTemplate literals，You can use both single and double quotes in the string at the same time:

παράδειγμα

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

Δοκιμάστε το προσωπικά

Πολλαπλές γραμμές συμβολοσειράς

Template literalsΕπιτρέπεται η χρήση πολλαπλών γραμμών στη συμβολοσειρά:

παράδειγμα

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

Δοκιμάστε το προσωπικά

Συνδυασμός

Template literalsΠροσφέρει έναν απλό τρόπο για να εισάγουμε μεταβλητές και εκφράσεις σε συμβολοσειρές.

Αυτή η μέθοδος ονομάζεται συνδυασμός συμβολοσειρών (string interpolation).

Γραμματική

${...}

Αντικατάσταση μεταβλητών

Template literalsΕπιτρέπεται η χρήση μεταβλητών μέσα στη συμβολοσειρά:

παράδειγμα

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

Δοκιμάστε το προσωπικά

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

Αντικατάσταση εκφράσεων

Template literalsΕπιτρέπεται η χρήση εκφράσεων μέσα στη συμβολοσειρά:

παράδειγμα

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

Δοκιμάστε το προσωπικά

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

HTML template

παράδειγμα

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

Δοκιμάστε το προσωπικά

Υποστήριξη περιηγητών

Το Internet Explorer δεν υποστηρίζειTemplate literals.

Η πρώτη έκδοση περιηγητή που υποστηρίζει τα template literals είναι:

Chrome IE Firefox Safari Opera
Chrome 41 Edge 13 Firefox 34 Safari 10 Opera 29
Μάρτιος 2015 Νοέμβριος 2015 Δεκέμβριος 2014 Σεπτέμβριος 2016 Απρίλιος 2015

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

Για πλήρη αναφορά, παρακαλώ επισκεφθείτε το πλήρες Παράδειγμα και αναγνωριστικά χαρακτηριστικά του JavaScript String.

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