Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz.
Biçimlendirme, enterpolasyon ve daha fazlası için bu JavaScript kılavuzuyla dize ustası olun.
JavaScript'te, bir dize, bir çift tek veya çift tırnak işareti içine alınmış bir karakter grubudur. JavaScript'te dizeleri biçimlendirmenin birçok yolu vardır.
Dizeleri birleştirmek için belirli yöntemler veya işleçler kullanabilirsiniz. Hatta hangi dizenin nerede ve ne zaman görüneceğine karar vermek için belirli işlemler gerçekleştirebilirsiniz.
Birleştirme yöntemlerini ve şablon değişmezlerini kullanarak JavaScript dizelerinizi nasıl biçimlendireceğinizi öğrenin.
Dize Birleştirme
JavaScript, çeşitli yaklaşımlar kullanarak dizeleri birleştirmenize olanak tanır. Yararlı bir yaklaşım, concat() yöntem. Bu yöntem, iki veya daha fazla dize kullanır. Tek bir çağıran dize kullanır ve bir veya daha fazla dizeyi bağımsız değişken olarak alır.
const ilkAdı = "John";
sabit soyad = "Doe";izin vermek stringVal;
stringVal = firstName.concat("", soy isim);
konsol.log (dizeVal);
Burada concat, dize bağımsız değişkenlerini (boşluk ve soyadı) çağıran dizeye (ad) birleştirir. Kod daha sonra ortaya çıkan yeni dizgiyi bir değişkende (stringVal) depolar ve yeni değeri tarayıcı konsoluna yazdırır:
Bir dizi diziyi birleştirmenin başka bir yolu da artı işlecini kullanmaktır. Bu yöntem, yeni dizeler oluşturmak için dize değişkenlerini ve dize değişmezlerini birleştirmenizi sağlar.
const ilkAdı = "John";
const ortaAdı = "Mike";
sabit soyad = "Doe";izin vermek stringVal;
stringVal = ilkAdı + "" + ortaAdı + "" + soyadı;
konsol.log (dizeVal);
Yukarıdaki kod konsola aşağıdaki çıktıyı yazdırır:
JavaScript dizelerinizi birleştirmek için üçüncü bir yaklaşım, artı ve eşittir işaretinin kullanılmasını gerektirir. Bu yöntem, mevcut bir dizenin sonuna yeni bir dize eklemenizi sağlar.
const ilkAdı = "John";
sabit soyad = "Doe";izin vermek stringVal;
stringVal = ilkAdı;
stringVal += "";
stringVal += soyadı;
konsol.log (dizeVal);
Bu kod, firstName değişkenine bir boşluk ve lastName değişkeninin değerini ekleyerek aşağıdaki çıktıyı üretir:
Şablon Değişmezleri
Şablon sabit değerleri, JavaScript dizelerini biçimlendirmenize izin veren bir ES6 özelliğidir. Bir şablon değişmez değeri, dizeleri görüntülemek için bir çift ters tik (`) kullanır. Bu dize biçimlendirme yöntemi, JavaScript'te daha temiz çok satırlı dizeler görüntülemenizi sağlar.
izin vermek html;html = `<Ul>
<li> İsim: John Doe </li>
<li> Yaş: 24 </li>
<li> İş: Yazılım Mühendisi </li>
</ul>`;
belge.body.innerHTML = html;
Yukarıdaki JavaScript kodu, HTML tarayıcıda üç öğenin bir listesini yazdırmak için:
Aynı çıktıyı şablon değişmezleri olmadan (veya şablon değişmezlerinden önce) elde etmek için tırnak işaretleri kullanmanız gerekir. Ancak, şablon hazır bilgilerinde olduğu gibi kodu birden çok satıra genişletemezsiniz.
izin vermek html;html = "<Ul><li>İsim: John Doe</li><li>Yaş: 24</li><li>İş: Yazılım Mühendisi</li></ul>";
belge.body.innerHTML = html;
Dize Enterpolasyonu
Şablon hazır değerleri, enterpolasyon adı verilen bir işlemle JavaScript dizelerinizde ifadeler kullanmanıza olanak tanır. Dize enterpolasyonu ile ifadeleri veya değişkenleri kullanarak dizelerinize gömebilirsiniz. ${ifade} Yer tutucu. JavaScript şablon hazır değerlerinin değerinin gerçekten ortaya çıktığı yer burasıdır.
kullanıcıAdı = olsun "Jane Doe";
izin vermek yaş = 21;
iş bırak = "Web Geliştiricisi";
izin vermek deneyim = 3;izin vermek html;
html = `<Ul>
<li> İsim: ${userName} </li>
<li> Yaş: ${yaş} </li>
<li> İş Ünvanı: ${job} </li>
<li> Tecrübe Yılı: ${experience} </li>
<li> Geliştirici Düzeyi: ${experience < 5? "Junior'dan Orta'ya": "Kıdemli"} </li>
</ul>`;
belge.body.innerHTML = html;
Yukarıdaki kod, konsolda aşağıdaki çıktıyı üretir:
İlk dört argüman ${ifade} yer tutucular dize değişkenleridir, ancak beşinci koşullu bir ifadedir. İfade, tarayıcıda ne göstermesi gerektiğini dikte etmek için değişkenlerden birinin değerine (deneyim) dayanır.
Web Sayfanızdaki Öğeleri JavaScript ile Biçimlendirme
JavaScript, web sayfası geliştirmeyle olan işlevsel ilişkisinin yanı sıra, bir web sayfasının tasarımını ve düzenini etkilemek için HTML ile birlikte çalışır. Şablon hazır bilgilerinde olduğu gibi, bir web sayfasında görünen metni değiştirebilir.
Hatta HTML'yi resimlere dönüştürebilir ve bunları bir web sayfasında görüntüleyebilir.