Εισαγωγή
Όταν εργάζεστε με συμβολοσειρές, μπορεί να προκύψουν καταστάσεις που απαιτούν να προσθέσουμε δυναμικά μια συγκεκριμένη τιμή σε μια τέτοια συμβολοσειρά, έτσι ώστε να επιστρέφει ακόμα μια συμβολοσειρά, η πράξη που γίνεται αυτό αναφέρεται ως παρεμβολή συμβολοσειράς.
Αυτή η δυναμική τιμή θα μπορούσε να είναι μια μεταβλητή, κατάσταση ή οτιδήποτε άλλο περιέχει την πραγματική τιμή που πρέπει να ενσωματωθεί στη συμβολοσειρά.
Σε αυτόν τον οδηγό, θα δούμε πώς να εφαρμόσουμε την παρεμβολή συμβολοσειρών στο React, λαμβάνοντας υπόψη τις διάφορες περιπτώσεις που μπορεί να απαιτούν παρεμβολή συμβολοσειρών και πώς μπορούν να επιτευχθούν.
Παρεμβολή συμβολοσειρών σε ES5 και ES6
Η παρεμβολή συμβολοσειρών μπορεί να επιτευχθεί με δύο τρόπους: τη συνένωση και τα κυριολεκτικά πρότυπα. Παρόλο που ορισμένοι υποστηρίζουν ότι η συνένωση δεν είναι παρεμβολή συμβολοσειρών, η παρεμβολή συμβολοσειρών αναφέρεται στην ικανότητα δημιουργίας συμβολοσειρών κάνοντας αντικατάσταση κράτησης θέσης, κάτι που κάνει ξεκάθαρα η συνένωση.
Πριν από την εισαγωγή των προτύπων literals στο ES6, χρησιμοποιούσαμε πάντα τη συνένωση, η οποία γίνεται πολύ δύσκολη όταν ασχολούμαστε με συμβολοσειρές πολλών γραμμών που απαιτούν την αντικατάσταση πολλών μεταβλητών. Όταν εισήχθησαν τα template literals στο ES6, αποδείχθηκαν πολύ πιο εύκολα στην εφαρμογή τους, ειδικά για μεγαλύτερες ή πολλές συμβολοσειρές στις οποίες θέλουμε να ενσωματώσουμε εκφράσεις.
Σε αυτόν τον οδηγό, θα εξετάσουμε και τις δύο μεθόδους και στη συνέχεια θα εκτελέσουμε μερικά παραδείγματα με κυριολεκτικά πρότυπα, που είναι η συνιστώμενη προσέγγιση.
Παρεμβολή συμβολοσειρών σε React With Concatenation
Η τυπική μέθοδος για τη συνένωση είναι με τη χρήση του +
τελεστής γύρω από τη συγκεκριμένη μεταβλητή ή κατάσταση:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={"font-bold text-" + fontSize}>Hello World</h1> </div> );
};
Στον παραπάνω κώδικα, έχουμε την κατάσταση του fontSize
που έχει αξία large
. Θέλουμε να γίνεται δυναμική ανάκτηση της τάξης – για παράδειγμα, θα μπορούσε να είναι text-small
, text-large
, text-medium
, κλπ. Ανάλογα με την πολιτεία, ένα διαφορετικό className
θα εφαρμοστεί έτσι στην επικεφαλίδα!
Με τη συνένωση, θα τοποθετήσουμε πρώτα την πραγματική μας συμβολοσειρά και στη συνέχεια θα χρησιμοποιήσουμε το+
τελεστής να παρεμβάλλει τη μεταβλητή με την πραγματική συμβολοσειρά, ώστε να μπορεί να επιστρέψει την παρεμβαλλόμενη τιμή:
Η παραπάνω μέθοδος γίνεται πολύπλοκη όταν είμαστε δύο ή περισσότερες μεταβλητές, και ειδικά αν οι συμβολοσειρές προστεθούν σε μια άλλη συμβολοσειρά και όχι στο τέλος.
Παρεμβολή συμβολοσειρών για αντίδραση με Literals προτύπων
Αυτή είναι η καλύτερη μέθοδος για την αντιμετώπιση της παρεμβολής συμβολοσειρών. Προστέθηκε στο ES6 και έκτοτε έχει γίνει η πιο συχνά χρησιμοποιούμενη μέθοδος για παρεμβολή συμβολοσειρών. Χρησιμοποιώντας κυριολεκτικά πρότυπα συμβολοσειράς, ας επαναλάβουμε το προηγούμενο παράδειγμα:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={`font-bold text-${fontSize}`}>Hello World</h1> </div> );
};
Όπως μπορούμε να δούμε στον παραπάνω κώδικα, δεν χρησιμοποιούμε πλέον τον τελεστή συν σε προτύπους, αντίθετα, χρησιμοποιούμε backtick για ολόκληρη τη συμβολοσειρά και, στη συνέχεια, χρησιμοποιούμε το σύμβολο του δολαρίου και τα σγουρά άγκιστρα για να εισαγάγουμε τις μεταβλητές και τις δυναμικές μας τιμές.
Η δήλωση αξιολογείται και const fontSize
εισάγεται στη συμβολοσειρά.
Ας δούμε μερικά ακόμη παραδείγματα παρεμβολής συμβολοσειρών React!
Πώς να χρησιμοποιήσετε την παρεμβολή συμβολοσειρών για να περάσετε τις τιμές στυλ στο React
Σε μια κατάσταση όπου έχουμε τα δεδομένα στυλ μας αποθηκευμένα σε μια μεταβλητή της οποίας θέλουμε να χρησιμοποιήσουμε για να διαμορφώσουμε ένα κείμενο εσωτερικά στο React, μπορούμε να χρησιμοποιήσουμε κυριολεκτικά πρότυπα:
const App = () => { const textSize = 40; return ( <div className="container"> <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1> </div> );
};
Όπως είπαμε προηγουμένως, το σύμβολο του δολαρίου και οι σγουρές τιράντες χρησιμοποιούνται για να κρατήσουν το σύμβολο κράτησης θέσης και αυτό θα επιστρέψει το στυλ με τον σωστό τρόπο:
Θα μπορούσαμε επίσης να κάνουμε αξιολόγηση μέσα στα σγουρά σιδεράκια, ας υποθέσουμε ότι θέλουμε να πολλαπλασιαστεί ο αριθμός:
<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>
Πώς να χρησιμοποιήσετε την παρεμβολή συμβολοσειρών με εκφράσεις στο React
Μέχρι στιγμής, έχουμε δει ότι μπορούμε να κάνουμε αξιολογήσεις. Είναι επίσης σημαντικό να σημειωθεί ότι μπορούμε να προσθέσουμε εκφράσεις μέσα στα σγουρά άγκιστρα για να λάβουμε τη σωστή τιμή με βάση την έκφραση και να τη χρησιμοποιήσουμε:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav ? 'mobile-nav' : ''}`}>NavBar</div> </div> );
};
Τρόπος παρεμβολής συμβολοσειράς πολλαπλών γραμμών με κυριολεκτικά πρότυπα
Όπως είπαμε νωρίτερα, οι κυριολεκτικές λέξεις του προτύπου διευκολύνουν την προσθήκη θέσεων κράτησης θέσης σε συμβολοσειρές πολλαπλών γραμμών:
const App = () => { let user = { name: 'John Doe', age: 14, hobby: 'basket ball', }; let sentence = `The fact that ${user.name} is ${user.age} years old and his hobby is ${user.hobby} amazes me.`; return ( <div className="container"> <div> <p>{sentence}</p> </div> </div> );
};
Στον παραπάνω κώδικα, βλέπουμε πόσο εύκολη είναι η χρήση των λέξεων προτύπων σε σύγκριση με τη χρήση συνένωσης:
let sentence = "The fact that " + user.name+ " is " +user.age+ " years old and his hobby is " +user.hobby+ " amazes me.";
Τρόπος χρήσης λογικών τελεστών με Literals προτύπων
Μέχρι στιγμής έχουμε δει πώς να μεταβιβάζουμε εκφράσεις με τριμερείς τελεστές, είναι επίσης καλύτερο να δούμε ότι οι λογικοί τελεστές μπορούν επίσης να λειτουργούν με κυριολεκτικά πρότυπα:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav && 'mobile-nav'}`}>NavBar</div> </div> );
};
Συμπέρασμα
Μάθαμε πώς να υλοποιούμε την παρεμβολή συμβολοσειρών χρησιμοποιώντας δύο τυπικές μεθόδους σε αυτό το άρθρο, καθώς και πόσο ισχυρά μπορεί να είναι τα literals προτύπων. Από την εισαγωγή των κυριολεκτικών προτύπων, οι περισσότεροι προτιμούν να τα χρησιμοποιούν λόγω της απλότητας χρήσης και της σημαντικά καλύτερης αναγνωσιμότητας κώδικα.
- '
- &
- a
- ικανότητα
- Λογαριασμός
- επιτευχθεί
- Πράξη
- προστιθέμενη
- Αν και
- πάντοτε
- Άλλος
- app
- εφαρμοσμένος
- πλησιάζω
- γύρω
- άρθρο
- γίνονται
- ΚΑΛΎΤΕΡΟΣ
- Καλύτερα
- τάξη
- κωδικός
- σύγκριση
- συγκρότημα
- Δοχείο
- Περιέχει
- θα μπορούσε να
- δημιουργία
- ημερομηνία
- μοιρασιά
- Σε συνάρτηση
- διαφορετικές
- δύσκολος
- Δολάριο
- δυναμικός
- ενσωματωμένο
- ειδικά
- κ.λπ.
- εκτίμηση
- παράδειγμα
- παραδείγματα
- εκφράσεις
- Όνομα
- καθοδηγήσει
- κρατήστε
- Πως
- Πώς να
- HTTPS
- εφαρμογή
- σημαντικό
- παράδειγμα
- IT
- large
- μάθει
- γραμμή
- γραμμές
- ματιά
- κάνω
- Κατασκευή
- μέθοδοι
- περισσότερο
- πλέον
- πολλαπλούς
- πολλαπλασιάζεται
- αριθμός
- χειριστής
- φορείς
- Ειδικότερα
- People
- ισχυρός
- Αντίδραση
- αναφέρεται
- επαναλαμβάνω
- απαιτούν
- απόδοση
- Επιστροφές
- Είπε
- υπογράψουν
- αφού
- κατάσταση
- So
- μερικοί
- συγκεκριμένες
- πρότυπο
- Κατάσταση
- Δήλωση
- Ακόμη
- στυλ
- λήψη
- Η
- us
- χρήση
- αξία
- διάφορα
- τρόπους
- εντός
- Εργασία
- εργαζόμενος
- XML
- χρόνια