Wprowadzenie
Podczas pracy z łańcuchami mogą wystąpić sytuacje, które wymagają od nas dynamicznego dodania określonej wartości do takiego łańcucha, aby nadal zwracał łańcuch, czynność ta nazywana jest interpolacją łańcucha.
Ta wartość dynamiczna może być zmienną, stanem lub dowolną inną wartością, która zawiera rzeczywistą wartość do osadzenia w ciągu.
W tym przewodniku przyjrzymy się, jak zaimplementować interpolację ciągów w React, biorąc pod uwagę różne przypadki, które mogą wymagać interpolacji ciągów i jak można je osiągnąć.
Interpolacja ciągów w ES5 i ES6
Interpolację ciągów można wykonać na dwa sposoby: konkatenację i literały szablonu. Chociaż niektórzy twierdzą, że konkatenacja nie jest interpolacją ciągów, interpolacja ciągów odnosi się do możliwości tworzenia ciągów poprzez zastępowanie symboli zastępczych, co wyraźnie robi konkatenacja.
Przed wprowadzeniem literałów szablonów w ES6 zawsze używaliśmy konkatenacji, która staje się bardzo trudna w przypadku wieloliniowych ciągów, które wymagają podstawienia wielu zmiennych. Gdy w ES6 wprowadzono literały szablonów, okazały się one znacznie łatwiejsze do zaimplementowania, zwłaszcza w przypadku dłuższych lub wielowierszowych ciągów, w których chcemy osadzić wyrażenia.
W tym przewodniku przyjrzymy się obu metodom, a następnie wykonamy kilka przykładów z literałami szablonów, co jest zalecanym podejściem.
Interpolacja ciągów w reakcji z konkatenacją
Standardową metodą łączenia jest użycie +
operator wokół określonej zmiennej lub stanu:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={"font-bold text-" + fontSize}>Hello World</h1> </div> );
};
W powyższym kodzie mamy stan fontSize
który ma wartość large
. Chcemy, aby klasa była pobierana dynamicznie – na przykład może to być text-small
, text-large
, text-medium
itp. W zależności od stanu inny className
w ten sposób zostanie zastosowany do nagłówka!
Dzięki konkatenacji najpierw umieścimy nasz rzeczywisty ciąg, a następnie użyjemy+
operator do interpolacji zmiennej z rzeczywistym ciągiem, aby mógł zwrócić interpolowaną wartość:
Powyższa metoda staje się złożona, gdy mamy dwie lub więcej zmiennych, a zwłaszcza, gdy ciągi są dodawane w ramach innego ciągu, a nie do końca.
Interpolacja ciągów w celu zareagowania z literałami szablonu
Jest to najlepsza metoda radzenia sobie z interpolacją ciągów. Został dodany w ES6 i od tego czasu stał się najczęściej stosowaną metodą interpolacji ciągów. Używając literałów szablonu ciągu, powtórzmy poprzedni przykład:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={`font-bold text-${fontSize}`}>Hello World</h1> </div> );
};
Jak widać w powyższym kodzie, nie używamy już operatora plus w literałach szablonu, zamiast tego używamy backticków dla całego łańcucha, a następnie używamy znaku dolara i nawiasów klamrowych, aby wstawić nasze zmienne i wartości dynamiczne.
Oświadczenie jest oceniane i const fontSize
jest wstawiany do ciągu.
Spójrzmy na kilka przykładów interpolacji łańcuchów React!
Jak wykorzystać interpolację ciągów do przekazywania wartości stylu w React
W sytuacji, gdy nasze dane dotyczące stylu przechowujemy w zmiennej, której chcemy użyć do wewnętrznego stylizacji tekstu w React, możemy skorzystać z literałów szablonu:
const App = () => { const textSize = 40; return ( <div className="container"> <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1> </div> );
};
Jak powiedzieliśmy wcześniej, znak dolara i nawiasy klamrowe służą do przytrzymywania naszego symbolu zastępczego, a to zwróci właściwy styl:
Możemy również wykonać ocenę w nawiasach klamrowych, załóżmy, że chcemy pomnożyć liczbę:
<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>
Jak korzystać z interpolacji ciągów za pomocą wyrażeń w React
Jak dotąd widzieliśmy, że możemy przeprowadzać oceny; ważne jest również, aby pamiętać, że możemy dodać wyrażenia w nawiasach klamrowych, aby uzyskać poprawną wartość na podstawie wyrażenia i użyć jej:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav ? 'mobile-nav' : ''}`}>NavBar</div> </div> );
};
Jak interpolować ciąg wielu linii za pomocą literałów szablonu
Jak powiedzieliśmy wcześniej, literały szablonu ułatwiają dodawanie symboli zastępczych do ciągów wielu wierszy:
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> );
};
W powyższym kodzie widzimy, jak łatwo jest używać literałów szablonowych w porównaniu do używania konkatenacji:
let sentence = "The fact that " + user.name+ " is " +user.age+ " years old and his hobby is " +user.hobby+ " amazes me.";
Jak korzystać z operatorów logicznych z literałami szablonowymi
Do tej pory widzieliśmy, jak przekazywać wyrażenia z operatorami trójskładnikowymi, najlepiej jest również zobaczyć, że operatory logiczne mogą również działać z literałami szablonów:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav && 'mobile-nav'}`}>NavBar</div> </div> );
};
Wnioski
W tym artykule dowiedzieliśmy się, jak zaimplementować interpolację ciągów za pomocą dwóch standardowych metod, a także jak potężne mogą być literały szablonów. Od czasu wprowadzenia literałów szablonowych większość osób preferuje ich używanie ze względu na prostotę użycia i znacznie lepszą czytelność kodu.
- '
- &
- a
- zdolność
- Konto
- osiągnięty
- działać
- w dodatku
- Chociaż
- zawsze
- Inne
- Aplikacja
- stosowany
- podejście
- na około
- artykuł
- stają się
- BEST
- Ulepsz Swój
- klasa
- kod
- w porównaniu
- kompleks
- Pojemnik
- zawiera
- mógłby
- Stwórz
- dane
- czynienia
- W zależności
- różne
- trudny
- Dolar
- dynamiczny
- osadzone
- szczególnie
- itp
- ewaluację
- przykład
- przykłady
- wyrażeń
- i terminów, a
- poprowadzi
- przytrzymaj
- W jaki sposób
- How To
- HTTPS
- wdrożenia
- ważny
- przykład
- IT
- duży
- dowiedziałem
- Linia
- linie
- Popatrz
- robić
- Dokonywanie
- metody
- jeszcze
- większość
- wielokrotność
- pomnożona
- numer
- operator
- operatorzy
- szczególny
- Ludzie
- mocny
- React
- odnosi
- powtarzać
- wymagać
- powrót
- powraca
- Powiedział
- znak
- ponieważ
- sytuacja
- So
- kilka
- specyficzny
- standard
- Stan
- Zestawienie sprzedaży
- Nadal
- styl
- biorąc
- Połączenia
- us
- posługiwać się
- wartość
- różnorodny
- sposoby
- w ciągu
- Praca
- pracujący
- XML
- lat