Beskrivning
När man arbetar med strängar kan situationer uppstå som kräver att vi dynamiskt lägger till ett specifikt värde i en sådan sträng så att den fortfarande returnerar en sträng, handlingen att göra detta kallas stränginterpolation.
Detta dynamiska värde kan vara en variabel, ett tillstånd eller något annat som innehåller det faktiska värdet som ska bäddas in i strängen.
I den här guiden kommer vi att titta på hur man implementerar stränginterpolation i React, med hänsyn till de olika instanser som kan kräva stränginterpolation och hur de kan uppnås.
Stränginterpolation i ES5 och ES6
Stränginterpolation kan åstadkommas på två sätt: sammanlänkning och malllitterals. Även om vissa hävdar att sammanlänkning inte är stränginterpolation, hänvisar stränginterpolation till förmågan att skapa strängar genom att göra platshållarsubstitution, vilket sammanlänkning uppenbarligen gör.
Innan introduktionen av malllitteraler i ES6 hade vi alltid använt sammanlänkning, vilket blir mycket svårt när man hanterar flerradiga strängar som kräver substitution av många variabler. När malllitteraler introducerades i ES6 visade de sig vara mycket lättare att implementera, särskilt för längre eller flerradiga strängar som vi vill bädda in uttryck i.
I den här guiden kommer vi att titta på båda metoderna och sedan utföra några exempel med mallbokstavar, vilket är det rekommenderade tillvägagångssättet.
Stränginterpolation i reaktion med sammanlänkning
Standardmetoden för sammanlänkning är att använda +
operator runt den specifika variabeln eller tillståndet:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={"font-bold text-" + fontSize}>Hello World</h1> </div> );
};
I koden ovan har vi tillståndet fontSize
som har ett värde av large
. Vi vill att klassen ska hämtas dynamiskt – det kan det till exempel vara text-small
, text-large
, text-medium
, etc. Beroende på staten, en annan className
kommer alltså att tillämpas på rubriken!
Med sammanlänkning kommer vi först att placera vår faktiska sträng och sedan använda oss av+
operatorn för att interpolera variabeln med den faktiska strängen, så att den kan returnera det interpolerade värdet:
Ovanstående metod blir komplex när vi är två eller flera variabler, och speciellt om strängarna läggs till i en annan sträng, och inte till slutet.
Stränginterpolation för att reagera med mallbokstavar
Detta är den bästa metoden för att hantera stränginterpolation. Den lades till i ES6 och har sedan dess blivit den mest använda metoden för stränginterpolation. Med hjälp av bokstavsmallar i strängar, låt oss upprepa det föregående exemplet:
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 ovan använder vi inte längre plusoperatorn i malllitteraler, istället använder vi backticks för hela strängen och använder sedan dollartecknet och hängslen för att infoga våra variabler och dynamiska värden.
Uttalandet utvärderas och const fontSize
sätts in i strängen.
Låt oss titta på några fler React-stränginterpolationsexempel!
Hur man använder stränginterpolation för att skicka stilvärden i React
I en situation där vi har vår stildata lagrad i en variabel som vi vill använda för att utforma en text internt i React, kan vi använda oss av mallbokstavar:
const App = () => { const textSize = 40; return ( <div className="container"> <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1> </div> );
};
Som vi tidigare sa, används dollartecknet och lockiga hängslen för att hålla vår platshållare, och detta kommer att returnera stilen på rätt sätt:
Vi kan också utföra utvärdering inom de lockiga hängslen, anta att vi vill att talet ska multipliceras:
<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>
Hur man använder sig av stränginterpolation med uttryck i React
Hittills har vi sett att vi kan utföra utvärderingar; Det är också viktigt att notera att vi kan lägga till uttryck inom de lockiga klammerparenteserna för att få rätt värde baserat på uttrycket och använda det:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav ? 'mobile-nav' : ''}`}>NavBar</div> </div> );
};
Hur man interpolerar sträng med flera rader med mallbokstavar
Som vi sa tidigare gör mallbokstavarna det enkelt att lägga till platshållare till strängar med flera rader:
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 ovan ser vi hur enkelt det är att använda mallbokstavar jämfört med att använda sammanlänkning:
let sentence = "The fact that " + user.name+ " is " +user.age+ " years old and his hobby is " +user.hobby+ " amazes me.";
Hur man använder logiska operatorer med mallbokstavar
Hittills har vi sett hur man skickar uttryck med ternära operatorer, det är också bäst att vi ser att logiska operatorer också kan arbeta med mallletteraler:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav && 'mobile-nav'}`}>NavBar</div> </div> );
};
Slutsats
Vi lärde oss hur man implementerar stränginterpolation med två standardmetoder i den här artikeln, samt hur kraftfulla malllitterala kan vara. Sedan introduktionen av mallbokstavar föredrar de flesta att använda dem på grund av enkelheten att använda och betydligt bättre kodläsbarhet.
- '
- &
- a
- förmåga
- Konto
- uppnås
- Agera
- lagt till
- Även
- alltid
- Annan
- app
- tillämpas
- tillvägagångssätt
- runt
- Artikeln
- blir
- BÄST
- Bättre
- klass
- koda
- jämfört
- komplex
- Behållare
- innehåller
- kunde
- skapa
- datum
- som handlar om
- beroende
- olika
- svårt
- Dollar
- dynamisk
- inbäddade
- speciellt
- etc
- utvärdering
- exempel
- exempel
- uttryck
- Förnamn
- styra
- hålla
- Hur ser din drömresa ut
- How To
- HTTPS
- genomföra
- med Esport
- exempel
- IT
- Large
- lärt
- linje
- rader
- se
- göra
- Framställning
- metoder
- mer
- mest
- multipel
- multiplicerat
- antal
- Operatören
- operatörer
- särskilt
- Personer
- den mäktigaste
- Reagera
- hänvisar
- upprepa
- kräver
- avkastning
- återgår
- Nämnda
- signera
- eftersom
- Situationen
- So
- några
- specifik
- standard
- Ange
- .
- Fortfarande
- stil
- tar
- Smakämnen
- us
- användning
- värde
- olika
- sätt
- inom
- Arbete
- arbetssätt
- XML
- år