Τι είναι template literals;

Question

Accepted Answer

Τα **template literals** χρησιμοποιούν backticks (`` ` ``) και προσθέτουν δύο πράγματα που στερούνται τα συνηθισμένα εισαγωγικά: **interpolation** εκφράσεων και **multi-line** συμβολοσειρές. ```js const name = "Ann"; const count = 3; // interpolation: ${expression} const msg = `Hi ${name}, you have ${count} new messages`; // any expression works, not just variables const total = `Total: ${(count * 1.1).toFixed(2)}`; // multi-line — preserves the line breaks const html = `

${name}

`; ``` Πριν από τα template literals θα έγραφες `"Hi " + name + ", " + count + ...` — περιεκτικό και επιρρεπές σε σφάλματα. Το interpolation διαβάζεται πολύ καλύτερα. ## Tagged templates (advanced) Μια συνάρτηση τοποθετημένη πριν από τα backticks λαμβάνει τα μέρη της συμβολοσειράς και τις παρεμβαλλόμενες τιμές, επιτρέποντάς της να τα επεξεργαστεί: ```js function highlight(strings, ...values) { return strings.reduce((out, s, i) => out + s + (values[i] ? `${values[i]}` : ""), ""); } highlight`Hello ${name}!`; // "Hello Ann!" ``` Αυτό δίνει δύναμη σε βιβλιοθήκες όπως **styled-components** και ασφαλείς βοηθούς escaping SQL/HTML. ## Γιατί έχει σημασία Τα template literals είναι ο τυπικός τρόπος δημιουργίας συμβολοσειρών σήμερα — αναγνώσιμο interpolation, εύκολο multi-line κείμενο και ένα hook (tagged templates) για DSLs.