Metinler ve sayılarla çalışmak

Şimdiye kadar oyun verileriyle hesap yaptın ama sonuçları ekrana pek düzgün yazdıramadın: + ile uzayan satırlar, 3.3333333333333335 gibi bitmeyen sayılar, büyük-küçük harf yüzünden tutmayan karşılaştırmalar. Bu derste metinleri ve sayıları istediğin biçime sokmayı öğreniyorsun. Sonunda bir maç geçmişini okuyup her maçın KDA'sını ve kazanma oranını hizalı bir tabloyla gösteren bir program yazacaksın.

#Şablon metin: artı zincirine son

Ahri'nin maç skorunu Ders 1'den bildiğin yolla, + ile yazdır:

1const isim = "Ahri"2const kill = 73const olum = 24const asist = 95console.log(isim + " " + kill + "/" + olum + "/" + asist)

Ahri 7/2/9

Çalışıyor ama okuması zor: tırnak aç, kapat, artı, yine tırnak… Bir boşluğu unutmak ya da bir tırnağı yanlış yere koymak işten bile değil. Aynı satırı şablon metin ile yaz:

1const isim = "Ahri"2const kill = 73const olum = 24const asist = 95console.log(`${isim} ${kill}/${olum}/${asist}`)

Ahri 7/2/9

Metin çift tırnakla değil, ters tırnakla açılıp kapanıyor ve değişkenler metnin içine ${ } ile yerleşiyor. JavaScript ${isim} gördüğü yerde isim kutusunun içindekini yazar. Çıktı aynı, ama kod artık çıktının neye benzeyeceğini gösteriyor: boşluklar ve eğik çizgiler tam yerinde.

#Ters tırnak nasıl yazılır?

Ders 0'daki klavye tablosunda gördün: Türkçe Q klavyede ters tırnak AltGr + , ile yazılır. Virgül tuşu orta sıranın en sağında, İ'nin yanında ve Enter'ın hemen solundadır. AltGr, boşluk çubuğunun sağındaki Alt tuşudur.

Bu tuş bir ölü tuştur (dead key): basınca ekranda hemen bir şey çıkmaz, Windows bir sonraki tuşu bekler. Ardından Boşluk'a basınca ` belirir. Bu işareti Ders 7'de README'deki kod bloklarını yazarken de kullanmıştın.

#Yuvaya hesap da yazılır

${ } yuvasının içine sonucu bir değer olan her şeyi yazabilirsin: değişken, obje alanı (Ders 4), dizi elemanı (Ders 5), hesap ya da değer döndüren bir fonksiyon çağrısı (Ders 6). JavaScript önce yuvanın içini hesaplar, sonucu metne çevirip oraya koyar:

1const ahri = { isim: "Ahri", hp: 640, maxHp: 800 }2console.log(`${ahri.isim}: ${ahri.hp}/${ahri.maxHp} can`)3console.log(`Can yüzdesi: ${ahri.hp / ahri.maxHp * 100}`)4console.log(`Yarısı: ${ahri.maxHp / 2}`)

Ahri: 640/800 canCan yüzdesi: 80Yarısı: 400

Şablon metnin içinde çift tırnak da serbesttir: `"${isim}" bulunamadı` yazabilirsin. Çift tırnaklı bir metnin içine çift tırnak koymaya kalksaydın metin erken kapanırdı.

#Çok satırlı metin

Çift tırnaklı metin aynı satırda bitmek zorundadır. Ters tırnaklı metin ise birden çok satıra yayılabilir; satır sonları da metnin parçası olur:

1const isim = "Lux"2const seviye = 113const kart = `Şampiyon: ${isim}4Seviye: ${seviye}5Durum: hazır`6console.log(kart)

PS C:\kod\ogren> node ders9.jsŞampiyon: LuxSeviye: 11Durum: hazır

#Yuva yalnızca ters tırnakta çalışır

console.log("KDA: ${kda}")

console.log(`KDA: ${kda}`)

