esittely
Merkkijonojen kanssa työskennellessä voi syntyä tilanteita, joissa meidän on lisättävä dynaamisesti tietty arvo sellaiseen merkkijonoon, jotta se silti palauttaa merkkijonon. Tätä kutsutaan merkkijonon interpolaatioksi.
Tämä dynaaminen arvo voi olla muuttuja, tila tai mikä tahansa muu, joka sisältää merkkijonoon upotettavan todellisen arvon.
Tässä oppaassa tarkastellaan, kuinka merkkijonointerpolointi voidaan toteuttaa Reactissa, ottaen huomioon erilaiset tapaukset, jotka saattavat vaatia merkkijonointerpolointia ja kuinka ne voidaan saavuttaa.
Merkkijonojen interpolointi ES5:ssä ja ES6:ssa
Merkkijonojen interpolointi voidaan suorittaa kahdella tavalla: ketjuttaminen ja malliliteraaleja. Vaikka jotkut väittävät, että ketjuttaminen ei ole merkkijonojen interpolointia, merkkijonointerpolointi viittaa kykyyn luoda merkkijonoja tekemällä paikkamerkkien korvaaminen, mitä ketjuttaminen selvästi tekee.
Ennen malliliteraalien käyttöönottoa ES6:ssa olimme aina käyttäneet ketjutusta, mikä tulee erittäin vaikeaksi käsiteltäessä monirivisiä merkkijonoja, jotka vaativat monien muuttujien korvaamista. Kun malliliteraaalit otettiin käyttöön ES6:ssa, ne osoittautuivat paljon helpommaksi toteuttaa, varsinkin pitkille tai monirivisille merkkijonoille, joihin haluamme upottaa lausekkeita.
Tässä oppaassa tarkastelemme molempia menetelmiä ja teemme sitten esimerkkejä malliliteraaaleilla, mikä on suositeltu lähestymistapa.
Merkkijonon interpolointi reagoi ketjutuksen kanssa
Tavallinen ketjutusmenetelmä on käyttää +
operaattori tietyn muuttujan tai tilan ympärillä:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={"font-bold text-" + fontSize}>Hello World</h1> </div> );
};
Yllä olevassa koodissa meillä on tila fontSize
jolla on arvo large
. Haluamme, että luokka haetaan dynaamisesti – se voisi esimerkiksi olla text-small
, text-large
, text-medium
jne. Tilasta riippuen erilainen className
sovelletaan siis otsikkoon!
Kytkennällä asetamme ensin varsinaisen merkkijonomme ja käytämme sitten+
operaattori interpoloi muuttujan todellisen merkkijonon kanssa, jotta se voisi palauttaa interpoloidun arvon:
Yllä oleva menetelmä tulee monimutkaiseksi, kun olemme kaksi tai useampia muuttujia, ja varsinkin jos merkkijonot lisätään toiseen merkkijonoon, ei loppuun.
Merkkijonointerpolointi reagoidakseen malliliteraalien kanssa
Tämä on paras tapa käsitellä merkkijonointerpolaatiota. Se lisättiin ES6:een, ja siitä on sittemmin tullut yleisimmin käytetty menetelmä merkkijonojen interpolointiin. Toistetaan edellinen esimerkki käyttämällä merkkijonomallin literaaleja:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={`font-bold text-${fontSize}`}>Hello World</h1> </div> );
};
Kuten yllä olevasta koodista näemme, emme enää käytä plus-operaattoria malliliteraaaleissa, vaan käytämme koko merkkijonoa backticksilla ja sitten dollarimerkkiä ja aaltosulkuja lisätäksemme muuttujat ja dynaamiset arvomme.
Lausunto arvioidaan ja const fontSize
on lisätty merkkijonoon.
Katsotaanpa lisää React-merkkijonojen interpolaatioesimerkkejä!
Kuinka käyttää merkkijonointerpolaatiota tyyliarvojen välittämiseen Reactissa
Tilanteessa, jossa meillä on tyylitietomme tallennettuna muuttujaan, jota haluamme käyttää tekstin tyyliin sisäisesti Reactissa, voimme käyttää malliliteraaaleja:
const App = () => { const textSize = 40; return ( <div className="container"> <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1> </div> );
};
Kuten aiemmin sanoimme, dollarimerkkiä ja kiharaa aaltosulkeet käytetään pitämään paikkamerkkimme, ja tämä palauttaa tyylin oikealla tavalla:
Voisimme myös suorittaa arvioinnin kiharan aaltosulkeiden sisällä, oletetaan, että haluamme luvun kerrottavan:
<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>
Kuinka käyttää merkkijonointerpolaatiota lausekkeiden kanssa Reactissa
Toistaiseksi olemme nähneet, että voimme suorittaa arviointeja; On myös tärkeää huomata, että voimme lisätä lausekkeita aaltosulkeisiin saadaksemme oikean arvon lausekkeen perusteella ja käyttää sitä:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav ? 'mobile-nav' : ''}`}>NavBar</div> </div> );
};
Kuinka interpoloida usean rivin merkkijono malliliteraaleilla
Kuten aiemmin totesimme, malliliteraalien avulla on helppo lisätä paikkamerkkejä useiden rivien merkkijonoihin:
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> );
};
Yllä olevasta koodista näemme, kuinka helppoa on käyttää malliliteraaleja verrattuna ketjutuksen käyttöön:
let sentence = "The fact that " + user.name+ " is " +user.age+ " years old and his hobby is " +user.hobby+ " amazes me.";
Loogisten operaattoreiden hyödyntäminen mallikirjaimella
Toistaiseksi olemme nähneet, kuinka lausekkeita välitetään kolmiosaisilla operaattoreilla, mutta on myös parasta, että loogiset operaattorit voivat työskennellä myös malliliteraalien kanssa:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav && 'mobile-nav'}`}>NavBar</div> </div> );
};
Yhteenveto
Opimme kuinka toteuttaa merkkijonointerpolointi kahdella vakiomenetelmällä tässä artikkelissa sekä kuinka tehokkaita malliliteraalit voivat olla. Malliliteraalien käyttöönoton jälkeen useimmat ihmiset ovat käyttäneet niitä mieluummin käytön yksinkertaisuuden ja huomattavasti paremman koodin luettavuuden vuoksi.
- '
- &
- a
- kyky
- Tili
- saavutettu
- Toimia
- lisä-
- Vaikka
- aina
- Toinen
- sovelluksen
- sovellettu
- lähestymistapa
- noin
- artikkeli
- tulevat
- PARAS
- Paremmin
- luokka
- koodi
- verrattuna
- monimutkainen
- Kontti
- sisältää
- voisi
- luoda
- tiedot
- tekemisissä
- Riippuen
- eri
- vaikea
- dollari
- dynaaminen
- upotettu
- erityisesti
- jne.
- arviointi
- esimerkki
- Esimerkit
- ilmauksia
- Etunimi
- ohjaavat
- pitää
- Miten
- Miten
- HTTPS
- toteuttaa
- tärkeä
- esimerkki
- IT
- suuri
- oppinut
- linja
- linjat
- katso
- tehdä
- Tekeminen
- menetelmät
- lisää
- eniten
- moninkertainen
- kerrottuna
- numero
- operaattori
- operaattorit
- erityinen
- Ihmiset
- voimakas
- suhtautua
- viittaa
- toistaa
- edellyttää
- palata
- Tuotto
- Said
- merkki
- koska
- tilanne
- So
- jonkin verran
- erityinen
- standardi
- Osavaltio
- Lausunto
- Yhä
- tyyli
- ottaen
- -
- us
- käyttää
- arvo
- eri
- tavalla
- sisällä
- Referenssit
- työskentely
- XML
- vuotta