JavaScript’te “5” + 2 neden 52 olur? Tür dönüşümü çözümü

Formdan gelen bir değer ekranda sayı gibi görünse de çoğu zaman metindir. Aynı + işlecinin hem toplama hem metin birleştirme yapması başlangıçta şaşırtıcı sonuç üretir. Önce veri türünü açıkça görmek, sonra dönüşüm yapmak bu hataları kolaylaştırır.

Önce neyi çözmek istediğini belirle

Metin ile sayıyı ayırmayı, form değerini dönüştürmeyi ve geçersiz girişte anlaşılır yanıt vermeyi öğreneceğiz. Bu yaklaşım bir hesap makinesinde de alışveriş hesabında da işe yarar.

Adım adım uygula

1 Gelen türü incele. typeof ile değişkenin türünü konsola yaz. input.value bir metindir; sayı alanı olması bunu kendiliğinden Number yapmaz.
2 Dönüşümü bilerek yap. Number ile dönüştür, ardından Number.isFinite ile geçerli ve sonlu bir sayı olup olmadığını kontrol et. Boş metni ayrıca ele al.
3 Sonucu kullanıcıya anlat. Boş, geçersiz ve sıfır değerlerini ayrı düşün. Hata durumunda anlamsız bir NaN göstermek yerine ne girilmesi gerektiğini açıkla.

Küçük bir örnek

JavaScript

const ham = "5";
const sayi = Number(ham);
if (ham.trim() !== "" && Number.isFinite(sayi)) {
  console.log(sayi + 2); // 7
}

Sık takılınan nokta

Number("") sonucu 0’dır. Bu yüzden yalnızca sonucun sayı olup olmadığını kontrol etmek, kullanıcının alanı boş bıraktığını fark etmez. Ayrıca ondalık ayıracı olarak virgül yazılması otomatik olarak kabul edilmez.

Şimdi kendin dene

Bir input ve toplama düğmesi oluştur. “5”, boş metin, “abc” ve “0” değerleriyle dene. Her birinin ne üretmesi gerektiğini kodu çalıştırmadan önce yaz.

Bir sonraki adım Konuyu örneklerle çalış → →

Sık Karşılaşılan Hatalar, Nedenleri ve Hızlı Çözüm Tablosu

JavaScript’te “5” + 2 neden 52 olur? Tür dönüşümü çözümü konusunu kendi projende uygularken en sık karşılaşılan durumları ve çözüm adımlarını aşağıdaki tabloda bulabilirsin:

Belirti / Sorun	Temel Nedeni	Nasıl Teşhis Edilir?	Kesin Çözüm
Değişiklik ekrana yansımıyor	Dosya kaydedilmemiş veya tarayıcı eski önbelleği gösteriyor	Editörde dosya adının yanında nokta işareti var mı bak	`Ctrl+S` / `Cmd+S` ile kaydet ve `Ctrl+F5` ile yenile
Büyük/küçük harf veya yol hatası	Dosya adı, seçici (`id`/`class`) veya değişken adı birebir eşleşmiyor	Konsol (F12) veya terminaldeki satır numarasını kontrol et	Türkçe karakter ve boşluk içermeyen küçük harfli adlandırma kullan
Tür veya Boş Değer (`null`/`None`) Hatası	Henüz oluşmamış bir HTML elemanına veya metin (`string`) tipindeki sayıya işlem yapmak	`console.log(typeof x)` veya `print(type(x))` ile türü yazdır	İşlem öncesi değerin varlığını (`if`) ve tür dönüşümünü (`Number`/`int`) doğrula
Ortam / Paket Uyuşmazlığı	Terminalde farklı bir klasörde veya sanal ortam dışındayken komut çalıştırmak	`pwd` (veya `cd`) ve `which python` ile konumu gör	Proje kök klasöründe doğru sanal ortamı etkinleştirerek çalıştır

Adım Adım Hata Ayıklama (Debugging) ve Temiz Kod Kontrol Listesi

1. Sorunu En Küçük Örnekte İzole Et: 200 satırlık kodda hata aramak yerine, yalnızca takıldığın satırı 5-10 satırlık küçük bir deneme alanında (Tarayıcıda Kod Dene sayfasında) tek başına çalıştır.
2. Varsayma, Konsola Yazdır: "Bu değişkenin içinde kesin 10 vardır" diye düşünmek yerine, işlemden hemen önce değişkenin değerini ve tipini ekrana yazdırarak gözünle doğrula.
3. Tek Seferde Tek Değişiklik Yap: Aynı anda hem HTML yapısını, hem CSS sınıfını hem de JavaScript fonksiyonunu değiştirirsen sorunun hangisinden kaynaklandığını bulamazsın.
4. Sınır Değerleri Test Et: Kodun normal bir girdide çalıştığında hemen bırakma; boş girdi (`""`), sıfır (`0`) veya beklenmeyen bir değer girildiğinde nasıl davrandığını da kontrol et.

Sıkça Sorulan Sorular (SSS)

Hata mesajları İngilizce olduğu için anlamakta zorlanıyorum, ne yapmalıyım? +

Hata mesajının tamamını ezberlemene gerek yoktur; yalnızca üç bilgiye odaklan: 1) Dosya adı ve satır numarası, 2) Hatanın türü (ör. SyntaxError, TypeError), 3) En sondaki kısa açıklama. Webino App'in 52 Yazılım Hatası ve Çözümü sözlüğünden Türkçe karşılıklarına anında bakabilirsin.

Bilgisayarıma program kurmadan bu örnekleri hemen deneyebilir miyim? +

Evet. Sol menüdeki Tarayıcıda Kod Dene laboratuvarını kullanarak HTML/CSS, JavaScript, Python ve SQL kodlarını hiçbir kurulum yapmadan doğrudan tarayıcında çalıştırabilirsin.

Kaynak ve devamı

Resmi belgeleri aç ↗

Webino App denemesi: Metin ile sayıyı ayrı ayrı topladık

Aynı girdide yalnızca tür dönüşümünü değiştirdik. Boş metnin Number ile 0 olması bu testin kapsamı dışında bırakılmadı; aşağıdaki açıklamada boş alanın ayrıca kontrol edilmesi gerektiği korunuyor.