Τα Template Literals είναι μια σύγχρονη λειτουργία της JavaScript που επιτρέπει τη σύνθεση πιο πολύπλοκων συμβολοσειρών χρησιμοποιώντας συντακτικό μεταβλητής.
Η σύνταξη των Template Literals χρησιμοποιεί το σύμβολο πλάγιας κάθετου () για τον ορισμό της συμβολοσειράς και τα ${} για να ενσωματώσει μεταβλητές ή παραστάσεις μέσα στη συμβολοσειρά. Αυτό επιτρέπει την ευκολότερη σύνθεση δυναμικών συμβολοσειρών.
Εδώ είναι ένα παράδειγμα χρήσης των Template Literals:
var name = "John";
var age = 30;
var message = `My name is ${name} and I am ${age} years old.`;
console.log(message); // Εμφανίζει: "My name is John and I am 30 years old."
Στο παράδειγμα παραπάνω, χρησιμοποιούμε τα Template Literals για να δημιουργήσουμε μια συμβολοσειρά με δυναμική τιμή. Οι μεταβλητές name και age ενσωματώνονται μέσω των ${} για να δημιουργήσουν το τελικό μήνυμα.
Τα Template Literals χρησιμοποιούν πλάγιές καθέτους (”) αντί για εισαγωγικά (“”) για τον ορισμό μιας συμβολοσειράς.
Η σύνταξη με τα πλάγιές καθέτους (”) είναι η εξής:
var message = `This is a template literal`;
Η χρήση των πλάγιων κάθετων σας επιτρέπει να δημιουργήσετε μια συμβολοσειρά που περιέχει μεταβλητές ή παραστάσεις μέσα σε ειδικά σύμβολα ${}. Μπορείτε να ενσωματώσετε τις μεταβλητές ή τις παραστάσεις μέσα στη συμβολοσειρά χρησιμοποιώντας απλά τη σύνταξη ${}. Αυτό επιτρέπει ευκολότερη και πιο αναγνώσιμη σύνθεση δυναμικών συμβολοσειρών.
Εδώ είναι ένα παράδειγμα χρήσης των Template Literals με τα πλάγια κάθετα:
var name = "Γιάννης";
var age = 30;
var message = `Το όνομά μου είναι ${name} και είμαι ${age} ετών.`;
console.log(message); // Εμφανίζει: "Το όνομά μου είναι Γιάννης και είμαι 30 ετών."
Στο παράδειγμα παραπάνω, χρησιμοποιούμε τα Template Literals με τα πλάγια κάθετα για να δημιουργήσουμε μια συμβολοσειρά που περιλαμβάνει δυναμικές τιμές. Η μεταβλητή name και η μεταβλητή age ενσωματώνονται μέσω της σύνταξης ${} για να δημιουργήσουν το τελικό μήνυμα.
Με τα template literals, μπορείτε να χρησιμοποιήσετε τόσο μονά όσο και διπλά εισαγωγικά μέσα σε μια συμβολοσειρά.
[adinserter block=”2″]
Εδώ είναι ένα παράδειγμα που δείχνει πώς μπορείτε να χρησιμοποιήσετε μονά και διπλά εισαγωγικά μέσα σε μια συμβολοσειρά:
var message1 = `Αυτή είναι μια συμβολοσειρά με μονά εισαγωγικά: 'Γεια σας!'`; var message2 = `Αυτή είναι μια συμβολοσειρά με διπλά εισαγωγικά: "Hello!"`; console.log(message1); // Εμφανίζει: Αυτή είναι μια συμβολοσειρά με μονά εισαγωγικά: 'Γεια σας!' console.log(message2); // Εμφανίζει: Αυτή είναι μια συμβολοσειρά με διπλά εισαγωγικά: "Hello!"
Όπως μπορείτε να δείτε, μπορείτε να χρησιμοποιήσετε μονά εισαγωγικά μέσα σε μια συμβολοσειρά που έχει οριστεί με χρήση πλάγιων κάθετων (), και μπορείτε επίσης να χρησιμοποιήσετε διπλά εισαγωγικά. Αυτό είναι χρήσιμο όταν χρειάζεστε να περιλάβετε εισαγωγικά μέσα σε μια συμβολοσειρά χωρίς να πρέπει να διακόψετε τη σύνταξη της συμβολοσειράς.
Τα template literals επιτρέπουν τη χρήση πολλαπλών γραμμών σε συμβολοσειρές.
Για να δημιουργήσετε μια πολλαπλή γραμμή συμβολοσειράς με τα template literals, μπορείτε να χρησιμοποιήσετε τα πλάγια κάθετα (”) και τα κλειστά αγκύλες ${} για να ενσωματώσετε μεταβλητές ή παραστάσεις στη συμβολοσειρά.
Εδώ είναι ένα παράδειγμα χρήσης πολλαπλών γραμμών σε μια συμβολοσειρά με τα template literals:
var message = `Αυτή είναι μια πολλαπλή γραμμή συμβολοσειράς με τα template literals και μπορεί να περιέχει πολλές γραμμές.`; console.log(message);
Στο παράδειγμα παραπάνω, η μεταβλητή message περιέχει μια πολλαπλή γραμμή συμβολοσειράς που καλύπτει πολλαπλές γραμμές κειμένου. Η συμβολοσειρά διατηρείται με την ακριβή μορφοποίηση που έχει οριστεί, συμπεριλαμβανομένων των πολλαπλών γραμμών.
Τα template literals παρέχουν έναν εύκολο τρόπο για την ενσωμάτωση μεταβλητών και παραστάσεων σε συμβολοσειρές.
Η διαδικασία αυτή ονομάζεται string interpolation ή αλλιώς ενδιάμεση συμβολοσειρά.
Για να ενσωματώσετε μια μεταβλητή ή μια παράσταση μέσα σε μια συμβολοσειρά με τα template literals, χρησιμοποιείτε τα πλάγια κάθετα (${}) και τοποθετείτε τη μεταβλητή ή την παράσταση μέσα σε αυτά.
Εδώ είναι ένα παράδειγμα χρήσης του string interpolation με τα template literals:
var name = "Γιάννης";
var age = 30;
var message = `Το όνομά μου είναι ${name} και είμαι ${age} ετών.`;
console.log(message); // Εμφανίζει: "Το όνομά μου είναι Γιάννης και είμαι 30 ετών."
Στο παράδειγμα παραπάνω, χρησιμοποιούμε τα template literals για να ενσωματώσουμε τη μεταβλητή name και τη μεταβλητή age στη συμβολοσειρά. Η σύνταξη ${} χρησιμοποιείται για την ενσωμάτωση των τιμών των μεταβλητών μέσα στη συμβολοσειρά.
Τα template literals επιτρέπουν τη χρήση παραστάσεων (expressions) μέσα σε συμβολοσειρές.
Για να χρησιμοποιήσετε μια παράσταση μέσα σε μια συμβολοσειρά με τα template literals, χρησιμοποιήστε τη σύνταξη ${} και τοποθετήστε την παράσταση μέσα σε αυτό.
Εδώ είναι ένα παράδειγμα χρήσης της έκφρασης (expression) με τα template literals:
var x = 10;
var y = 5;
var result = `The sum of ${x} and ${y} is ${x + y}.`;
console.log(result); // Εμφανίζει: "The sum of 10 and 5 is 15."
Στο παράδειγμα παραπάνω, χρησιμοποιούμε τα template literals για να ενσωματώσουμε την παράσταση x + y μέσα στη συμβολοσειρά. Η σύνταξη ${} χρησιμοποιείται για να ενσωματώσει το αποτέλεσμα της παράστασης μέσα στη συμβολοσειρά.