String'ler ve şablon string'leri

Telefonunun ekranında “Merhaba Aysel! 3 yeni mesajın var” yazısını görüyorsun. Program bu cümleyi hazır olarak saklamaz; onu parçalardan kurar: sabit kelimeler, kullanıcının adı ve mesaj sayısı. Metinle çalışmak programlamanın en sık yapılan işlerinden biridir.

String oluşturmak

String, karakterlerden oluşan bir dizidir. Tek tırnak, çift tırnak ya da ters tırnaklar (backtick) arasında yazılabilir. Tek ve çift tırnak aynı şekilde çalışır; önemli olan açan ve kapatan tırnağın aynı olmasıdır. String içinde özel karakterler için \ işareti kullanılır: \n yeni satır, \' ise tırnak karakteri demektir.

const single = 'Hello';
const double = "Hello";
const quote = 'It\'s JavaScript';

console.log(single, double);
console.log(quote);
console.log('Line 1\nLine 2');

Hello Hello
It's JavaScript
Line 1
Line 2

Uzunluk ve indeksler

length özelliği bir string'de kaç karakter olduğunu gösterir. Her karakterin kendi numarası, yani indeksi vardır ve sayma 0'dan başlar. Bu yüzden 'Baku' içinde B 0. indekste, u ise 3. indekstedir. Son karakteri at(-1) ile de alabilirsin.

const city = 'Baku';

console.log(city.length);
console.log(city[0]);
console.log(city[city.length - 1]);
console.log(city.at(-1));
console.log(city.toUpperCase());
console.log(city.toLowerCase());

4
B
u
u
BAKU
baku

Kullanışlı metotlar

Metot, bir değere “bağlı” olan bir fonksiyondur ve nokta ile çağrılır: city.toUpperCase(). String'lerin pek çok metodu vardır, ama günlük işlerin çoğu için aşağıdakiler yeterlidir.

const email = '  Leyla.Mammadova@Example.com  ';
const clean = email.trim().toLowerCase();

console.log(clean);
console.log(clean.includes('@'));
console.log(clean.indexOf('@'));
console.log(clean.slice(0, clean.indexOf('@')));
console.log(clean.endsWith('.com'));

leyla.mammadova@example.com
true
15
leyla.mammadova
true

const sentence = 'I love JavaScript';

console.log(sentence.replace('love', 'enjoy'));
console.log(sentence.split(' '));
console.log('ha'.repeat(3));
console.log('7'.padStart(3, '0'));
console.log(sentence);

I enjoy JavaScript
[ 'I', 'love', 'JavaScript' ]
hahaha
007
I love JavaScript

Şablon string'leri

Metni + ile parça parça yapıştırmak yorucudur ve bir boşluğu unutmak kolaydır. Şablon string'leri (template literals) bunu kolaylaştırır. Ters tırnaklar arasında yazılırlar; İngilizce klavyede bu tuş Esc'nin hemen altındadır, Türkçe Q klavyede ise genellikle AltGr ile yazılır. İçine ${...} yazınca süslü parantezdeki ifadenin değeri metne yerleştirilir.

const name = 'Aysel';
const messages = 3;

console.log('Hi, ' + name + '! You have ' + messages + ' new messages.');
console.log(`Hi, ${name}! You have ${messages} new messages.`);

Hi, Aysel! You have 3 new messages.
Hi, Aysel! You have 3 new messages.

${...} içine yalnızca değişken değil, herhangi bir ifade yazılabilir: bir hesaplama ya da metot çağrısı. Şablon string'leri birden fazla satırdan da oluşabilir; \n yazmaya gerek kalmaz. toFixed(2) metodu bir sayıyı virgülden sonra iki basamakla gösterir.

const item = 'bread';
const price = 0.8;
const quantity = 5;

console.log(`Total: ${price * quantity} AZN`);

const receipt = `Item: ${item.toUpperCase()}
Quantity: ${quantity}
Sum: ${(price * quantity).toFixed(2)} AZN`;
console.log(receipt);

Total: 4 AZN
Item: BREAD
Quantity: 5
Sum: 4.00 AZN

const name = 'Elvin';

console.log('Hi, ${name}');
console.log(`Hi, ${name}`);

Hi, ${name}
Hi, Elvin

Uygulama: kullanıcı adı oluşturmak

Öğrendiklerimizi birleştirelim. Tam addan bir kullanıcı adı oluşturuyoruz: split(' ') adı ve soyadı ayırır, toLowerCase() harfleri küçültür, şablon string'i de parçaları noktayla birleştirir. Kodu kendi adınla dene.

const fullName = 'Murad Aliyev';
const parts = fullName.split(' ');
const login = `${parts[0].toLowerCase()}.${parts[1].toLowerCase()}`;

console.log(parts);
console.log(login);
console.log(`Welcome, ${parts[0]}! Your login is ${login}`);

[ 'Murad', 'Aliyev' ]
murad.aliyev
Welcome, Murad! Your login is murad.aliyev

const rawName = '  Leyla HASANOVA ';
const year = 2012;
// 1) build and print the login leyla.hasanova12
// 2) print Login length: N

leyla.hasanova12
Login length: 16