Introducere
Când lucrați cu șiruri, pot apărea situații care ne impun să adăugăm dinamic o anumită valoare într-un astfel de șir, astfel încât să returneze în continuare un șir, actul de a face acest lucru este denumit interpolare șir.
Această valoare dinamică poate fi o variabilă, o stare sau orice altceva care conține valoarea reală care trebuie încorporată în șir.
În acest ghid, ne vom uita la modul de implementare a interpolării șirurilor în React, ținând cont de diferitele instanțe care pot necesita interpolarea șirurilor și cum pot fi realizate.
Interpolarea șirurilor în ES5 și ES6
Interpolarea șirurilor poate fi realizată în două moduri: concatenare și literale șablon. Deși unii susțin că concatenarea nu este interpolarea șirurilor, interpolarea șirurilor se referă la capacitatea de a crea șiruri prin substituirea substituenților, ceea ce concatenarea o face în mod clar.
Înainte de introducerea literalelor șablon în ES6, am folosit întotdeauna concatenarea, care devine foarte dificilă atunci când avem de-a face cu șiruri cu mai multe linii care necesită înlocuirea multor variabile. Când literalele șablon au fost introduse în ES6, s-au dovedit mult mai ușor de implementat, în special pentru șiruri mai lungi sau cu mai multe linii în care dorim să încorporam expresii.
În acest ghid, vom analiza ambele metode și apoi vom realiza câteva exemple cu literale șablon, care este abordarea recomandată.
Interpolarea șirurilor în reacție cu concatenarea
Metoda standard de concatenare este folosirea +
operator în jurul unei anumite variabile sau stări:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={"font-bold text-" + fontSize}>Hello World</h1> </div> );
};
În codul de mai sus, avem starea de fontSize
care are o valoare de large
. Vrem ca clasa să fie preluată dinamic – de exemplu, ar putea fi text-small
, text-large
, text-medium
, etc În funcție de stat, un diferit className
se va aplica astfel la antet!
Cu concatenare, vom plasa mai întâi șirul real și apoi vom folosi+
operator pentru a interpola variabila cu șirul real, astfel încât să poată returna valoarea interpolată:
Metoda de mai sus devine complexă atunci când suntem două sau mai multe variabile, și mai ales dacă șirurile sunt adăugate într-un alt șir, și nu până la sfârșit.
Interpolarea șirurilor pentru a reacționa cu literalele șablonului
Aceasta este cea mai bună metodă pentru a face față interpolării șirurilor. A fost adăugat în ES6 și de atunci a devenit metoda cea mai frecvent utilizată pentru interpolarea șirurilor. Folosind literale șablon șir, să repetăm exemplul precedent:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={`font-bold text-${fontSize}`}>Hello World</h1> </div> );
};
După cum putem vedea în codul de mai sus, nu mai folosim operatorul plus în literalele șablon, în schimb, folosim backtick-uri pentru întregul șir și apoi folosim semnul dolar și acolade pentru a introduce variabilele și valorile noastre dinamice.
Afirmația este evaluată și const fontSize
este introdus în șir.
Să ne uităm la câteva exemple de interpolare a șirurilor React!
Cum să utilizați interpolarea șirurilor pentru a trece valorile stilului în React
Într-o situație în care datele noastre de stil sunt stocate într-o variabilă pe care dorim să o folosim pentru a stila un text intern în React, putem folosi literale șablon:
const App = () => { const textSize = 40; return ( <div className="container"> <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1> </div> );
};
După cum am spus mai devreme, semnul dolarului și bretele sunt folosite pentru a ne menține substituentul, iar acest lucru va returna stilul în mod corespunzător:
De asemenea, am putea efectua o evaluare în cadrul acoladelor, să presupunem că dorim ca numărul să fie înmulțit:
<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>
Cum să utilizați interpolarea șirurilor cu expresii în React
Până acum, am văzut că putem efectua evaluări; De asemenea, este important să rețineți că putem adăuga expresii în acolade pentru a obține valoarea corectă pe baza expresiei și a o folosi:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav ? 'mobile-nav' : ''}`}>NavBar</div> </div> );
};
Cum să interpolați mai multe șiruri de linii cu literale de șablon
După cum am spus mai devreme, literalele șablonului facilitează adăugarea de substituenți la șiruri de mai multe linii:
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> );
};
În codul de mai sus, vedem cât de ușor este să utilizați literale șablon în comparație cu utilizarea concatenării:
let sentence = "The fact that " + user.name+ " is " +user.age+ " years old and his hobby is " +user.hobby+ " amazes me.";
Cum să utilizați operatori logici cu literalmente șablon
Până acum am văzut cum să transmitem expresii cu operatori ternari, de asemenea, este mai bine să vedem că operatorii logici pot lucra și cu literali șablon:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav && 'mobile-nav'}`}>NavBar</div> </div> );
};
Concluzie
Am învățat cum să implementăm interpolarea șirurilor folosind două metode standard în acest articol, precum și cât de puternice pot fi literalele șablon. De la introducerea literalelor șablon, majoritatea oamenilor preferă să le folosească datorită simplității utilizării și a lizibilității codului semnificativ mai bună.
- '
- &
- a
- capacitate
- Cont
- realizat
- act
- adăugat
- Cu toate ca
- mereu
- O alta
- aplicaţia
- aplicat
- abordare
- în jurul
- articol
- deveni
- CEL MAI BUN
- Mai bine
- clasă
- cod
- comparație
- complex
- Recipient
- conține
- ar putea
- crea
- de date
- abuzive
- În funcție
- diferit
- dificil
- Dolar
- dinamic
- încorporat
- mai ales
- etc
- evaluare
- exemplu
- exemple
- expresii
- First
- ghida
- deţine
- Cum
- Cum Pentru a
- HTTPS
- punerea în aplicare a
- important
- instanță
- IT
- mare
- învățat
- Linie
- linii
- Uite
- face
- Efectuarea
- Metode
- mai mult
- cele mai multe
- multiplu
- înmulțit
- număr
- operator
- Operatorii
- special
- oameni
- puternic
- Reacţiona
- se referă
- repeta
- necesita
- reveni
- Returnează
- Said
- semna
- întrucât
- situație
- So
- unele
- specific
- standard
- Stat
- Declarație
- Încă
- stil
- luare
- us
- utilizare
- valoare
- diverse
- modalități de
- în
- Apartamente
- de lucru
- XML
- ani