Giriş
Dizelerle çalışırken, hala bir dize döndürmesi için bu tür dizeye dinamik olarak belirli bir değer eklememizi gerektiren durumlar ortaya çıkabilir, bunu yapma eylemi dize enterpolasyonu olarak adlandırılır.
Bu dinamik değer, bir değişken, durum veya dizeye gömülecek gerçek değeri içeren herhangi bir şey olabilir.
Bu kılavuzda, dizi enterpolasyonu gerektirebilecek çeşitli örnekleri ve bunların nasıl elde edilebileceğini dikkate alarak, dizi enterpolasyonunun React'te nasıl uygulanacağına bakacağız.
ES5 ve ES6'da Dize Enterpolasyonu
Dize enterpolasyonu iki şekilde gerçekleştirilebilir: birleştirme ve şablon değişmezleri. Bazıları birleştirmenin dize enterpolasyonu olmadığını iddia etse de, dize enterpolasyonu, birleştirmenin açıkça yaptığı gibi, yer tutucu değiştirme yaparak dizeler oluşturma yeteneğini ifade eder.
ES6'da şablon değişmezlerinin tanıtılmasından önce, birçok değişkenin değiştirilmesini gerektiren çok satırlı dizelerle uğraşırken çok zor olan birleştirmeyi her zaman kullanıyorduk. Şablon değişmezleri ES6'da tanıtıldığında, özellikle içine ifadeleri gömmek istediğimiz daha uzun veya çok satırlı dizeler için uygulanmasının çok daha kolay olduğunu kanıtladı.
Bu kılavuzda, her iki yönteme de bakacağız ve ardından önerilen yaklaşım olan şablon değişmezleri ile bazı örnekler uygulayacağız.
Birleştirme ile Tepkide Dize İnterpolasyonu
Birleştirme için standart yöntem, +
belirli bir değişken veya durum etrafında operatör:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={"font-bold text-" + fontSize}>Hello World</h1> </div> );
};
Yukarıdaki kodda, durumumuz var fontSize
değeri olan large
. Sınıfın dinamik olarak getirilmesini istiyoruz - örneğin text-small
, text-large
, text-medium
, vb. Devlete bağlı olarak, farklı bir className
böylece başlığa uygulanacaktır!
Birleştirme ile, önce gerçek dizimizi yerleştireceğiz ve ardından+
değişkeni gerçek dizeyle enterpolasyon yapmak için operatör, böylece enterpolasyonlu değeri döndürebilir:
Yukarıdaki yöntem, iki veya daha fazla değişken olduğumuzda ve özellikle dizeler sonuna değil başka bir dizeye eklendiğinde karmaşıklaşır.
Şablon Değişmezleri ile Tepki Verilecek Dize İnterpolasyonu
Bu, dize enterpolasyonuyla başa çıkmak için en iyi yöntemdir. ES6'ya eklendi ve o zamandan beri dize enterpolasyonu için en yaygın kullanılan yöntem haline geldi. Dize şablonu değişmezlerini kullanarak, önceki örneği tekrarlayalım:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={`font-bold text-${fontSize}`}>Hello World</h1> </div> );
};
Yukarıdaki kodda görebileceğimiz gibi, artık şablon değişmezlerinde plus operatörünü kullanmıyoruz, bunun yerine tüm dize için ters tikler kullanıyoruz ve ardından değişkenlerimizi ve dinamik değerlerimizi eklemek için dolar işaretini ve kaşlı ayraçları kullanıyoruz.
Açıklama değerlendirilir ve const fontSize
dizeye eklenir.
Biraz daha React string enterpolasyon örneklerine bakalım!
React'te Stil Değerlerini Geçmek için Dize Enterpolasyonu Nasıl Kullanılır?
React'te bir metni dahili olarak stillendirmek için kullanmak istediğimiz bir değişkende stil verilerimizin depolandığı bir durumda, şablon değişmezlerini kullanabiliriz:
const App = () => { const textSize = 40; return ( <div className="container"> <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1> </div> );
};
Daha önce de söylediğimiz gibi, yer tutucumuzu tutmak için dolar işareti ve kaşlı ayraçlar kullanılır ve bu, stili doğru şekilde döndürür:
Sayının çarpılmasını istediğimizi varsayalım, küme parantezleri içinde de değerlendirme yapabiliriz:
<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>
React'te İfadelerle Dize Enterpolasyonu Nasıl Kullanılır?
Şimdiye kadar değerlendirmeler yapabildiğimizi gördük; Ayrıca, ifadeye göre doğru değeri elde etmek ve kullanmak için kaşlı ayraçlar içine ifadeler ekleyebileceğimizi not etmek de önemlidir:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav ? 'mobile-nav' : ''}`}>NavBar</div> </div> );
};
Şablon Değişmezleri ile Birden Çok Satır Dizesi Nasıl İnterpolasyon Yapılır
Daha önce söylediğimiz gibi, şablon değişmezleri, birden çok satırdan oluşan dizelere yer tutucu eklemeyi kolaylaştırır:
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> );
};
Yukarıdaki kodda, şablon değişmezlerini kullanmanın birleştirme kullanmaya kıyasla ne kadar kolay olduğunu görüyoruz:
let sentence = "The fact that " + user.name+ " is " +user.age+ " years old and his hobby is " +user.hobby+ " amazes me.";
Şablon Değişmezleri ile Mantıksal Operatörler Nasıl Kullanılır
Şimdiye kadar üçlü operatörlerle ifadelerin nasıl iletileceğini gördük, ayrıca mantıksal operatörlerin şablon değişmezleriyle de çalışabileceğini görmek en iyisidir:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav && 'mobile-nav'}`}>NavBar</div> </div> );
};
Sonuç
Bu makalede, iki standart yöntemi kullanarak dize enterpolasyonunun nasıl uygulanacağını ve şablon değişmezlerinin ne kadar güçlü olabileceğini öğrendik. Şablon değişmezlerinin tanıtılmasından bu yana, çoğu insan, kullanım kolaylığı ve önemli ölçüde daha iyi kod okunabilirliği nedeniyle bunları kullanmayı tercih ediyor.
- '
- &
- a
- kabiliyet
- Hesap
- elde
- Hareket
- katma
- Rağmen
- her zaman
- Başka
- uygulamayı yükleyeceğiz
- uygulamalı
- yaklaşım
- etrafında
- göre
- müşterimiz
- İYİ
- Daha iyi
- sınıf
- kod
- karşılaştırıldığında
- karmaşık
- Konteyner
- içeren
- olabilir
- yaratmak
- veri
- ilgili
- bağlı
- farklı
- zor
- Dolar
- dinamik
- gömülü
- özellikle
- vb
- değerlendirme
- örnek
- örnekler
- ifade
- Ad
- rehberlik
- ambar
- Ne kadar
- Nasıl Yapılır
- HTTPS
- uygulamak
- önemli
- örnek
- IT
- büyük
- öğrendim
- çizgi
- hatları
- Bakın
- yapmak
- Yapımı
- yöntemleri
- Daha
- çoğu
- çoklu
- çarpılır
- numara
- Şebeke
- operatörler
- belirli
- İnsanlar
- güçlü
- React
- ifade eder
- tekrar et
- gerektirir
- dönüş
- İade
- Adı geçen
- işaret
- beri
- durum
- So
- biraz
- özel
- standart
- Eyalet
- Açıklama
- Yine
- stil
- alma
- The
- us
- kullanım
- değer
- çeşitli
- yolları
- içinde
- İş
- çalışma
- XML
- yıl