Çift ya da tek tırnak içindeki ${kda} sıradan bir yazıdır: ekrana harfi harfine basılır ve hata mesajı çıkmadığı için gözden kaçar. Ters tırnağı ona benzeyen kesme işaretiyle (') karıştırırsan da yuva çalışmaz.

#Metin metotları: metne iş yaptırmak

Ders 5'te diziye takim.push("Lux") ile eleman ekledin; değerin arkasına nokta koyup bir metot çağırdın. Metinlerin de hazır metotları var: büyük harfe çevirmek, içinde aramak, parçalara bölmek, boşluk temizlemek… Hepsi aynı kalıpla yazılır: metin.metotAdi(…); parantezin içine metodun argümanları gelir.

Önemli bir fark var: push dizinin kendisini değiştiriyordu, metin metotları ise metne dokunmaz. Büyütülmüş, kırpılmış ya da değiştirilmiş hâlini yeni bir metin olarak döndürürler. Sonucu kullanmak istiyorsan ya yazdırırsın ya da bir kutuya koyarsın:

1let mesaj = "gg wp"2mesaj.toUpperCase()3console.log(mesaj)4mesaj = mesaj.toUpperCase()5console.log(mesaj)

gg wpGG WP

İkinci satır büyük harfli yeni metni üretti ama hiçbir yere koymadı; Ders 1'deki "hesaplamak yetmez, koymak gerekir" tuzağının aynısı. Dördüncü satır sonucu mesaj kutusuna geri koyduğu için değişiklik kaldı.

#length: kaç karakter?

1const yer = "Sihirdar Vadisi"2console.log(yer.length)3console.log(yer[0])4console.log(yer[yer.length - 1])

15Si

length boşluk dahil karakter sayısını verir. Metin, harflerden oluşan bir dizi gibidir: her karakterin 0'dan başlayan bir sıra numarası vardır ve son karakter length - 1 numaradadır. Dizilerdeki gibi length bir metot değil, bir alandır; sonuna parantez koyarsan TypeError: yer.length is not a function alırsın.

#toUpperCase ve toLowerCase: büyük-küçük harf

Ders 2'den biliyorsun: "TEEMO" ile "Teemo" JavaScript için iki ayrı metindir. Oyuncunun nasıl yazdığını bilemezsin; karşılaştırmadan önce iki tarafı da aynı biçime getir:

1const yazilan = "TEEMO"2console.log(yazilan.toLowerCase())3console.log(yazilan === "Teemo")4console.log(yazilan.toLowerCase() === "teemo")

teemofalsetrue

toUpperCase() bütün harfleri büyütür, toLowerCase() küçültür. İkisi de argüman almaz ama parantezleri şarttır. Türkçe harflerde bu iki metodun bir tuzağı var; ona ayrı bir bölüm ayırdık.

#includes ve startsWith: sohbet filtresi

1const mesaj = "Bu Teemo tam bir NOOB"2console.log(mesaj.includes("Teemo"))3console.log(mesaj.includes("noob"))4console.log(mesaj.toLowerCase().includes("noob"))

truefalsetrue

includes, aradığın parça metnin herhangi bir yerinde geçiyorsa true, geçmiyorsa false döndürür; Ders 5'te dizilerde kullandığın includes'un metin hâli. Büyük-küçük harfe duyarlıdır, bu yüzden ikinci satır false.

Üçüncü satırda iki metot art arda çalıştı: önce toLowerCase() küçük harfli yeni bir metin üretti, includes o yeni metnin üstünde çalıştı. Buna zincirleme denir. Dizilerle Ders 11'de çok daha uzun zincirler kuracaksın.

startsWith ise yalnızca metnin başına bakar. Sohbette / ile başlayan mesajlar komuttur:

1const mesaj = "/mute Teemo"2if (mesaj.startsWith("/mute ")) {3    console.log("Susturma komutu")4} else {5    console.log("Normal mesaj")6}

Susturma komutu

#slice: bir parçayı kesip almak

slice(baslangic, bitis) metnin bir parçasını kopyalar: başlangıçtaki karakter dahil, bitişteki hariç. Akılda tutmanın iyi bir yolu, numaraları harflerin üstüne değil aralarına çizilmiş kesim çizgileri gibi düşünmek. slice(1, 3) "1 numaralı çizgiden kes, 3 numaralı çizgiye kadar al" demektir:

1const isim = "Garen"2console.log(isim.slice(0, 3))3console.log(isim.slice(1, 3))4console.log(isim.slice(2))5console.log(isim.slice(-2))6console.log(isim.slice(0, 99))

GararrenenGaren

• slice(0, 3): 0 ile 3 numaralı çizgiler arası, yani ilk üç harf.
• Tek argüman verirsen sona kadar gider: slice(2).
• Eksi sayı sondan sayar: slice(-2) son iki harf.
• Sınırın ötesine taşarsan hata çıkmaz, elinde ne varsa o gelir: slice(0, 99).

startsWith ile birlikte kullanınca komutun hedefini ayıklayabilirsin. "/mute " altı karakterdir (eğik çizgi, dört harf, boşluk), bu yüzden hedef 6 numaralı çizgiden başlar:

1const mesaj = "/mute Teemo"2if (mesaj.startsWith("/mute ")) {3    const hedef = mesaj.slice(6)4    console.log(`${hedef} susturuldu`)5}

Teemo susturuldu

#split: metni diziye bölmek

1const takimMetni = "Ahri,Lux,Garen"2const takim = takimMetni.split(",")3console.log(takim)4console.log(takim.length)5for (const sampiyon of takim) {6    console.log(`- ${sampiyon}`)7}

[ 'Ahri', 'Lux', 'Garen' ]3- Ahri- Lux- Garen

split(ayirici) metni ayırıcının geçtiği her yerden keser ve parçaları bir dizi olarak döndürür; ayırıcının kendisi atılır. Sonuç Ders 5'teki dizilerden farksızdır: length'i var, for...of ile gezebilirsin. Dışarıdan gelen virgüllü listeler, 7/2/9 gibi skorlar, Ad#Etiket biçimindeki oyuncu kimlikleri hep böyle parçalanır.

#trim: baştaki ve sondaki boşluklar

Kullanıcının yazdığı metinler (ileride klavyeden ve formlardan alacaksın) çoğu zaman başında ya da sonunda fazladan boşlukla gelir. trim() bu boşlukları atar, aradakilere dokunmaz:

1const girilen = "   Sihirdar Vadisi  "2console.log(`[${girilen}]`)3console.log(`[${girilen.trim()}]`)4console.log(girilen.trim() === "Sihirdar Vadisi")

[   Sihirdar Vadisi  ][Sihirdar Vadisi]true

Köşeli parantezleri yalnızca boşlukları görebilmek için koyduk; terminalde boşluk görünmez.

#replace ve replaceAll: değiştirmek

1const mesaj = "noob Teemo, gerçekten noob"2console.log(mesaj.replace("noob", "****"))3console.log(mesaj.replaceAll("noob", "****"))

**** Teemo, gerçekten noob**** Teemo, gerçekten ****

replace(aranan, yeni) yalnızca ilk bulduğunu değiştirir; hepsini değiştirmek için replaceAll var. İkisi de büyük-küçük harfe duyarlıdır, yani "NOOB" yakalanmaz. Aranan parça hiç yoksa metin olduğu gibi geri gelir, hata çıkmaz.

#padStart ve padEnd: hizalı tablo

Ders 8'deki skor tablonun sütunları hizasız kalmıştı: adlar farklı uzunlukta olunca arkalarındaki sayılar kayıyordu. Sütunları hizalamak için her hücreyi aynı uzunluğa getirmen gerekir. padEnd(uzunluk) metnin sonuna, padStart(uzunluk) başına boşluk ekleyerek onu o uzunluğa tamamlar. Dükkândaki eşya listesiyle dene:

1console.log("Kılıç".padEnd(8) + "450".padStart(6))2console.log("İksir".padEnd(8) + "50".padStart(6))3console.log("Kalkan".padEnd(8) + "1100".padStart(6))

Kılıç      450İksir       50Kalkan    1100

Adlar sola, fiyatlar sağa yaslandı; sağa yaslanan sayıların basamakları alt alta gelir. İkinci argüman boşluk yerine eklenecek karakteri söyler: "7".padStart(2, "0") sonucu "07". Metin zaten o uzunluktaysa ya da daha uzunsa hiçbir şey eklenmez, metin kısaltılmaz da; sütun genişliğini en uzun değere göre seç.

padStart bir metin metodudur. Sayıda çağırırsan program durur; çözümünü Sık hatalar bölümünde göreceksin.

Bu bölümdeki metotların hepsi bir arada:

#Türkçe harf tuzağı: i ile İ

toUpperCase ve toLowerCase hangi dilde yazdığını bilmez; İngilizceye uyan, dilden bağımsız kurallarla çalışır. İngilizcede noktalı ve noktasız i ayrımı yoktur: küçük i'nin büyüğü I'dır. Türkçede ise iki ayrı çift var: ı ile I, i ile İ. Sonuç:

1console.log("iyi oyunlar".toUpperCase())2console.log("İYİ OYUNLAR".toLowerCase())3console.log("İYİ OYUNLAR".toLowerCase().includes("iyi"))4console.log("İ".toLowerCase().length)

IYI OYUNLARi̇yi̇ oyunlarfalse2

İlk satırda noktalar kayboldu. İkinci satır daha sinsi: İ küçültülünce ekranda i'ye benzeyen ama iki karakterden oluşan bir şey çıktı: bir i ve onun üstüne binen ayrı bir nokta işareti. Fark etmeyebilirsin, ama dördüncü satır uzunluğun 2 olduğunu söylüyor. Üçüncü satırın false vermesinin sebebi bu: sohbet filtren "İYİ" yazan herkesi kaçırır.

Çözüm, dili söyleyerek çevirmek:

1console.log("iyi oyunlar".toLocaleUpperCase("tr"))2console.log("İYİ OYUNLAR".toLocaleLowerCase("tr"))3console.log("İYİ OYUNLAR".toLocaleLowerCase("tr").includes("iyi"))

İYİ OYUNLARiyi oyunlartrue

toLocaleUpperCase ve toLocaleLowerCase parantezde verdiğin dilin kurallarını kullanır; "tr" Türkçe demek.

Türkçe kurallar da her yerde doğru değildir. "tr" her I'yı ı yapar; İngilizce bir sözcüğü Türkçe kuralla küçültürsen bu kez o bozulur:

1console.log("DOUBLE KILL".toLocaleLowerCase("tr"))2console.log("DOUBLE KILL".toLowerCase())

double kılldouble kill

Kural: metin hangi dildeyse onun kuralını kullan. Türkçe metinde toLocaleUpperCase("tr") ve toLocaleLowerCase("tr"); İngilizce sözcüklerde, komutlarda ve oyuncu etiketi gibi kodlarda düz toUpperCase ve toLowerCase.

#Metinden sayıya, sayıdan metne

Ders 1'de "5" + 3 işleminin 53 verdiğini görmüştün: +'nın bir yanında metin varsa toplamaz, yapıştırır. Sorun şu ki dışarıdan gelen sayılar çoğu zaman metin olarak gelir: klavyeden yazılan, dosyadan okunan, bir siteden gelen ya da split ile ayrılan her şey. Hesaba başlamadan önce onları sayıya çevirmen gerekir.

1const altinMetni = "300"2console.log(altinMetni + 50)3console.log(Number(altinMetni) + 50)

30050350

#Number, parseInt, parseFloat

Metni sayıya çevirmenin üç yolu var. Farkları, metin tam bir sayı olmadığında ortaya çıkar:

1console.log(Number("12 kill"), parseInt("12 kill"))2console.log(Number("3.5"), parseInt("3.5"), parseFloat("3.5"))3console.log(Number("3,5"), parseFloat("3,5"))4console.log(Number(""), parseInt(""))

NaN 123.5 3 3.5NaN 30 NaN

• Number metnin tamamının sayı olmasını ister; değilse NaN verir (birazdan ayrıntısıyla). Baştaki ve sondaki boşlukları affeder. Boş metni ise 0 sayar: kullanıcı hiçbir şey yazmasa da elinde bir 0 olur, dikkat.
• parseInt baştan okumaya başlar, sayı olmayan ilk karakterde durur ve o ana kadar okuduğu tam sayıyı verir. Küsuratı yuvarlamaz, keser: parseInt("3.9") sonucu 3.
• parseFloat da baştan okur ama ondalıklı sayıyı da alır.

Hangisini seçmeli? Kural olarak Number: metin tam bir sayı değilse bunu sana açıkça söyler. parseInt ve parseFloat'ı yalnızca "12 kill", "3.5 saniye" gibi sayının arkasından yazı geldiğini bildiğin durumlarda kullan.

#Sayıdan metne: String, şablon metin ve toFixed

Ters yönde de birkaç yol var. String(sayi) sayıyı metne çevirir; şablon metne koymak da aynı işi görür:

1const kill = 72console.log(String(kill) + 1)3console.log(`${kill}` + 1)4console.log(kill + 1)

71718

Ondalıklı bir sayıyı belli sayıda basamakla göstermek için toFixed(basamak) var. Fazla basamakları yuvarlayarak atar, eksik basamakları sıfırla doldurur:

1const kda = 16 / 32console.log(kda)3console.log(kda.toFixed(2))4console.log(kda.toFixed(0))5console.log((5).toFixed(2))

5.3333333333333335.3355.00

Son satırdaki parantez şart. 5.toFixed(2) yazarsan JavaScript 5.'i ondalıklı bir sayının başı sanır ve SyntaxError: Invalid or unexpected token verir. Değişkenle (kda.toFixed(2)) böyle bir sorun yok.

#NaN: sayı olmayan sayı

Number("12 kill") sonucundaki NaN, İngilizce Not a Number (sayı değil) sözünün kısaltması. JavaScript bir sayı üretmesi gerekirken üretemediğinde program durmaz; bu özel değeri verir ve yoluna devam eder.

Ders 3'te "R: " + maliyet - mana satırının NaN verdiğini görmüş, sebebini bu derse bırakmıştık. + bir metinle karşılaşınca yapıştırır. -, * ve / ise yalnızca sayılarla çalışır, bu yüzden JavaScript metni önce sessizce sayıya çevirmeyi dener:

1console.log("300" - 50)2console.log("300" + 50)3console.log("R: 100" - 90)

25030050NaN

"300" sayıya çevrilebildiği için çıkarma çalıştı; "R: 100" çevrilemedi ve NaN oldu. Bu sessiz çevirmeye güvenme: hesaba girecek metni her zaman kendin, Number ile çevir.

NaN'ın asıl tehlikesi bulaşıcı olması. Ahri'nin objesinde olum alanını olumm diye yanlış yazdığını düşün:

1const ahri = { kill: 7, olum: 2, asist: 9 }2const kda = (ahri.kill + ahri.asist) / ahri.olumm3console.log(kda)4console.log(kda * 2 + 1)5console.log(`KDA: ${kda.toFixed(2)}`)

NaNNaNKDA: NaN

olumm diye bir alan yok, değeri undefined (Ders 4). undefined ile bölme NaN verdi, NaN da girdiği her hesaba bulaştı. Program hiç hata vermedi ve yanlış sonuç sessizce ekrana kadar geldi: bir hata mesajı yeri gösterirdi, NaN'ın izini ise sen sürmelisin. Bu bir mantık hatası: kod çalışıyor, sonuç yanlış.

#NaN nasıl yakalanır?

Akla ilk gelen deger === NaN hiçbir zaman çalışmaz: NaN hiçbir şeye eşit değildir, kendisine bile.

1const sayi = Number("on iki")2console.log(sayi === NaN)3console.log(Number.isNaN(sayi))

falsetrue

Doğru araç Number.isNaN(deger): değer NaN ise true döndürür. Dışarıdan gelen bir metni sayıya çevirdikten hemen sonra bununla denetle:

1const girilen = "12 kill"2const kill = Number(girilen)3if (Number.isNaN(kill)) {4    console.log(`"${girilen}" bir sayı değil`)5} else {6    console.log(`Kill: ${kill}`)7}

"12 kill" bir sayı değil

girilen'i "12" yapıp yeniden çalıştır: bu kez Kill: 12 yazmalı. İki kolu da denemek, Ders 2'den beri yaptığın sınır değeri denemesinin bir parçası.

#Math ile yuvarlamak ve sınırlamak

Ders 1'de 10 / 3 sonucunun 3.3333333333333335 çıktığını görmüş, yuvarlamayı bu derse bırakmıştık. Ders 6'da da Math.floor ile rastgele hasarın küsuratını atmıştın. Math, hesap araçlarının durduğu hazır bir obje; içinde yuvarlamak ve sınırlamak için başka araçlar da var.

#round, floor, ceil

1console.log(Math.round(2.4), Math.round(2.5), Math.round(2.6))2console.log(Math.floor(2.4), Math.floor(2.9))3console.log(Math.ceil(2.1), Math.ceil(2.9))

2 3 32 23 3

• Math.round: en yakın tam sayıya gider; tam ortadaki .5 yukarı yuvarlanır.
• Math.floor: her zaman aşağı (İngilizcesi floor, taban).
• Math.ceil: her zaman yukarı (İngilizcesi ceiling, tavan).

Hangisini ne zaman seçeceğini, soruyu oyuna çevirerek bulursun:

1const deneyim = 10002const seviyeBasina = 2803console.log(`Tam seviye: ${Math.floor(deneyim / seviyeBasina)}`)4 5const baronCani = 36006const saniyeHasari = 2507console.log(`Baron ${Math.ceil(baronCani / saniyeHasari)} saniyede düşer`)8 9const canYuzdesi = 640 / 900 * 10010console.log(`Can: %${Math.round(canYuzdesi)}`)

Tam seviye: 3Baron 15 saniyede düşerCan: %71

• 1000 / 280 yaklaşık 3.57. Yarım seviye sayılmaz; kaç tam seviye atlandığını floor verir.
• 3600 / 250 sonucu 14.4. 14 saniyede düşmeyen Baron'a 15. saniyede de vurman gerekir: "kaç tane gerekir?" sorusunun cevabı ceil.
• Ekranda gösterilecek bir yüzde için en yakını, round.

#max, min ve abs

1console.log(Math.max(3, 8, 5))2console.log(Math.min(3, 8, 5))3console.log(Math.abs(-1200))

831200

Math.max verdiğin sayıların en büyüğünü, Math.min en küçüğünü döndürür. Oyunda asıl işleri sınırlamaktır: can 0'ın altına inmemeli, iksir canı en yüksek değerin üstüne çıkarmamalı.

1const maxHp = 8002let hp = 1203hp = Math.max(0, hp - 300)4console.log(`Darbeden sonra: ${hp}`)5hp = Math.min(maxHp, hp + 1000)6console.log(`İksirden sonra: ${hp}`)

Darbeden sonra: 0İksirden sonra: 800

Math.max(0, hp - 300) şunu der: "hp - 300 ile 0'dan hangisi büyükse onu al." Sonuç eksiye düşerse 0 kazanır. Ders 2'de bunu bir if ile yapardın; Math.max aynı işi tek satırda görür. Math.min(maxHp, …) de tavanı koyar.

Math.abs bir sayının eksi işaretini atar, yalnızca büyüklüğünü bırakır. İki takım arasındaki altın farkını, kimin önde olduğuna bakmadan hesaplamak için:

1const maviAltin = 387502const kirmiziAltin = 412003console.log(maviAltin - kirmiziAltin)4console.log(`Altın farkı: ${Math.abs(maviAltin - kirmiziAltin)}`)

-2450Altın farkı: 2450

#Belli bir basamağa yuvarlamak

Math.round hep tam sayıya yuvarlar. Bir basamak istiyorsan sayıyı 10 ile çarp, yuvarla, 10'a böl; iki basamak için 100 ile:

1const kda = 16 / 32console.log(Math.round(kda * 10) / 10)3console.log(Math.round(kda * 100) / 100)4console.log(kda.toFixed(2))

5.35.335.33

Son iki satır aynı görünüyor ama biri sayı, öteki metin:

#Ondalık tuzağı: 0.1 + 0.2

Şunu çalıştırmadan önce sonucu tahmin et:

1console.log(0.1 + 0.2)2console.log(0.1 + 0.2 === 0.3)

0.30000000000000004false

JavaScript bozuk değil. Bilgisayar sayıları ikilik sistemde, yalnızca 0 ve 1 ile saklar. Onluk sistemde üçte biri sonlu sayıda basamakla yazamadığın gibi (0.3333…), ikilik sistemde de 0.1 sonlu basamakla yazılamaz.

Bilgisayar bir yerde keser ve küçük bir yuvarlama payı kalır; Ders 1'deki 3.3333333333333335'in sonundaki 5 de bu kesmenin iziydi. Bu JavaScript'e özgü değil: Python, Java, C# gibi dillerde de 0.1 + 0.2, 0.3'e eşit çıkmaz.

Bu küçük pay, ekranda çirkin durmasından çok karşılaştırmaları bozduğu için önemlidir. Çözümler:

1const toplam = 0.1 + 0.22console.log(toplam.toFixed(2))3console.log(Math.round(toplam * 100) / 100)4console.log(Math.round(toplam * 100) / 100 === 0.3)

0.300.3true

1. Ekranda gösterirken toFixed ile basamak sayısını sınırla.
2. Ondalıklı iki sayıyı karşılaştırmadan önce ikisini de aynı basamağa yuvarla.
3. Kuruşu kuruşuna doğru olması gereken değerleri, örneğin parayı, tam sayı olarak tut: 19,99 lirayı 19.99 değil 1999 kuruş olarak saklamak bu sorunu baştan ortadan kaldırır. Oyundaki altın zaten tam sayıdır; tuzak yalnızca ondalıklı değerlerde çıkar.

#Uygulama: KDA ve kazanma oranı

Şimdi hepsini birleştir. LoL'ün maç geçmişinde skor 7/2/9 biçiminde yazılır: kill, ölüm, asist. KDA, kill ve asist toplamının ölüm sayısına bölümüdür; ne kadar yüksekse oyuncu o kadar az ölüp o kadar çok katkı vermiştir. Programı adım adım kuracağız: hedef, birkaç maçlık geçmişi metin olarak alıp her maçın KDA'sını, genel KDA'yı ve kazanma oranını hizalı bir tabloda göstermek.

#Adım 1: skoru parçala

1const skor = "7/2/9"2const parcalar = skor.split("/")3console.log(parcalar)4console.log(parcalar[0] + parcalar[2])

[ '7', '2', '9' ]79

Kill ile asisti toplamak isterken 79 çıktı: dizideki tek tırnaklar parçaların metin olduğunu söylüyor, + de onları yapıştırdı. Her parçayı sayıya çevir:

1const parcalar = "7/2/9".split("/")2const kill = Number(parcalar[0])3const olum = Number(parcalar[1])4const asist = Number(parcalar[2])5const kda = (kill + asist) / olum6console.log(`KDA: ${kda.toFixed(2)}`)

KDA: 8.00

#Adım 2: hiç ölmeyen oyuncu

Aynı kodu 10/0/6 skoruyla çalıştır:

1const parcalar = "10/0/6".split("/")2const kill = Number(parcalar[0])3const olum = Number(parcalar[1])4const asist = Number(parcalar[2])5const kda = (kill + asist) / olum6console.log(`KDA: ${kda.toFixed(2)}`)

KDA: Infinity

Sıfıra bölmek hata vermez, Infinity (sonsuz) verir; bunu Ders 1'de görmüştün. toFixed de onu olduğu gibi metne çevirdi. Maç istatistiği gösteren siteler bu durumda genellikle "Perfect" (kusursuz) yazar; sen de bölmeden önce ölüm sayısına bakmalısın. İşi bir fonksiyona koy:

1function kdaMetni(kill, olum, asist) {2    if (olum === 0) {3        return "Kusursuz"4    }5    return ((kill + asist) / olum).toFixed(2)6}7 8console.log(kdaMetni(7, 2, 9))9console.log(kdaMetni(10, 0, 6))10console.log(kdaMetni(1, 8, 2))11console.log(kdaMetni(0, 0, 0))

8.00Kusursuz0.38Kusursuz

olum 0 ise fonksiyon erken çıkış yapar ve bölme satırına hiç gelinmez. Son satıra dikkat: hiç oynamamış gibi duran 0/0/0 da "Kusursuz" sayıldı. Hata değil ama tartışmalı bir sonuç; "çalışıyor" ile "doğru" arasındaki farkı yine sınır değeri gösterdi. İstersen kill + asist 0 iken ayrı bir metin döndürebilirsin.

#Adım 3: kazanma oranı

1function oranMetni(galibiyet, macSayisi) {2    const yuzde = galibiyet / macSayisi * 1003    return `%${yuzde.toFixed(1)}`4}5 6console.log(oranMetni(3, 5))7console.log(oranMetni(2, 3))8console.log(oranMetni(0, 0))

%60.0%66.7%NaN

0 / 0 sonucu Infinity değil NaN'dır: sıfırın sıfıra bölümü tanımsızdır. Hiç maç oynamamış birine %NaN göstermek istemezsin; yine bölmeden önce denetle. Bir de Türkçede ondalık ayırıcı virgüldür ve yüzde işareti sayının önüne gelir. toFixed'in verdiği metindeki noktayı replace ile virgüle çevir:

1function oranMetni(galibiyet, macSayisi) {2    if (macSayisi === 0) {3        return "maç yok"4    }5    const yuzde = galibiyet / macSayisi * 1006    return `%${yuzde.toFixed(1).replace(".", ",")}`7}8 9console.log(oranMetni(3, 5))10console.log(oranMetni(2, 3))11console.log(oranMetni(0, 0))

%60,0%66,7maç yok

Sıra önemli: önce hesap (sayı), sonra toFixed (metin), en son replace (metin). Virgüllü metin artık hesaba girmemeli; Number onu anlamaz.

#Hepsi bir arada

Maç geçmişi tek bir metin olarak geliyor: maçlar ", " ile ayrılmış, her maçta skor ve sonuç var (G galibiyet, M mağlubiyet). ders9.js'in içini boşaltıp programın tamamını yaz:

1function kdaMetni(kill, olum, asist) {2    if (olum === 0) {3        return "Kusursuz"4    }5    return ((kill + asist) / olum).toFixed(2)6}7 8function oranMetni(galibiyet, macSayisi) {9    if (macSayisi === 0) {10        return "maç yok"11    }12    const yuzde = galibiyet / macSayisi * 10013    return `%${yuzde.toFixed(1).replace(".", ",")}`14}15 16const gecmis = "7/2/9 G, 3/5/4 M, 10/0/6 G, 1/8/2 M, 5/3/11 G"17const maclar = gecmis.split(", ")18let toplamKill = 019let toplamOlum = 020let toplamAsist = 021let galibiyet = 022 23console.log("Maç  Skor     KDA       Sonuç")24for (let i = 0; i < maclar.length; i++) {25    const parcalar = maclar[i].split(" ")26    const skor = parcalar[0]27    const sonuc = parcalar[1]28    const sayilar = skor.split("/")29    const kill = Number(sayilar[0])30    const olum = Number(sayilar[1])31    const asist = Number(sayilar[2])32 33    toplamKill = toplamKill + kill34    toplamOlum = toplamOlum + olum35    toplamAsist = toplamAsist + asist36    if (sonuc === "G") {37        galibiyet++38    }39 40    const sira = String(i + 1).padEnd(5)41    const kda = kdaMetni(kill, olum, asist).padEnd(10)42    console.log(`${sira}${skor.padEnd(9)}${kda}${sonuc}`)43}44 45const genelKda = kdaMetni(toplamKill, toplamOlum, toplamAsist)46const oran = oranMetni(galibiyet, maclar.length)47console.log(`Genel KDA: ${genelKda}`)48console.log(`Kazanma oranı: ${oran} (${galibiyet}/${maclar.length})`)

Maç  Skor     KDA       Sonuç1    7/2/9    8.00      G2    3/5/4    1.40      M3    10/0/6   Kusursuz  G4    1/8/2    0.38      M5    5/3/11   5.33      GGenel KDA: 3.22Kazanma oranı: %60,0 (3/5)

Programı yukarıdan aşağı oku:

1. split(", ") geçmişi maçlara ("7/2/9 G"…), split(" ") her maçı skor ve sonuca, split("/") da skoru üç parçaya böler. Her parça Number ile sayıya çevrilir.
2. Toplamlar döngüden önce açılan kutularda birikir (Ders 5'teki saymak ve toplamak kalıbı).
3. Her satır padEnd ile aynı genişliğe tamamlanmış hücrelerden kurulur. Sıra numarası sayı olduğu için önce String ile metne çevrildi; kdaMetni ise zaten metin döndürüyor.
4. Genel KDA, maçların KDA'larının ortalaması değil: bütün kill ve asistlerin toplamı, bütün ölümlerin toplamına bölünür. Böylece ölümsüz geçen "Kusursuz" maçlar da hesaba katılır.

Sınırları sen dene: geçmişe 0/0/0 M gibi bir maç ekle, sonra gecmis'i boş metin ("") yap. Boş geçmişte tabloda NaN ve undefined göreceksin: "".split(", ") boş bir dizi değil, içinde tek bir boş metin olan bir dizi verir. Bozuk girdiyle başa çıkmayı Ders 13'te öğreneceksin; şimdilik bu sonuçların nereden geldiğini açıklayabilmen yeter.

#Sık hatalar

Bu dersin hataları. Bütün derslerin hatalarını hata rehberinde de bulabilirsin.

1const kill = 72console.log(kill.padStart(3))

C:\kod\ogren\ders9.js:2console.log(kill.padStart(3))                 ^ TypeError: kill.padStart is not a function    at Object.<anonymous> (C:\kod\ogren\ders9.js:2:18)    ... Node.js v24.20.0

1const oran = "56.25"2console.log(oran.toFixed(1))

C:\kod\ogren\ders9.js:2console.log(oran.toFixed(1))                 ^ TypeError: oran.toFixed is not a function    at Object.<anonymous> (C:\kod\ogren\ders9.js:2:18)    ... Node.js v24.20.0

1const isim = "Teemo"2console.log(isim.toUppercase())

C:\kod\ogren\ders9.js:2console.log(isim.toUppercase())                 ^ TypeError: isim.toUppercase is not a function    at Object.<anonymous> (C:\kod\ogren\ders9.js:2:18)    ... Node.js v24.20.0

1const isim = "Ahri"2console.log(`Merhaba ${isim})

C:\kod\ogren\ders9.js:2console.log(`Merhaba ${isim})  SyntaxError: Unexpected end of input    at wrapSafe (node:internal/modules/cjs/loader:1861:18)    ... Node.js v24.20.0

1const isim = "Ahri"2console.log(`Merhaba ${isim})3console.log(`Hoş geldin`)

C:\kod\ogren\ders9.js:2console.log(`Merhaba ${isim}) SyntaxError: missing ) after argument list    at wrapSafe (node:internal/modules/cjs/loader:1861:18)    ... Node.js v24.20.0

1const kda = "8.00"2console.log("KDA: ${kda}")

KDA: ${kda}

1const parcalar = "7-2-9".split("/")2const kill = Number(parcalar[0])3const asist = Number(parcalar[2])4console.log(kill + asist)

NaN

1const parcalar = "Ahri".split(":")2console.log(parcalar[1].trim())

C:\kod\ogren\ders9.js:2console.log(parcalar[1].trim())                        ^ TypeError: Cannot read properties of undefined (reading 'trim')    at Object.<anonymous> (C:\kod\ogren\ders9.js:2:25)    ... Node.js v24.20.0

1let isim = "  teemo "2isim.trim()3isim.toUpperCase()4console.log(`[${isim}]`)

[  teemo ]

1const isim = "Teemo"2console.log(isim.toUpperCase)

[Function: toUpperCase]

1console.log("İKSİR".toLowerCase() === "iksir")2console.log("İKSİR".toLocaleLowerCase("tr") === "iksir")

falsetrue

#Görevler

Görevleri, başka bir dosya söylenmedikçe ders9.js'te yap; önceki kodu sil ya da yorum satırı yap. Önce kendin dene, takılırsan ipuçlarını sırayla aç. Çözüme en son bak.

const isim = "Lux"const unvan = "ışığın leydisi"const mana = 320const maxMana = 500

IŞIĞIN LEYDİSİLux - Mana 320/500 (%64)

1const isim = "Lux"2const unvan = "ışığın leydisi"3const mana = 3204const maxMana = 5005console.log(`${unvan.toLocaleUpperCase("tr")}6${isim} - Mana ${mana}/${maxMana} (%${Math.round(mana / maxMana * 100)})`)

IŞIĞIN LEYDİSİLux - Mana 320/500 (%64)

Saldırı hızı: 1.00Hızlı saldırı açıldı

1const ekran = "0.7 saldırı/sn"2let hiz = parseFloat(ekran)3for (let i = 0; i < 3; i++) {4    hiz = hiz + 0.15}6hiz = Math.round(hiz * 100) / 1007console.log(`Saldırı hızı: ${hiz.toFixed(2)}`)8if (hiz >= 1) {9    console.log("Hızlı saldırı açıldı")10} else {11    console.log("Henüz yavaş")12}

Saldırı hızı: 1.00Hızlı saldırı açıldı

Garen 4/6/5: 5 puan (Orta)Lux 2/3/14: 14 puan (Orta)Jinx 11/2/6: 35 puan (Yıldız)Teemo 0/9/3: -15 puan (Zor maç)Ahri 7/4/7: 20 puan (İyi)

--- Skor tablosu ---İsim    Skor     Puan  UnvanGaren   4/6/5       5  OrtaLux     2/3/14     14  OrtaJinx    11/2/6     35  YıldızTeemo   0/9/3     -15  Zor maçAhri    7/4/7      20  İyiTakım puanı: 59MVP: Jinx (35 puan)Maç verisi yok

1const oyuncular = [2    { isim: "Garen", kill: 4, olum: 6, asist: 5 },3    { isim: "Lux", kill: 2, olum: 3, asist: 14 },4    { isim: "Jinx", kill: 11, olum: 2, asist: 6 },5    { isim: "Teemo", kill: 0, olum: 9, asist: 3 },6    { isim: "Ahri", kill: 7, olum: 4, asist: 7 }7]8 9function puan(oyuncu) {10    return oyuncu.kill * 3 + oyuncu.asist - oyuncu.olum * 211}12 13function unvan(p) {14    if (p >= 30) {15        return "Yıldız"16    } else if (p >= 15) {17        return "İyi"18    } else if (p >= 0) {19        return "Orta"20    } else {21        return "Zor maç"22    }23}24 25function skorTablosu(liste) {26    if (liste.length === 0) {27        console.log("Maç verisi yok")28        return29    }30    console.log("--- Skor tablosu ---")31    console.log(`${"İsim".padEnd(8)}${"Skor".padEnd(8)}${"Puan".padStart(5)}  Unvan`)32    let toplam = 033    let mvp = liste[0]34    for (const o of liste) {35        const p = puan(o)36        const kda = `${o.kill}/${o.olum}/${o.asist}`37        console.log(`${o.isim.padEnd(8)}${kda.padEnd(8)}${String(p).padStart(5)}  ${unvan(p)}`)38        toplam = toplam + p39        if (p > puan(mvp)) {40            mvp = o41        }42    }43    console.log(`Takım puanı: ${toplam}`)44    console.log(`MVP: ${mvp.isim} (${puan(mvp)} puan)`)45}46 47skorTablosu(oyuncular)48skorTablosu([])

--- Skor tablosu ---İsim    Skor     Puan  UnvanGaren   4/6/5       5  OrtaLux     2/3/14     14  OrtaJinx    11/2/6     35  YıldızTeemo   0/9/3     -15  Zor maçAhri    7/4/7      20  İyiTakım puanı: 59MVP: Jinx (35 puan)Maç verisi yok

1const riotId = " Faker#kr1 "2const temiz = riotId.trim()3if (!temiz.includes("#")) {4    console.log("Geçersiz Riot ID")5} else {6    const parcalar = temiz.split("#")7    let ad = parcalar[0]8    const etiket = parcalar[1].toUpperCase()9    if (ad.length > 8) {10        ad = ad.slice(0, 8) + "..."11    }12    let satir = `${ad} #${etiket}`13    if (etiket.startsWith("TR")) {14        satir = satir + " (Türkiye)"15    }16    console.log(satir)17}

Faker #KR1

1const ekran = "47 altın"2const altin = parseInt(ekran)3if (Number.isNaN(altin)) {4    console.log("Altın okunamadı")5} else {6    const faiz = Math.min(5, Math.floor(altin / 10))7    const eksik = Math.max(0, 50 - altin)8    const tur = Math.ceil(eksik / 5)9    console.log(`Altın: ${altin}, faiz: ${faiz}, tam faize ${tur} tur`)10}

Altın: 47, faiz: 4, tam faize 1 tur

const kayit = "18250; 9400;;23110 ;abc"

Maç 1:  18250Maç 2:   9400Maç 3:  23110Geçersiz kayıt: 2Ortalama: 16920,0En yüksek: 23110

1const kayit = "18250; 9400;;23110 ;abc"2const parcalar = kayit.split(";")3let gecerli = 04let gecersiz = 05let toplam = 06let enYuksek = 07 8for (const parca of parcalar) {9    const temiz = parca.trim()10    const hasar = Number(temiz)11    if (temiz === "" || Number.isNaN(hasar)) {12        gecersiz++13    } else {14        gecerli++15        toplam = toplam + hasar16        enYuksek = Math.max(enYuksek, hasar)17        console.log(`Maç ${gecerli}: ${String(hasar).padStart(6)}`)18    }19}20 21console.log(`Geçersiz kayıt: ${gecersiz}`)22if (gecerli === 0) {23    console.log("Geçerli maç yok")24} else {25    const ortalama = (toplam / gecerli).toFixed(1).replace(".", ",")26    console.log(`Ortalama: ${ortalama}`)27    console.log(`En yüksek: ${enYuksek}`)28}

Maç 1:  18250Maç 2:   9400Maç 3:  23110Geçersiz kayıt: 2Ortalama: 16920,0En yüksek: 23110

#Kendini sına

const isim = "Jinx"console.log("Merhaba ${isim}")console.log(`Merhaba ${isim}`)

console.log(Number("15 asist"))console.log(parseInt("15 asist"))console.log(Number(""))

const kill = 12const metin = "12"console.log(metin.padStart(4))console.log(kill.padStart(4))

const deger = Number("abc")if (deger === NaN) {    console.log("Geçersiz")}

#Kayıt noktası

Bu derste bir dosya ekledin (ders9.js), bir dosyayı da değiştirdin (Görev 3'teki skor.js). VS Code terminalinde, C:\kod\ogren klasöründeyken önce neyin değiştiğine bak, sonra kaydet ve GitHub'a gönder:

Bir sonraki derste fonksiyonları derinlemesine ele alacaksın: ok fonksiyonları, varsayılan parametreler ve bir fonksiyonu başka bir fonksiyona vermek.