Einleitung
Bei der Arbeit mit Zeichenfolgen können Situationen auftreten, in denen wir dynamisch einen bestimmten Wert in eine solche Zeichenfolge einfügen müssen, damit sie immer noch eine Zeichenfolge zurückgibt. Dieser Vorgang wird als Zeichenfolgeninterpolation bezeichnet.
Dieser dynamische Wert kann eine Variable, ein Status oder irgendetwas anderes sein, das den eigentlichen Wert enthält, der in die Zeichenfolge eingebettet werden soll.
In diesem Leitfaden werden wir uns ansehen, wie die String-Interpolation in React implementiert wird, wobei die verschiedenen Instanzen berücksichtigt werden, die eine String-Interpolation erfordern können, und wie sie erreicht werden können.
String-Interpolation in ES5 und ES6
Die Zeichenfolgeninterpolation kann auf zwei Arten erreicht werden: Verkettung und Vorlagenliterale. Obwohl einige argumentieren, dass die Verkettung keine Zeichenfolgeninterpolation ist, bezieht sich die Zeichenfolgeninterpolation auf die Fähigkeit, Zeichenfolgen durch Platzhalterersetzung zu erstellen, was die Verkettung eindeutig tut.
Vor der Einführung von Vorlagenliteralen in ES6 hatten wir immer die Verkettung verwendet, was sehr schwierig wird, wenn es um mehrzeilige Zeichenfolgen geht, die die Ersetzung vieler Variablen erfordern. Als Vorlagenliterale in ES6 eingeführt wurden, erwiesen sie sich als viel einfacher zu implementieren, insbesondere für längere oder mehrzeilige Zeichenfolgen, in die wir Ausdrücke einbetten möchten.
In diesem Leitfaden werden wir uns beide Methoden ansehen und dann einige Beispiele mit Vorlagenliteralen ausführen, was der empfohlene Ansatz ist.
String-Interpolation in Reaktion mit Verkettung
Die Standardmethode für die Verkettung ist die Verwendung von +
Operator um die jeweilige Variable oder den Zustand:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={"font-bold text-" + fontSize}>Hello World</h1> </div> );
};
Im obigen Code haben wir den Zustand von fontSize
was einen Wert von hat large
. Wir möchten, dass die Klasse dynamisch abgerufen wird – zum Beispiel könnte es so sein text-small
, text-large
, text-medium
usw. Je nach Bundesland eine andere className
wird somit auf die Überschrift angewendet!
Bei der Verkettung platzieren wir zuerst unsere eigentliche Zeichenfolge und verwenden dann die+
-Operator, um die Variable mit der tatsächlichen Zeichenfolge zu interpolieren, sodass der interpolierte Wert zurückgegeben werden kann:
Die obige Methode wird komplex, wenn wir zwei oder mehr Variablen sind, und insbesondere, wenn die Zeichenfolgen innerhalb einer anderen Zeichenfolge und nicht bis zum Ende hinzugefügt werden.
String-Interpolation, um mit Template-Literalen zu reagieren
Dies ist die beste Methode für den Umgang mit Zeichenfolgeninterpolation. Es wurde in ES6 hinzugefügt und ist seitdem die am häufigsten verwendete Methode für die Zeichenfolgeninterpolation. Wiederholen wir das vorherige Beispiel unter Verwendung von String-Vorlagenliteralen:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={`font-bold text-${fontSize}`}>Hello World</h1> </div> );
};
Wie wir im obigen Code sehen können, verwenden wir den Plus-Operator nicht mehr in Vorlagenliteralen, sondern verwenden Backticks für die gesamte Zeichenfolge und verwenden dann das Dollarzeichen und die geschweiften Klammern, um unsere Variablen und dynamischen Werte einzufügen.
Die Aussage wird ausgewertet und const fontSize
wird in die Zeichenfolge eingefügt.
Sehen wir uns einige weitere Beispiele für die React-String-Interpolation an!
So verwenden Sie die Zeichenfolgeninterpolation, um Stilwerte in React zu übergeben
In einer Situation, in der wir unsere Stildaten in einer Variablen gespeichert haben, die wir verwenden möchten, um einen Text intern in React zu formatieren, können wir Vorlagenliterale verwenden:
const App = () => { const textSize = 40; return ( <div className="container"> <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1> </div> );
};
Wie wir bereits gesagt haben, werden das Dollarzeichen und die geschweiften Klammern verwendet, um unseren Platzhalter zu halten, und dies gibt den Stil auf die richtige Weise zurück:
Wir könnten auch eine Auswertung innerhalb der geschweiften Klammern durchführen, angenommen, wir möchten, dass die Zahl multipliziert wird:
<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>
So verwenden Sie die Zeichenfolgeninterpolation mit Ausdrücken in React
Bisher haben wir gesehen, dass wir Auswertungen durchführen können; Es ist auch wichtig zu beachten, dass wir Ausdrücke innerhalb der geschweiften Klammern hinzufügen können, um den richtigen Wert basierend auf dem Ausdruck zu erhalten und ihn zu verwenden:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav ? 'mobile-nav' : ''}`}>NavBar</div> </div> );
};
So interpolieren Sie mehrere Zeilen mit Vorlagenliteralen
Wie bereits erwähnt, erleichtern die Template-Literale das Hinzufügen von Platzhaltern zu Zeichenfolgen mit mehreren Zeilen:
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> );
};
Im obigen Code sehen wir, wie einfach es ist, Vorlagenliterale im Vergleich zur Verwendung von Verkettungen zu verwenden:
let sentence = "The fact that " + user.name+ " is " +user.age+ " years old and his hobby is " +user.hobby+ " amazes me.";
Verwendung logischer Operatoren mit Template-Literalen
Bisher haben wir gesehen, wie Ausdrücke mit ternären Operatoren übergeben werden, am besten sehen wir auch, dass logische Operatoren auch mit Template-Literalen arbeiten können:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav && 'mobile-nav'}`}>NavBar</div> </div> );
};
Zusammenfassung
Wir haben in diesem Artikel gelernt, wie man String-Interpolation mit zwei Standardmethoden implementiert und wie leistungsfähig Template-Literale sein können. Seit der Einführung von Template-Literalen bevorzugen die meisten Leute sie aufgrund der einfachen Verwendung und der deutlich besseren Lesbarkeit des Codes.
- '
- &
- a
- Fähigkeit
- Konto
- erreicht
- Handlung
- hinzugefügt
- Obwohl
- immer
- Ein anderer
- App
- angewandt
- Ansatz
- um
- Artikel
- werden
- BESTE
- Besser
- Klasse
- Code
- verglichen
- Komplex
- Container
- enthält
- könnte
- erstellen
- technische Daten
- Behandlung
- Abhängig
- anders
- schwer
- Dollar
- dynamisch
- eingebettet
- insbesondere
- etc
- Auswertung
- Beispiel
- Beispiele
- Ausdrücke
- Vorname
- Guide
- Ultraschall
- Hilfe
- HTTPS
- implementieren
- wichtig
- Instanz
- IT
- grosse
- gelernt
- Line
- Linien
- aussehen
- um
- Making
- Methoden
- mehr
- vor allem warme
- mehrere
- multipliziert
- Anzahl
- Operator
- Betreiber
- besondere
- Personen
- größte treibende
- Reagieren
- bezieht sich
- wiederholen
- erfordern
- Rückkehr
- Rückgabe
- Said
- Schild
- da
- Situation
- So
- einige
- spezifisch
- Standard
- Bundesstaat
- Erklärung
- Immer noch
- Stil
- Einnahme
- Das
- us
- -
- Wert
- verschiedene
- Wege
- .
- Arbeiten
- arbeiten,
- XML
- Jahr