Introduzione
Quando si lavora con le stringhe, possono verificarsi situazioni che richiedono di aggiungere dinamicamente un valore specifico a tale stringa in modo che restituisca comunque una stringa, l'atto di farlo è indicato come interpolazione di stringhe.
Questo valore dinamico potrebbe essere una variabile, uno stato o qualsiasi altra cosa che contenga il valore effettivo da incorporare nella stringa.
In questa guida, vedremo come implementare l'interpolazione di stringhe in React, tenendo conto delle varie istanze che potrebbero richiedere l'interpolazione di stringhe e di come possono essere ottenute.
Interpolazione di stringhe in ES5 ed ES6
L'interpolazione di stringhe può essere eseguita in due modi: concatenazione e letterali modello. Sebbene alcuni sostengano che la concatenazione non sia un'interpolazione di stringhe, l'interpolazione di stringhe si riferisce alla capacità di creare stringhe eseguendo la sostituzione del segnaposto, cosa che fa chiaramente la concatenazione.
Prima dell'introduzione dei valori letterali modello in ES6, avevamo sempre utilizzato la concatenazione, che diventa molto difficile quando si tratta di stringhe multilinea che richiedono la sostituzione di molte variabili. Quando i valori letterali modello sono stati introdotti in ES6, si sono rivelati molto più facili da implementare, specialmente per stringhe più lunghe o multiriga in cui vogliamo incorporare espressioni.
In questa guida, esamineremo entrambi i metodi e quindi eseguiremo alcuni esempi con valori letterali modello, che è l'approccio consigliato.
Interpolazione di stringhe in reazione alla concatenazione
Il metodo standard per la concatenazione è l'utilizzo di +
operatore attorno alla particolare variabile o stato:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={"font-bold text-" + fontSize}>Hello World</h1> </div> );
};
Nel codice sopra, abbiamo lo stato di fontSize
che ha un valore di large
. Vogliamo che la classe venga recuperata in modo dinamico, ad esempio potrebbe essere text-small
, text-large
, text-medium
, ecc. A seconda dello stato, un diverso className
verrà quindi applicato all'intestazione!
Con la concatenazione, posizioneremo prima la nostra stringa effettiva e quindi utilizzeremo il+
operatore per interpolare la variabile con la stringa effettiva, in modo che possa restituire il valore interpolato:
Il metodo sopra diventa complesso quando siamo due o più variabili, e soprattutto se le stringhe vengono aggiunte all'interno di un'altra stringa e non alla fine.
Interpolazione di stringhe per reagire con i valori letterali del modello
Questo è il metodo migliore per gestire l'interpolazione di stringhe. È stato aggiunto in ES6 e da allora è diventato il metodo più comunemente utilizzato per l'interpolazione di stringhe. Usando i valori letterali del modello di stringa, ripetiamo l'esempio precedente:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={`font-bold text-${fontSize}`}>Hello World</h1> </div> );
};
Come possiamo vedere nel codice sopra, non utilizziamo più l'operatore più nei valori letterali del modello, utilizziamo invece i backtick per l'intera stringa e quindi utilizziamo il simbolo del dollaro e le parentesi graffe per inserire le nostre variabili e valori dinamici.
La dichiarazione è valutata e const fontSize
viene inserito nella stringa.
Diamo un'occhiata ad altri esempi di interpolazione di stringhe React!
Come utilizzare l'interpolazione di stringhe per passare i valori di stile in React
In una situazione in cui abbiamo i nostri dati di stile memorizzati in una variabile di cui vogliamo usare per modellare un testo internamente in React, possiamo utilizzare i letterali del modello:
const App = () => { const textSize = 40; return ( <div className="container"> <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1> </div> );
};
Come abbiamo detto in precedenza, il simbolo del dollaro e le parentesi graffe vengono utilizzati per tenere il nostro segnaposto, e questo restituirà lo stile nel modo corretto:
Potremmo anche eseguire la valutazione tra parentesi graffe, supponiamo di voler moltiplicare il numero:
<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>
Come utilizzare l'interpolazione di stringhe con le espressioni in React
Finora abbiamo visto che possiamo eseguire valutazioni; è anche importante notare che possiamo aggiungere espressioni all'interno delle parentesi graffe per ottenere il valore corretto in base all'espressione e utilizzarlo:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav ? 'mobile-nav' : ''}`}>NavBar</div> </div> );
};
Come interpolare una stringa di più righe con i valori letterali del modello
Come abbiamo detto in precedenza, i valori letterali del modello semplificano l'aggiunta di segnaposto a stringhe di più righe:
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> );
};
Nel codice sopra, vediamo quanto sia facile utilizzare i valori letterali del modello rispetto all'utilizzo della concatenazione:
let sentence = "The fact that " + user.name+ " is " +user.age+ " years old and his hobby is " +user.hobby+ " amazes me.";
Come utilizzare gli operatori logici con i letterali modello
Finora abbiamo visto come passare espressioni con operatori ternari, è anche meglio vedere che gli operatori logici possono funzionare anche con i valori letterali del modello:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav && 'mobile-nav'}`}>NavBar</div> </div> );
};
Conclusione
In questo articolo abbiamo appreso come implementare l'interpolazione di stringhe utilizzando due metodi standard, oltre a quanto possono essere potenti i valori letterali modello. Dall'introduzione dei valori letterali del modello, la maggior parte delle persone preferisce usarli grazie alla semplicità d'uso e alla leggibilità del codice notevolmente migliore.
- '
- &
- a
- capacità
- Il mio account
- raggiunto
- Legge
- aggiunto
- Sebbene il
- sempre
- Un altro
- App
- applicato
- approccio
- in giro
- articolo
- diventare
- MIGLIORE
- Meglio
- classe
- codice
- rispetto
- complesso
- Contenitore
- contiene
- potuto
- creare
- dati
- trattare
- Dipendente
- diverso
- difficile
- Dollaro
- dinamico
- incorporato
- particolarmente
- eccetera
- valutazione
- esempio
- Esempi
- espressioni
- Nome
- guida
- tenere
- Come
- Tutorial
- HTTPS
- realizzare
- importante
- esempio
- IT
- grandi
- imparato
- linea
- Linee
- Guarda
- make
- Fare
- metodi
- Scopri di più
- maggior parte
- multiplo
- moltiplicato
- numero
- operatore
- Operatori
- particolare
- Persone
- potente
- Reagire
- si riferisce
- ripetere
- richiedere
- ritorno
- problemi
- Suddetto
- segno
- da
- situazione
- So
- alcuni
- specifico
- Standard
- Regione / Stato
- dichiarazione
- Ancora
- style
- presa
- Il
- us
- uso
- APPREZZIAMO
- vario
- modi
- entro
- Lavora
- lavoro
- XML
- anni