JAVASCRIPT’IN TARIHÇESI

Javascript’de Template Literals Nedir?

Template Literals özellikle String işleme anlamında ne gibi avantajlar sağlar?

Onur Dayıbaşı

Published in

Frontend Development With JS

3 min readDec 3, 2019

Bu yazıyı daha önceden yazmış olduğum Javascript’in Tarihçesi yazısının bir devamı olarak yazıyorum. Bir çok kavramı tek bir yazıda ele almanın yaratacağı karmaşıklıktan kaçmak için bu yönteme başvurdum. Bu yazılardaki amacım önceden Javascript’in varolan hangi özelliklerinin yetmediğini ve bu geliştirmeyle neyi hedeflediklerini anlatacağım.

Template Literals nedir ? Bazı şeyleri örnekler üzerinden anlatmak daha kolay olduğu için ilk önce örnek vererek başlayacağım. sayHello isminde bir fonksiyonunuz olsun. Bu örnekte bu bilgiyi console basıyor olalım. Aşağıdaki şekilde String şablonları tanımlayarak istediğimiz değişkenlerle sonuç string oluşturup bunu istediğimiz yerlerde kullanma imkanı sağlamıştır.

sayHello(name, age){
   console.log(`My name is ${name} and I am ${age}  years old.`)
}
sayHello('Onur',39) //Output->My name is Onur and I am 39 years old

Stringler bizim programlamada en çok kullandığımız değişken türlerinden bir tanesidir. Özellikle UI geliştirmenin Web Development kısmında tarayıcıların DOM(Document Object Model) ile çalışması. Ve DOM modellerinin String oluşturabilmesi bizim çokça kullandığımız aşağıdaki gibi araçların kullanılıyordu.

String replace
Mustache.js
Handlebars.js

DOM kısmında bunlar React ile birlikte JSX içerisinde, String içerisindekilerde Template Literals içerisinde çözümlenmeye başladı. Bizim konumuz Template Literals olduğu için bu konuda String(Metin) üzerindeki yapılan String şablon olarak kullanan yapılara değineceğim.

String Tanımlama Yöntemleri
Template Literals Kullanım Şekilleri ve Amaçları

1. String Tanımlama Yöntemleri

Şu ana kadar String tanımlama yöntemi 2 taneydi single quotes(tek tırnak) veya double quotes(çift tırnak)

const name='Onur' const surname="Dayibasi"
console.log(name+" "+surname)

Peki ama neden 2 türde tanımlama yapabiliyoruz. Web geliştirme sırasında 2 farklı string iç içe koymamız gereken durumlar oluyorda ondan dolayı. Aşağıdaki çok anlamlı bir örnek olmadığını biliyorum sadece teknik olarak nasıl yapıldığını göstermek için bunu ekledim.

const desc='Onur "Dayibasi" and I am 39 years old'
console.log(desc)

Bir string tek tırnak ile tanımlanmış ise tek tırnak veya çift tırnak varsa çift tırnak yer alamaz bunun için escape karakteri \ kullanılır.

const desc='Onur \'Dayibasi\' and I am 39 years old'console.log(desc)

String birleştirme yöntemlerine(Concatenating) baktığımızda + ile bütün metin sayı vb birleştirebiliriz.

const my={name:'Onur',surname:'Dayibasi',age:39}
const desc='My name is '+my.name+' '+my.surname+" and age is "+my.age;
console.log(desc)

Eğer kodu yeni satır veya tab ile tanımlamak istersek string içerisine \t \n tanımlamalarını direk vermemiz gerekir.

const my={name:'Onur',surname:'Dayibasi',age:39}
const desc='My name is '+my.name+' '+my.surname+" \n age is "+my.age;
console.log(desc)

2. Template Literals Kullanım Şekilleri ve Amaçları

Yeni String tanımlama yöntemi => `backsticks` . bu sayede yukarıda yaptığımız işleri

Interpolation: Metinin içerisine değişkenleri yerleştirme(embedding)

const a=5;
const b=7;
console.log(`sum of a and b is ${a+b}`); 
//sum of a and b is 12
const my={name:'Onur', surname:'Dayibasi'}
console.log(`My name is ${my.name} ${my.surname}`); 
//My name is Onur Dayibasi

Multiline: \t \n Yeni satır veya tab için kullanılan bu karakterler yerine bu şekilde kodları tanımlayabilirsiniz

const string = `Ali say Hello!
                Veli say How Are you
                asas                 is awesome`;
console.log(string);

Template Tags: Çok daha kompleks tag işlemcileri oluşturmak istiyorsanız. DSL(Domain Spesific Language) benzeri oluşturulan metni değişik tanımlı mantıklara göre parse edip işletecek yapılar tanımlamak içinde bu Template Tags kullanabilirsiniz. Örneğin aşağıdaki sampleTags fonksiyonu bu şekilde bir şablon oluşturup bu şablonları kodun diğer yerlerinden kullanabilirsiniz.

function sampleTag(strings,name, surname) {
   return  `${strings[0]}${name[0]}...${strings[1]}${surname[0]}...`
}
const name='ONUR';
const surname='DAYIBASI';
const result=sampleTag`${name} and surname is${surname}.`;
console.log(result);//Result 'My name is O... and surname is D...'

3. Yorum

Bu tip string tanımlamalarında kod açık bir şekilde yaptığımız string işlemlerini bir soyutlama ile yapmanızı sağlayarak diğer ES6 özelliklerinde olduğu gibi kullanıcının kodu tek bir şekilde yazmasını sağlayan soyutlamalar koda gelmiş durumda. İleride Functional Programming konusundan bahsederken bu yapılarla neyin amaçlandığını daha çok ve daha üzerine durarak anlatacağım.

Referanslar

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.