ES6+'nın Özellikleri hakkında bilgi sahibi olmak için doğru adrestesiniz! Bu güncellemeler sayesinde JavaScript daha da güçlendi ve geliştiricilerin hayatı kolaylaştı Daha önce kullanmadığınız pek çok özellikle tanışacaksınız Gelip öğrenin!

ES6+, JavaScript dilinin en yeni sürümüdür ve daha pek çok özellik içermektedir. Bu özelliklerden biri de template literal'dır. Template literal, ES6+ ile birlikte gelen yeni bir string ifadesidir. Önceki JavaScript sürümlerinde kullanılan string ifadeleriyle karşılaştırıldığında daha işlevsel ve kullanımı kolaydır.

Template literal ifadeleri, backtick(`) karakterlerini kullanarak oluşturulur. Bu ifade içerisinde değişkenler ${} karakterleriyle kolayca kullanılabilir. Örneğin, bir değişkenin ismini template literal içerisinde kullanabilmek için ${variableName} şeklinde yazmak gerekmektedir. Bu gibi kolaylıklar sayesinde, string ifadeleri daha hızlı ve okunaklı bir şekilde oluşturulabilir.

Ayrıca, template literal ifadesi içerisinde nested değişken kullanımı da mümkündür. Bu sayede kodlar daha okunaklı hale gelir ve karışıklık azaltılır. Buna ek olarak, template literal içerisinde function kullanımı da oldukça yaygındır. Bu sayede birçok string ifadesini tek bir yerde toplamak mümkün olur.

ES6+ ile birlikte gelen template literal ifadelerinin kullanımı oldukça kolay ve harika sonuçlar verebilir. Kodlarınız daha okunaklı ve düzenli hale gelirken, ayrıca tagged template literal kullanımı sayesinde daha dinamik bir yapı oluşturabilirsiniz.

Template Literal Nasıl Kullanılır?

ES6+ ile birlikte gelen template literal özelliği, string ifadelerinin oluşturulmasında kolaylık sağlar. Bu özellik sayesinde, değişkenler de string ifadesi içerisinde kullanılabilir hale gelir. Template literal ifadeleri, backtick(`) karakterleri arasına yazılır. Değişkenler ise ${} karakterleri arasına yazılır.

Örneğin, "Merhaba, benim adım ${name}" şeklinde bir template literal ifadesinde, ${name} bölümü kullanıcının ismiyle değiştirilebilir. Bu sayede, benzer ama farklı verilerin kullanılması esnasında, aynı kod bloğu farklı değerlerle kolayca kullanılabilir.

Template literal ifadelerinin kullanımı, kodların daha okunaklı ve anlaşılır olmasına yardımcı olur. Özellikle birden fazla değişkenin kullanıldığı string ifadeleri, template literal ile daha kolay ve hızlı bir şekilde oluşturulabilir.

Değişken Kullanımı

ES6+ ile birlikte gelen template literal ifadeleri, string ifadeler içerisinde kolayca değişken kullanımı sağlar. Bu kullanımda değişkenler ${} içerisinde yazılır ve kolayca okunabilir. Aşağıdaki örnekte, template literal kullanımı ile birlikte değişken kullanımını görebilirsiniz:

Yukarıdaki örnekte, message değişkeni template literal ifadeleri kullanarak oluşturuldu. Bu sayede string ifadesi kolayca okunabilir hale getirildi. Değişken kullanımı, karmaşık ifadelerde özellikle kullanışlıdır.

Nested Değişken Kullanımı

Template literal ifadeleri içerisinde nested değişken kullanımı oldukça sık kullanılan bir yöntemdir. Bu kullanım sayesinde kodlar daha okunaklı ve düzenli bir yapıya kavuşur. Nested değişken kullanımı, iç içe geçmiş ifadelerde değişken kullanımını mümkün kılar ve daha derli toplu bir kod yazmanızı sağlar.

Bu özelliği kullanarak örneğin, birkaç değişkeni birleştirip bir yazı içerisinde kullanmak istediğinizde kolaylıkla uygulama yapabilirsiniz. Örneğin:

Yukarıdaki örnekte, ad ve soyad değişkenleri tanımlanarak bunları bir araya getiren bir mesaj yazılmıştır. Template literal ifadesini kullanarak, bu mesajı kolayca oluşturmamız mümkün olmuştur.

