Introduksjon
Når du arbeider med strenger, kan det oppstå situasjoner som krever at vi dynamisk legger til en spesifikk verdi i en slik streng slik at den fortsatt returnerer en streng, handlingen med å gjøre dette kalles strenginterpolasjon.
Denne dynamiske verdien kan være en variabel, tilstand eller noe annet som inneholder den faktiske verdien som skal bygges inn i strengen.
I denne veiledningen vil vi se på hvordan du implementerer strenginterpolering i React, tar hensyn til de ulike tilfellene som kan kreve strenginterpolering og hvordan de kan oppnås.
Strenginterpolasjon i ES5 og ES6
Strenginterpolasjon kan utføres på to måter: sammenkobling og malliteral. Selv om noen hevder at sammenkobling ikke er strenginterpolasjon, refererer strenginterpolasjon til muligheten til å lage strenger ved å gjøre plassholdererstatning, noe sammenkobling tydeligvis gjør.
Før introduksjonen av malliteraler i ES6, hadde vi alltid brukt sammenkledning, noe som blir svært vanskelig når vi arbeider med flerlinjede strenger som krever substitusjon av mange variabler. Da malliteraler ble introdusert i ES6, viste de seg langt enklere å implementere, spesielt for strenger med lengre eller flere linjer som vi ønsker å legge inn uttrykk i.
I denne veiledningen vil vi se på begge metodene og deretter utføre noen eksempler med mal bokstaver, som er den anbefalte tilnærmingen.
Strengeinterpolasjon i reaksjon med sammenkobling
Standardmetoden for sammenkobling er ved å bruke +
operator rundt den bestemte variabelen eller tilstanden:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={"font-bold text-" + fontSize}>Hello World</h1> </div> );
};
I koden ovenfor har vi tilstanden til fontSize
som har en verdi på large
. Vi ønsker at klassen skal hentes dynamisk – det kan for eksempel være det text-small
, text-large
, text-medium
, etc. Avhengig av staten, en annen className
vil dermed bli brukt på overskriften!
Med sammenkobling vil vi først plassere vår faktiske streng og deretter bruke+
operatør for å interpolere variabelen med den faktiske strengen, slik at den kan returnere den interpolerte verdien:
Metoden ovenfor blir kompleks når vi er to eller flere variabler, og spesielt hvis strengene legges til i en annen streng, og ikke til slutten.
Strengeinterpolasjon for å reagere med malbokstaver
Dette er den beste metoden for å håndtere strenginterpolering. Den ble lagt til i ES6 og har siden blitt den mest brukte metoden for strenginterpolering. Ved å bruke bokstavmaler for strengmal, la oss gjenta det foregående eksemplet:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={`font-bold text-${fontSize}`}>Hello World</h1> </div> );
};
Som vi kan se i koden ovenfor, bruker vi ikke lenger plussoperatoren i malliteraler, i stedet bruker vi backticks for hele strengen og bruker deretter dollartegnet og krøllete klammeparenteser for å sette inn variablene og dynamiske verdier.
Uttalelsen vurderes og const fontSize
settes inn i strengen.
La oss se på noen flere eksempler på React-strenginterpolasjon!
Hvordan bruke strenginterpolasjon for å sende stilverdier i React
I en situasjon der vi har stildataene våre lagret i en variabel som vi ønsker å bruke til å style en tekst internt i React, kan vi bruke mallletter:
const App = () => { const textSize = 40; return ( <div className="container"> <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1> </div> );
};
Som vi tidligere sa, brukes dollartegnet og krøllete seler for å holde plassholderen vår, og dette vil returnere stilen på riktig måte:
Vi kan også utføre evaluering innenfor de krøllete klammeparentesene, anta at vi vil at tallet skal multipliseres:
<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>
Hvordan bruke strenginterpolasjon med uttrykk i React
Så langt har vi sett at vi kan utføre evalueringer; det er også viktig å merke seg at vi kan legge til uttrykk i de krøllete klammeparentesene for å få riktig verdi basert på uttrykket og bruke det:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav ? 'mobile-nav' : ''}`}>NavBar</div> </div> );
};
Hvordan interpolere streng med flere linjer med malbokstaver
Som vi sa tidligere, gjør malens bokstaver det enkelt å legge til plassholdere til strenger med flere linjer:
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> );
};
I koden ovenfor ser vi hvor enkelt det er å bruke malliteral sammenlignet med å bruke sammenkobling:
let sentence = "The fact that " + user.name+ " is " +user.age+ " years old and his hobby is " +user.hobby+ " amazes me.";
Hvordan gjøre bruk av logiske operatører med malbokstaver
Så langt har vi sett hvordan vi sender uttrykk med ternære operatorer, det er også best vi ser at logiske operatorer også kan jobbe med malliteraler:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav && 'mobile-nav'}`}>NavBar</div> </div> );
};
konklusjonen
Vi lærte hvordan du implementerer strenginterpolasjon ved å bruke to standardmetoder i denne artikkelen, samt hvor kraftige malliteraler kan være. Siden introduksjonen av bokstavmaler foretrekker de fleste å bruke dem på grunn av enkel bruk og betydelig bedre kodelesbarhet.
- '
- &
- a
- evne
- Logg inn
- oppnådd
- Handling
- la til
- Selv
- alltid
- En annen
- app
- anvendt
- tilnærming
- rundt
- Artikkel
- bli
- BEST
- Bedre
- klasse
- kode
- sammenlignet
- komplekse
- Container
- inneholder
- kunne
- skape
- dato
- håndtering
- avhengig
- forskjellig
- vanskelig
- Dollar
- dynamisk
- innebygd
- spesielt
- etc
- evaluering
- eksempel
- eksempler
- uttrykkene
- Først
- veilede
- hold
- Hvordan
- Hvordan
- HTTPS
- iverksette
- viktig
- f.eks
- IT
- stor
- lært
- linje
- linjer
- Se
- gjøre
- Making
- metoder
- mer
- mest
- flere
- multiplisert
- Antall
- operatør
- operatører
- Spesielt
- Ansatte
- kraftig
- Reager
- refererer
- gjenta
- krever
- retur
- avkastning
- Sa
- undertegne
- siden
- situasjon
- So
- noen
- spesifikk
- Standard
- Tilstand
- Uttalelse
- Still
- stil
- ta
- De
- us
- bruke
- verdi
- ulike
- måter
- innenfor
- Arbeid
- arbeid
- XML
- år