Introductie
Bij het werken met strings kunnen er situaties ontstaan waarin we dynamisch een specifieke waarde aan zo'n string moeten toevoegen, zodat deze nog steeds een string teruggeeft. De handeling om dit te doen wordt string-interpolatie genoemd.
Deze dynamische waarde kan een variabele, status of iets anders zijn dat de werkelijke waarde bevat die in de tekenreeks moet worden ingesloten.
In deze handleiding zullen we bekijken hoe string-interpolatie in React kan worden geïmplementeerd, rekening houdend met de verschillende instanties die mogelijk string-interpolatie vereisen en hoe deze kunnen worden bereikt.
Stringinterpolatie in ES5 en ES6
Stringinterpolatie kan op twee manieren worden bereikt: aaneenschakeling en sjabloonliteralen. Hoewel sommigen beweren dat aaneenschakeling geen tekenreeksinterpolatie is, verwijst tekenreeksinterpolatie naar de mogelijkheid om tekenreeksen te creëren door plaatsaanduidingen te vervangen, wat duidelijk wel het geval is.
Voorafgaand aan de introductie van sjabloonletterwoorden in ES6, hadden we altijd aaneenschakeling gebruikt, wat erg moeilijk wordt bij het omgaan met strings met meerdere regels die de vervanging van veel variabelen vereisen. Toen sjabloonletterwoorden werden geïntroduceerd in ES6, bleken ze veel gemakkelijker te implementeren, vooral voor langere of meerregelige tekenreeksen waarin we uitdrukkingen willen insluiten.
In deze handleiding bekijken we beide methoden en voeren we enkele voorbeelden uit met letterlijke sjablonen, wat de aanbevolen aanpak is.
Stringinterpolatie in reactie met aaneenschakeling
De standaardmethode voor aaneenschakeling is door gebruik te maken van de +
operator rond de specifieke variabele of toestand:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={"font-bold text-" + fontSize}>Hello World</h1> </div> );
};
In de bovenstaande code hebben we de staat van fontSize
die een waarde heeft van large
. We willen dat de klas dynamisch wordt opgehaald - het zou bijvoorbeeld kunnen zijn: text-small
, text-large
, text-medium
, enz. Afhankelijk van de staat, een andere className
wordt dus toegepast op de kop!
Met aaneenschakeling zullen we eerst onze eigenlijke string plaatsen en vervolgens gebruik maken van de+
operator om de variabele te interpoleren met de eigenlijke string, zodat deze de geïnterpoleerde waarde kan retourneren:
De bovenstaande methode wordt complex als we twee of meer variabelen zijn, en vooral als de strings binnen een andere string worden toegevoegd, en niet aan het einde.
Stringinterpolatie om te reageren met sjabloonletters
Dit is de beste methode om met string-interpolatie om te gaan. Het werd toegevoegd in ES6 en is sindsdien de meest gebruikte methode voor stringinterpolatie geworden. Laten we het voorgaande voorbeeld herhalen met behulp van letterlijke tekenreekssjabloon:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={`font-bold text-${fontSize}`}>Hello World</h1> </div> );
};
Zoals we in de bovenstaande code kunnen zien, gebruiken we niet langer de plus-operator in letterlijke templates, in plaats daarvan gebruiken we backticks voor de hele string en gebruiken dan het dollarteken en accolades om onze variabelen en dynamische waarden in te voegen.
De verklaring wordt geëvalueerd en const fontSize
wordt ingevoegd in de string.
Laten we eens kijken naar wat meer React string interpolatie voorbeelden!
Hoe gebruik te maken van string-interpolatie om stijlwaarden door te geven in React
In een situatie waarin we onze stijlgegevens hebben opgeslagen in een variabele waarvan we een tekst intern willen opmaken in React, kunnen we gebruik maken van template literals:
const App = () => { const textSize = 40; return ( <div className="container"> <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1> </div> );
};
Zoals we eerder zeiden, worden het dollarteken en de accolades gebruikt om onze tijdelijke aanduiding vast te houden, en dit zal de stijl op de juiste manier retourneren:
We kunnen ook een evaluatie uitvoeren binnen de accolades, stel dat we willen dat het getal wordt vermenigvuldigd:
<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>
Hoe gebruik te maken van string-interpolatie met expressies in React
Tot nu toe hebben we gezien dat we evaluaties kunnen uitvoeren; het is ook belangrijk op te merken dat we expressies binnen de accolades kunnen toevoegen om de juiste waarde op basis van de expressie te krijgen en deze te gebruiken:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav ? 'mobile-nav' : ''}`}>NavBar</div> </div> );
};
Hoe meerdere regelreeksen te interpoleren met sjabloonletters
Zoals we eerder zeiden, maken de letterlijke templates het gemakkelijk om tijdelijke aanduidingen toe te voegen aan strings van meerdere regels:
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> );
};
In de bovenstaande code zien we hoe gemakkelijk het is om letterlijke sjablonen te gebruiken in vergelijking met het gebruik van aaneenschakeling:
let sentence = "The fact that " + user.name+ " is " +user.age+ " years old and his hobby is " +user.hobby+ " amazes me.";
Gebruik maken van logische operators met sjabloonletters
Tot nu toe hebben we gezien hoe expressies met ternaire operatoren kunnen worden doorgegeven, het is ook het beste dat we zien dat logische operatoren ook kunnen werken met sjabloonliteralen:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav && 'mobile-nav'}`}>NavBar</div> </div> );
};
Conclusie
We hebben in dit artikel geleerd hoe u tekenreeksinterpolatie kunt implementeren met behulp van twee standaardmethoden, en hoe krachtig sjabloonliteralen kunnen zijn. Sinds de introductie van letterlijke sjablonen gebruiken de meeste mensen ze liever vanwege het gebruiksgemak en de aanzienlijk betere leesbaarheid van de code.
- '
- &
- a
- vermogen
- Account
- bereikt
- Handelen
- toegevoegd
- Hoewel
- altijd
- Nog een
- gebruiken
- toegepast
- nadering
- rond
- dit artikel
- worden
- BEST
- Betere
- klasse
- code
- vergeleken
- complex
- Containers
- bevat
- kon
- en je merk te creëren
- gegevens
- omgang
- Afhankelijk
- anders
- moeilijk
- Dollar
- dynamisch
- ingebed
- vooral
- etc
- evaluatie
- voorbeeld
- voorbeelden
- uitdrukkingen
- Voornaam*
- gids
- houden
- Hoe
- How To
- HTTPS
- uitvoeren
- belangrijk
- instantie
- IT
- Groot
- geleerd
- Lijn
- lijnen
- Kijk
- maken
- maken
- methoden
- meer
- meest
- meervoudig
- vermenigvuldigd
- aantal
- operator
- exploitanten
- bijzonder
- Mensen
- krachtige
- Reageren
- verwijst
- herhaling
- vereisen
- terugkeer
- Retourneren
- Zei
- teken
- sinds
- situatie
- So
- sommige
- specifiek
- standaard
- Land
- Statement
- Still
- stijl
- het nemen
- De
- us
- .
- waarde
- divers
- manieren
- binnen
- Mijn werk
- werkzaam
- XML
- jaar