Bu özellik sayesinde kodlarınız daha okunaklı ve daha az hata olasılığı ile yazabilirsiniz. Nested değişken kullanımı, kodlarınızın büyüdükçe daha çekici ve daha okunaklı olmasını sağlar.

Function Kullanımı

Template literal ifadeleri, string ifadeleri oluşturmak için kullanılırken içerisinde fonksiyon kullanımı da oldukça yaygındır. Bu sayede birçok string ifadesi tek bir yerde toplanarak daha düzenli hale getirilebilir.

Örneğin, aşağıdaki örnekte bir fonksiyon kullanarak `fullName` adlı değişkenin içerisindeki isim ve soyisim bilgileri birleştirilmektedir.

```const firstName = 'John';const lastName = 'Doe';

const fullName = `${firstName} ${lastName}`;

console.log(`My name is ${fullName}.`);```

Bu örnek kodda fonksiyon kullanımı, isim ve soyisim bilgilerinin birleştirilerek `fullName` adlı değişkene atanmasında gerçekleştirilir. Daha sonra, `console.log()` metodu kullanılarak tam ad bilgisi template literal ifadesi içerisinde gösterilir.

Ayrıca, birden fazla değişkeni tek bir template literal ifadesi içerisinde kullanarak kodun okunabilirliğini artırmak mümkündür. Örneğin:

```const city = 'Istanbul';const country = 'Turkey';const population = 15000000;

const info = ` ${city} is a beautiful city located in ${country} with a population of ${population} people.`;

console.log(info);```

Bu örnekte, üç adet değişken tek bir template literal ifadesi içerisinde kullanılmaktadır. Bu sayede, kodun daha düzenli ve okunaklı hale gelmesi sağlanır.

Sonuç olarak, function kullanımı template literal ifadeleri içerisinde oldukça yaygın bir kullanımdır ve birçok string ifadesinin tek bir yerde toplanarak daha düzenli bir yapı oluşturulmasına olanak sağlar.

Tagged Template Literal Kullanımı

Tagged template literal, template literal ifadelerine ek özellikler eklemek için kullanılır. Bu özellik sayesinde, template literal ifadesi içerisindeki değişkenlere özellikler ekleyebilir, dinamik bir yapı oluşturabilir ve daha okunaklı kodlar yazabilirsiniz. Tagged template literal kullanımı, fonksiyonlarla birlikte kullanılarak daha gelişmiş özellikler eklemenizi sağlar.

Tagged template literal ifadesi, normal bir template literal ifadesinden farklı olarak önce bir fonksiyon adı ve ardından backtick karakteri ile oluşturulan ifadeden oluşur. Bu fonksiyon ile template literal ifadesi içinde kullanacağınız değişkenlere özellikler ekleyebilirsiniz.

Örneğin, aşağıdaki örnek üzerinden tagged template literal kullanımını anlayabiliriz:

```function toUpper(strings, ...values) { let str = ""; for (let i = 0; i < strings.length; i++) { if (i > 0) { str += values[i - 1].toUpperCase(); } str += strings[i]; } return str;}

const name = "john";const age = 30;const job = "developer";

const msg = toUpper`Hello ${name}, you are ${age} years old and work as a ${job}.`;console.log(msg); // Hello JOHN, you are 30 years old and work as a developer. ```

Yukarıdaki kod bloğunda, öncelikle `toUpper` adında bir fonksiyon tanımlanır. Bu fonksiyon, template literal ifadesinde kullanılacak olan değişkenlere upper case özelliği eklemektedir. Daha sonra, `name`, `age` ve `job` gibi değişkenler tanımlanır ve bu değişkenler template literal ifadesinde kullanılır.

Template literal ifadesi fonksiyon adı ile başlar ve backtick karakteri ile biter. Bu ifadenin içinde kullanacağınız değişkenler `${}` içerisinde yazılır. Örneğin, yukarıdaki kod bloğunda `name`, `age` ve `job` değişkenleri template literal ifadesine `${}` ile eklenir.

`msg` değişkeni, tagged template literal ifadesini kullanarak `toUpper` fonksiyonuna gönderilen değişkenlerin upper case özelliğini ekleyerek oluşan sonucu tutar. Sonuç olarak, ekrana "Hello JOHN, you are 30 years old and work as a developer." yazdırılır.

