Πώς μορφοποιείτε μια συμβολοσειρά σε JavaScript;

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

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

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

Συνένωση χορδών

Η JavaScript σάς επιτρέπει να συνενώνετε συμβολοσειρές χρησιμοποιώντας διάφορες προσεγγίσεις. Μια χρήσιμη προσέγγιση είναι η

const firstName = "Γιάννης";
const επώνυμο = "Ελαφίνα";
αφήνω stringVal;
stringVal = firstName.concat("", επίθετο);
κονσόλα.log (stringVal);

Εδώ, το concat ενώνει τα ορίσματα συμβολοσειράς (ένα κενό διάστημα και το lastName) στη συμβολοσειρά που καλεί (firstName). Στη συνέχεια, ο κώδικας αποθηκεύει τη νέα συμβολοσειρά που προκύπτει σε μια μεταβλητή (stringVal) και εκτυπώνει τη νέα τιμή στην κονσόλα του προγράμματος περιήγησης:

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

const firstName = "Γιάννης";
const middleName = "Μικρόφωνο";
const επώνυμο = "Ελαφίνα";
αφήνω stringVal;
stringVal = firstName + "" + μεσαίο όνομα + "" + επώνυμο;
κονσόλα.log (stringVal);

Ο παραπάνω κώδικας εκτυπώνει την ακόλουθη έξοδο στην κονσόλα:

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

const firstName = "Γιάννης";
const επώνυμο = "Ελαφίνα";
αφήνω stringVal;
stringVal = firstName;
stringVal += "";
stringVal += επώνυμο;
κονσόλα.log (stringVal);

Αυτός ο κώδικας προσθέτει ένα κενό διάστημα και την τιμή της μεταβλητής lastName στη μεταβλητή firstName, παράγοντας την ακόλουθη έξοδο:

Πρότυπο Literals

Τα literals προτύπων είναι μια δυνατότητα ES6 που σας επιτρέπει να μορφοποιήσετε συμβολοσειρές JavaScript. Ένα πρότυπο κυριολεκτικά χρησιμοποιεί ένα ζεύγος backtick (`) για την εμφάνιση συμβολοσειρών. Αυτή η μέθοδος μορφοποίησης συμβολοσειρών σάς επιτρέπει να εμφανίζετε πιο καθαρές συμβολοσειρές πολλαπλών γραμμών σε JavaScript.

αφήνω html;
html = `<ul>
<li> Όνομα: John Doe </li>
<li> Ηλικία: 24 </li>
<li> Εργασία: Μηχανικός Λογισμικού </li>
</ul>`;
έγγραφο.body.innerHTML = html;

Ο παραπάνω κώδικας JavaScript χρησιμοποιεί HTML για να εκτυπώσετε μια λίστα με τρία στοιχεία στο πρόγραμμα περιήγησης:

Για να επιτύχετε την ίδια έξοδο χωρίς κυριολεκτικά πρότυπα (ή πριν από τα κυριολεκτικά πρότυπα), θα χρειαστεί να χρησιμοποιήσετε εισαγωγικά. Ωστόσο, δεν θα μπορούσατε να επεκτείνετε τον κώδικα σε πολλές γραμμές, όπως μπορείτε με τα κυριολεκτικά πρότυπα.

αφήνω html;
html = "<ul><li>Όνομα: John Doe</li><li>Ηλικία: 24</li><li>Εργασία: Μηχανικός Λογισμικού</li></ul>";
έγγραφο.body.innerHTML = html;

Παρεμβολή συμβολοσειρών

Τα κυριολεκτικά πρότυπα σάς επιτρέπουν να χρησιμοποιείτε εκφράσεις στις συμβολοσειρές JavaScript μέσω μιας διαδικασίας που ονομάζεται παρεμβολή. Με την παρεμβολή συμβολοσειρών μπορείτε να ενσωματώσετε εκφράσεις ή μεταβλητές στις συμβολοσειρές σας χρησιμοποιώντας το ${expression} κράτησης θέσης. Εδώ γίνεται πραγματικά εμφανής η αξία των κυριολεκτικών προτύπων JavaScript.

ας username = "Τζέιν Ντόε";
αφήνω ηλικία = 21;
ας δουλειά = "Web Developer";
αφήνω εμπειρία = 3;
αφήνω html;
html = `<ul>
<li> Όνομα: ${userName} </li>
<li> Ηλικία: ${age} </li>
<li> Τίτλος εργασίας: ${job} </li>
<li> Χρόνια εμπειρίας: ${experience} </li>
<li> Επίπεδο προγραμματιστή: ${experience < 5? "Junior έως Intermediate": "Αρχαιότερος"} </li>
</ul>`;
έγγραφο.body.innerHTML = html;

Ο παραπάνω κώδικας παράγει την ακόλουθη έξοδο στην κονσόλα:

Τα πρώτα τέσσερα επιχειρήματα του ${expression} placeholder είναι μεταβλητές συμβολοσειράς, αλλά η πέμπτη είναι μια έκφραση υπό όρους. Η έκφραση βασίζεται στην τιμή μιας από τις μεταβλητές (εμπειρία), για να υπαγορεύσει τι πρέπει να εμφανίζει στο πρόγραμμα περιήγησης.

Μορφοποίηση στοιχείων στην ιστοσελίδα σας με JavaScript

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

Μπορεί ακόμη και να μετατρέψει HTML σε εικόνες και να τις εμφανίσει σε μια ιστοσελίδα.