JavaScript'te Bir Dizeyi Nasıl Biçimlendirirsiniz?

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.

GÜNÜN YAPILAN VİDEOSU

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ğ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 dizgiyi bir değişkende (stringVal) saklar ve yeni değeri tarayıcı konsoluna yazdırır :

daha fazla google ödül anketi nasıl alınır

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:

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:

Şablon Değişmezleri

Ş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.

düşük pil modu ne işe yarar

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 kullanır HTML tarayıcıda üç öğeden oluşan bir liste 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 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 enterpolasyonu ile, dizelerinize ifadeleri veya değişkenleri aşağıdakileri kullanarak gömebilirsiniz: ${ifade} Yer tutucu. JavaScript şablon değişmezlerinin değeri tam olarak burada ortaya çıkıyor.

bazı şarkılar spotify'da neden çalınamı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;

Yukarıdaki kod konsolda aşağıdaki çıktıyı üretir:

İlk dört argüman ${ifade} yer tutucu 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.