Tagged template literal, karmaşık ifadeler oluşturmak için de kullanılabilir. Özellikle dinamik HTML kodları oluşturmak için oldukça faydalıdır. Template literal ifadelerinin özelliklerini geliştirerek daha okunaklı ve dinamik kodlar yazabilirsiniz.

Template literal ifadeleriyle kod yazarken tagged template literal, yeni özellikler eklemek için kullanılabilir. Bu özellikler, kodların daha dinamik olmasını sağlar.

Bir function kullanarak, template literal ifadeleri içindeki değişkenlere özellikler ekleyebilirsiniz. Bu sayede, kodların daha anlaşılır hale gelmesini sağlayabilirsiniz. Örneğin:

let name = "John";let age = 25;function info(strings, nameExp, ageExp) {    const str0 = strings[0]; // "My name is "    const str1 = strings[1]; // " and I am "      let ageStr;    if(ageExp > 99){      ageStr = 'old';    } else {      ageStr = 'young';    }      return `${str0}${nameExp}${str1}${ageExp}. I am ${ageStr}.`;}let output = info`My name is ${name} and I am ${age}.`; // My name is John and I am 25. I am young.console.log(output);

My name is John and I am 25. I am young.

Bu şekilde, template literal ifadesi içindeki değişkenlere istediğiniz şekilde özellikler ekleyebilirsiniz. Bu da kodların daha dinamik hale gelmesine olanak sağlar.

Ayrıca, tagged template literal kullanarak, string ifadeleri içinde birden fazla değişkene de erişebilirsiniz. Örneğin:

function highlight(strings, ...values) {  let str = '';  strings.forEach((string, i) => {    str += `${string}${values[i] || ''}`  });  return str;}let name = 'John';let age = 25;let sentence = highlight`My name is ${name} and I am ${age} years old.`;console.log(sentence);

My name is John and I am 25 years old.

Bu örnek kodda da görüldüğü gibi, tagged template literal kullanarak birden fazla değişken içeren string ifadelerine istediğiniz şekilde erişebilirsiniz.

Örnek Kullanımlar

ES6+ ile gelen template literal ifadeleri, karakterler arasında değişkenlerin kolayca kullanılabilmesine olanak sağlayarak kodlarınızın daha okunaklı ve düzenli görünmesini sağlar. Ayrıca, bu ifadeleri kullanarak birden çok değişkeni tek bir cümlede birleştirebilirsiniz.

Örneğin, aşağıdaki kod bloğunda template literal ifadesi kullanılarak birden fazla değişken tek bir cümlede yazılmıştır:

let isim = 'John';let yaş = 30;let meslek = 'web geliştirici';let bilgi = `Benim adım ${isim}, ${yaş} yaşındayım ve ${meslek}im.`;console.log(bilgi);

Bu kod bloğunda, isim, yaş ve meslek değişkenleri template literal ifadesi içerisinde ${} karakterleri ile birleştirilmiştir.

Bunun yanında, tagged template literal kullanarak daha dinamik bir yapı oluşturmak da mümkündür. Örneğin, aşağıdaki kod bloğunda template literal ifadesi ile birlikte bir tag fonksiyonu kullanılmıştır:

let ad = 'Jane';let yas = 25;function bilgiGoster(strings, ad, yas) {  const yaşDurum = yas > 18 ? 'yetişkin' : 'çocuk';  return `${strings[0]}${ad}${strings[1]}${yaşDurum}${strings[2]}`;}const bilgi = bilgiGoster`Adım ${ad}. Yaşım ${yas} ve bir ${'${yaşDurum}'}um.`;console.log(bilgi);

Bu kod bloğunda, tag fonksiyonumuz "bilgiGoster" çağırılmıştır ve template literal ifadesi içerisindeki ${} karakterleri fonksiyon parametreleri ile birleştirilmiştir. Bu sayede, yaşa göre bir durum belirlenerek, bilgiye bu durum da eklenmiştir.

ES6+'nın template literal özelliği, kod yazımını daha okunaklı ve dinamik hale getirirken, geliştiricilere yeni birçok imkan sunmaktadır. Bu özelliği kullanarak iş akışınızı daha da pratikleştirebilir, kodlarınızın anlaşılabilirliğini artırabilirsiniz.