Biçimlendirme, enterpolasyon ve daha fazlası için bu JavaScript kılavuzuyla bir dize yöneticisi 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 operatörler kullanabilirsiniz. Hangi dizenin nerede ve ne zaman görüneceğine karar vermek için belirli işlemleri bile 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. Kullanışlı bir yaklaşım concat() yöntemidir. Bu yöntem iki veya daha fazla dize kullanır. Tek bir çağrı dizesi kullanır ve bir veya daha fazla dizeyi argüman olarak alır.
const firstName = “John”;
const lastName = “Doe”;
let stringVal;
stringVal = firstName.concat(” “, lastName);
console.log(stringVal);
Burada concat, dize bağımsız değişkenlerini (boşluk ve soyadı) çağıran dizeye (firstName) birleştirir. Kod daha sonra ortaya çıkan yeni dizeyi bir değişkende (stringVal) saklar ve yeni değeri tarayıcı konsoluna yazdırır :
concat yöntemini kullanma
Bir dizi dizisini 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ştirmenize olanak tanır.
const firstName = “John”;
const middleName = “Mike”;
const lastName = “Doe”;
let stringVal;
stringVal = firstName + ” ” + middleName + ” ” + lastName;
console.log(stringVal);
Yukarıdaki kod, aşağıdaki çıktıyı konsola yazdırır:
Artı operatör dizisi birleştirme
JavaScript dizelerinizi birleştirmeye yönelik üçü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 firstName = “John”;
const lastName = “Doe”;
let stringVal;
stringVal = firstName;
stringVal += ” “;
stringVal += lastName;
console.log(stringVal);
Bu kod, firstName değişkenine bir boşluk ve lastName değişkeninin değerini ekleyerek aşağıdaki çıktıyı üretir:
Dize üzerinde artı ve eşit operatörler
Şablon değişmezleri, JavaScript dizelerini biçimlendirmenize izin veren bir ES6 özelliğidir. Bir şablon değişmezi, 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ülemenize olanak tanır.
let html;
html = `<ul>
<li> Name: John Doe </li>
<li> Age: 24 </li>
<li> Job: Software Engineer </li>
</ul>`;
document.body.innerHTML = html;
Yukarıdaki JavaScript kodu , tarayıcıda üç öğenin bir listesini yazdırmak için HTML’yi kullanır:
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 değişmezlerinde olduğu gibi kodu birden çok satıra genişletemezsiniz.
let html;
html = “<ul><li>Name: John Doe</li><li>Age: 24</li><li>Job: Software Engineer</li></ul>”;
document.body.innerHTML = html;
Dize Enterpolasyonu
Şablon değişmezleri, enterpolasyon adı verilen bir işlem aracılığıyla JavaScript dizelerinizdeki ifadeleri kullanmanıza olanak tanır. Dize enterpolasyonuyla, ${expression} yer tutucusunu kullanarak ifadeleri veya değişkenleri dizelerinize gömebilirsiniz . JavaScript şablon değişmezlerinin değeri tam olarak burada ortaya çıkıyor.
let userName = “Jane Doe”;
let age = 21;
let job = “Web Developer”;
let experience = 3;
let html;
html = `<ul>
<li> Name: ${userName} </li>
<li> Age: ${age} </li>
<li> Job Title: ${job} </li>
<li> Years of Experience: ${experience} </li>
<li> Developer Level: ${experience < 5 ? “Junior to Intermediate” : “Senior”} </li>
</ul>`;
document.body.innerHTML = html;
${expression} yer tutucusunun ilk dört bağımsız değişkeni dize değişkenleridir, ancak beşinci koşullu bir ifadedir. İfade, tarayıcıda neyi göstermesi gerektiğini dikte etmek için değişkenlerden birinin (deneyim) değerine dayanır.
JavaScript ile Web Sayfanızdaki Öğeleri Biçimlendirme
Web sayfası geliştirme ile işlevsel ilişkisinin yanı sıra JavaScript, bir web sayfasının tasarımını ve düzenini etkilemek için HTML ile birlikte çalışır. Şablon değişmezlerinde 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.