Σε αυτό το σεμινάριο, θα μάθετε για το JavaScript Template Literals (Template Strings) με τη βοήθεια παραδειγμάτων.
Τα πρότυπα κυκλώματα (συμβολοσειρές προτύπων) σάς επιτρέπουν να χρησιμοποιείτε συμβολοσειρές ή ενσωματωμένες εκφράσεις με τη μορφή μιας συμβολοσειράς. Περικλείονται με backticks ``. Για παράδειγμα,
const name = 'Jack'; console.log(`Hello $(name)!`); // Hello Jack!
Σημείωση : Το πρότυπο literal παρουσιάστηκε το 2015 (επίσης γνωστό ως ECMAScript 6 ή ES6 ή ECMAScript 2015). Ορισμένα προγράμματα περιήγησης ενδέχεται να μην υποστηρίζουν τη χρήση προτύπων. Επισκεφτείτε τη Γραμματική υποστήριξη προτύπων JavaScript για να μάθετε περισσότερα.
Πρότυπα λογοτεχνικά για χορδές
Στις προηγούμενες εκδόσεις του JavaScript, θα χρησιμοποιούσατε ένα μόνο απόσπασμα ''ή ένα διπλό απόσπασμα ""για συμβολοσειρές. Για παράδειγμα,
const str1 = 'This is a string'; // cannot use the same quotes const str2 = 'A "quote" inside a string'; // valid code const str3 = 'A 'quote' inside a string'; // Error const str4 = "Another 'quote' inside a string"; // valid code const str5 = "Another "quote" inside a string"; // Error
Για να χρησιμοποιήσετε τα ίδια εισαγωγικά μέσα στη συμβολοσειρά, μπορείτε να χρησιμοποιήσετε τον χαρακτήρα διαφυγής .
// escape characters using const str3 = 'A \'quote\' inside a string'; // valid code const str5 = "Another "quote " inside a string"; // valid code
Αντί να χρησιμοποιήσετε χαρακτήρες διαφυγής, μπορείτε να χρησιμοποιήσετε τις τυποποιημένες λέξεις. Για παράδειγμα,
const str1 = `This is a string`; const str2 = `This is a string with a 'quote' in it`; const str3 = `This is a string with a "double quote" in it`;
Όπως μπορείτε να δείτε, οι γραμματοσειρές προτύπων όχι μόνο διευκολύνουν τη συμπερίληψη εισαγωγικών, αλλά και καθιστούν τον κώδικα μας πιο καθαρό.
Πολυγραμμικές συμβολοσειρές που χρησιμοποιούν πρότυπα λογοτύπων
Οι πρότυπες γραμματοσειρές διευκολύνουν επίσης την εγγραφή πολυγραμμικών χορδών. Για παράδειγμα,
Χρησιμοποιώντας το πρότυπο γραμματοσειράς, μπορείτε να το αντικαταστήσετε
// using the + operator const message1 = 'This is a long message' + 'that spans across multiple lines' + 'in the code.' console.log(message1)
με
const message1 = `This is a long message that spans across multiple lines in the code.` console.log(message1)
Το αποτέλεσμα και των δύο αυτών προγραμμάτων θα είναι το ίδιο.
Αυτό είναι ένα μεγάλο μήνυμα που εκτείνεται σε πολλές γραμμές στον κώδικα.
Παρεμβολή έκφρασης
Πριν από το JavaScript ES6, θα χρησιμοποιούσατε τον +τελεστή για να συνδυάσετε μεταβλητές και εκφράσεις σε μια συμβολοσειρά. Για παράδειγμα,
const name = 'Jack'; console.log('Hello ' + name); // Hello Jack
Με τα γράμματα προτύπων, είναι λίγο πιο εύκολο να συμπεριλάβετε μεταβλητές και εκφράσεις μέσα σε μια συμβολοσειρά. Για αυτό, χρησιμοποιούμε τη $(… )σύνταξη.
const name = 'Jack'; console.log(`Hello $(name)`); // template literals used with expressions const result = `The sum of 4 + 5 is $(4 + 5)`; console.log(result); console.log(`$(result < 10 ? 'Too low': 'Very high')`)
Παραγωγή
Γεια σου Jack Το άθροισμα των 4 + 5 είναι 9 Πολύ υψηλό
Η διαδικασία εκχώρησης μεταβλητών και εκφράσεων εντός του προτύπου κυριολεκτικά είναι γνωστή ως παρεμβολή.
Πρότυπα με ετικέτα
Κανονικά, θα χρησιμοποιούσατε μια συνάρτηση για να περάσετε ορίσματα. Για παράδειγμα,
function tagExample(strings) ( return strings; ) // passing argument const result = tagExample('Hello Jack'); console.log(result);
Ωστόσο, μπορείτε να δημιουργήσετε πρότυπα με ετικέτες (που συμπεριφέρονται σαν μια συνάρτηση) χρησιμοποιώντας τα γράμματα προτύπων. Χρησιμοποιείτε ετικέτες που σας επιτρέπουν να αναλύσετε τα γράμματα προτύπων με μια συνάρτηση.
Το πρότυπο με ετικέτα γράφεται σαν ορισμός συνάρτησης Ωστόσο, δεν περνά παρενθέσεις ()όταν καλείτε το κυριολεκτικό. Για παράδειγμα,
function tagExample(strings) ( return strings; ) // creating tagged template const result = tagExample`Hello Jack`; console.log(result);
Παραγωγή
("Γεια σου Τζακ")
Ένας πίνακας τιμών συμβολοσειρών μεταβιβάζεται ως το πρώτο όρισμα μιας συνάρτησης ετικέτας. Θα μπορούσατε επίσης να περάσετε τις τιμές και τις εκφράσεις ως τα υπόλοιπα ορίσματα. Για παράδειγμα,
const name = 'Jack'; const greet = true; function tagExample(strings, nameValue) ( let str0 = strings(0); // Hello let str1 = strings(1); // , How are you? if(greet) ( return `$(str0)$(nameValue)$(str1)`; ) ) // creating tagged literal // passing argument name const result = tagExample`Hello $(name), How are you?`; console.log(result);
Παραγωγή
Γεια σου Τζακ, πώς είσαι;
Με αυτόν τον τρόπο, μπορείτε επίσης να μεταβιβάσετε πολλά ορίσματα στην ετικέτα temaplate.
