Μορφή συμβολοσειράς JavaScript - Πώς να χρησιμοποιήσετε την παρεμβολή συμβολοσειράς στο JS

Η προσθήκη των κυριολεκτικών προτύπων στο ECMAScript 6 (ES6) μας επιτρέπει να παρεμβάλλουμε συμβολοσειρές σε JavaScript.

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

const age = 4.5; const earthAge = `Earth is estimated to be ${age} billion years old.`; console.log(earthAge); 

Πρώτα απ 'όλα, θα δείτε ότι χρησιμοποιούμε backticks για πρότυπα κυριολεκτικά. Εκτός αυτού, έχουμε επίσης τη μορφή ${placeholder}, η οποία μας επιτρέπει να εισάγουμε μια δυναμική τιμή στη συμβολοσειρά. Οτιδήποτε μέσα ${}αξιολογείται ως JavaScript.

Για παράδειγμα, θα μπορούσαμε να γράψουμε Earth is estimated to be ${age + 10} billion years old.και θα λειτουργούσε σαν να το κάναμε const age = 4.5 + 10;.

Πώς το κάναμε πριν;

Πριν από τα πρότυπα κυριολεκτικά, θα το κάναμε έτσι:

const earthAge = "Earth is estimated to be " + age + " billion years old."; 

Όπως μπορείτε να δείτε, έχουμε ήδη πολλά αποσπάσματα για μια απλή συμβολοσειρά. Φανταστείτε ότι πρέπει να εισαγάγουμε μια χούφτα μεταβλητών. Μπορεί γρήγορα να μετατραπεί σε μια περίπλοκη συμβολοσειρά που δεν είναι πολύ ευανάγνωστη. Έτσι, οι γραμματοσειρές προτύπων καθιστούν τις χορδές καθαρότερες και πιο ευανάγνωστες.

Ωστόσο, αυτό είναι μόνο μία περίπτωση. Ας δούμε περισσότερες περιπτώσεις χρήσης για τις τυποποιημένες γραμματοσειρές.

Πολλαπλές σειρές

Μια άλλη εύχρηστη χρήση συμβολοσειρών προτύπων είναι συμβολοσειρές πολλαπλών γραμμών. Πριν από τα πρότυπα κυριολεκτικά, χρησιμοποιήσαμε \nγια νέες γραμμές, όπως στο console.log('line 1\n' + 'line 2').

Για δύο γραμμές, αυτό μπορεί να είναι καλό. Αλλά φανταστείτε ότι θέλουμε πέντε γραμμές. Και πάλι, η συμβολοσειρά καθίσταται άσκοπα περίπλοκη.

const earthAge = `Earth is estimated to be ${age} billion years old. Scientists have scoured the Earth searching for the oldest rocks to radiometrically date. In northwestern Canada, they discovered rocks about 4.03 billion years old. `; 

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

Ως άσκηση, προσπαθήστε να μετατρέψετε την παραπάνω συμβολοσειρά σε συνένωση και νέα γραμμή \n.

Εκφράσεις

Με τις τυπογραφικές προτάσεις, μπορούμε επίσης να χρησιμοποιήσουμε εκφράσεις στις χορδές. Τι σημαίνει αυτό?

Για παράδειγμα, θα μπορούσαμε να χρησιμοποιήσουμε μαθηματικές εκφράσεις όπως πολλαπλασιάζοντας δύο αριθμούς. Το παρακάτω απόσπασμα δείχνει ακριβώς ότι:

const firstNumber = 10; const secondNumber = 39; const result = `The result of multiplying ${firstNumber} by ${secondNumber} is ${firstNumber * secondNumber}.`; console.log(result); 

Χωρίς τυποποιημένα γράμματα, θα πρέπει να κάνουμε κάτι τέτοιο:

const result = "The result of multiplying " + firstNumber + " by " + secondNumber + " is " + firstNumber * secondNumber + "."; 

Το γράψιμο μιας συμβολοσειράς όπως τα παραπάνω μπορεί γρήγορα να γίνει περίπλοκο και να προκαλέσει σύγχυση. Καθώς συνεχίζουμε να βλέπουμε, οι γραμματοσειρές προτύπων καθιστούν ευκολότερη και πιο κομψή την ενσωμάτωση εκφράσεων στη συμβολοσειρά.

Τερματικός χειριστής

Με την παρεμβολή συμβολοσειρών, μπορούμε ακόμη και να χρησιμοποιήσουμε έναν τριμερή τελεστή μέσα σε μια συμβολοσειρά. Αυτό μας επιτρέπει να ελέγξουμε την τιμή μιας μεταβλητής και να εμφανίσουμε διαφορετικά πράγματα ανάλογα με αυτήν την τιμή.

Ας δούμε το παρακάτω παράδειγμα:

const drinks = 4.99; const food = 6.65; const total = drinks + food; const result = `The total bill is ${total}. ${total > 10 ? `Your card payment will be declined` : `Your card payment will be accepted`}.` console.log(result); 

Στο παραπάνω παράδειγμα, ελέγχουμε αν το συνολικό ποσό είναι περισσότερο από δέκα δολάρια, για παράδειγμα.

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

συμπέρασμα

Η προσθήκη γραμματοσειρών προτύπων στο ES6 μας επιτρέπει να γράφουμε καλύτερα, συντομότερα και πιο ξεκάθαρα. Μας δίνει επίσης τη δυνατότητα να εισάγουμε μεταβλητές και εκφράσεις σε οποιαδήποτε συμβολοσειρά. Ουσιαστικά, ό, τι γράφετε μέσα στις αγκύλες ( ${}) αντιμετωπίζεται ως JavaScript.

Έτσι, μπορούμε να χρησιμοποιήσουμε τα πρότυπα κυριολεκτικά για:

  • γράψτε συμβολοσειρές πολλαπλών γραμμών
  • ενσωματώστε εκφράσεις
  • γράψτε συμβολοσειρές με τον τριμερή τελεστή

Αν σας αρέσει αυτό που γράφω, πιθανότατα θα λατρέψετε αυτό που στέλνω μέσω email. Σκεφτείτε να εγγραφείτε στη λίστα αλληλογραφίας μου. Εάν δεν είστε λάτρης των ενημερωτικών δελτίων , μπορούμε πάντα να διατηρούμε επαφή στο Twitter .