Case (turkish Title Case Nasıl Yapılır?

Web geliştirme süreçlerinde kullanıcı deneyimini (UX) artıran en önemli unsurlardan biri, metinsel verilerin doğru ve estetik bir şekilde sunulmasıdır. Özellikle Türkçe gibi kendine has dil bilgisi kuralları ve benzersiz karakter yapısı (ı, İ, ğ, Ğ, ü, Ü, ş, Ş, ö, Ö, ç, Ç) olan dillerde, metin biçimlendirme işlemleri standart kütüphanelerle yapıldığında ciddi hatalara yol açabilir. İngilizce dil yapısına göre tasarlanmış standart JavaScript fonksiyonları, Türkçe karakterleri dönüştürürken "ı" harfini "I" yerine "I" (noktasız) veya "i" harfini "İ" yerine "I" yapma eğilimindedir. Bu durum, profesyonel bir web uygulamasında kabul edilemez görsel ve anlamsal hatalar doğurur.

Bu rehberde, modern React uygulamalarında Türkçe dil kurallarına tamamen uyumlu bir şekilde "Title Case" (her kelimenin ilk harfini büyük, diğer harflerini küçük yapma) işleminin nasıl gerçekleştirileceğini detaylıca inceleyeceğiz. Case (turkish Title Case Nasıl Yapılır? sorusuna, tarayıcı uyumluluğunu gözeten, performans dostu ve React mimarisine tam entegre çözümlerle yanıt vereceğiz. Bu eğitimi tamamladığınızda, kullanıcı girişlerini gerçek zamanlı olarak biçimlendiren özel bileşenler ve kancalar (hooks) yazabilecek seviyeye geleceksiniz.

Eğitim boyunca adım adım ilerleyecek, önce JavaScript'in yerel dil desteği (Locale) mekanizmalarını inceleyecek, ardından bu mekanizmaları React bileşenlerine ve özel kancalarına entegre edeceğiz. Hazırsanız, modern web standartlarına uygun Türkçe Title Case uygulamamıza başlayalım.

Ön Hazırlık ve Gereksinimler

Bu eğitimde geliştireceğimiz kodların çalışması ve projenize entegre edilmesi için aşağıdaki minimum gereksinimlerin karşılanması önerilmektedir:

• Node.js: Bilgisayarınızda Node.js (v18.0.0 veya üzeri) kurulu olmalıdır.
• React Sürümü: React 18 ya da React 19 (2026 standartlarına uygun modern fonksiyonel bileşen yapısı kullanılacaktır).
• Paket Yöneticisi: npm, yarn veya pnpm.
• Temel Bilgi Seviyesi: JavaScript ES6+ özellikleri (özellikle Array metotları, Destructuring ve Arrow Functions) ve temel React State yönetimi bilgisi.

Herhangi bir ek üçüncü parti kütüphaneye (lodash, underscore vb.) ihtiyacımız olmayacaktır. Performans ve güvenlik gerekçeleriyle, tüm dönüşüm mantığını saf JavaScript (Vanilla JS) ve React API'leri kullanarak inşa edeceğiz.

JavaScript'te Türkçe Karakter Sorunu ve Çözümü

JavaScript'in standart toUpperCase() ve toLowerCase() metotları, işletim sisteminin veya tarayıcının varsayılan dil ayarlarına (çoğunlukla İngilizce - en-US) göre çalışır. Bu durum Türkçe karakterlerde şu hatalara neden olur:

• Küçük "ı" harfi büyük harfe dönüştürüldüğünde "I" yerine "I" olur (İngilizce karakter setinde noktalı İ olmadığı için).
• Büyük "İ" harfi küçük harfe dönüştürüldüğünde "i" yerine "i" (noktasız i) karakterine dönüşebilir.

Bu sorunu çözmek için ECMAScript standartlarında yer alan toLocaleUpperCase('tr-TR') ve toLocaleLowerCase('tr-TR') metotlarını kullanmalıyız. Bu metotlar, tarayıcıya dönüşümün Türkçe dil kurallarına göre yapılması gerektiğini bildirir.

Aşağıdaki ilk kod örneğimizde, standart metotlar ile Türkçe yerel ayarlı metotlar arasındaki farkı ve oluşan hataları gözlemleyebilirsiniz:

// Standart ve Türkçe Yerel Ayarlı Dönüşüm Karşılaştırması

const hataliMetin = "istanbul ve işık";

// Standart JavaScript Metotları (Hatalı Sonuç)
const standartBuyuk = hataliMetin.toUpperCase(); 
console.log("Standart Büyük:", standartBuyuk); // Çıktı: "ISTANBUL VE IŞIK" (i -> I oldu, ı -> I oldu)

// Türkçe Yerel Ayarlı Metotlar (Doğru Sonuç)
const dogruBuyuk = hataliMetin.toLocaleUpperCase('tr-TR');
console.log("Türkçe Büyük:", dogruBuyuk); // Çıktı: "İSTANBUL VE IŞIK" (i -> İ oldu, ı -> I oldu)

Yukarıdaki kod bloğunda görüldüğü üzere, 'tr-TR' parametresi tarayıcının JavaScript motoruna Türkçe dil kurallarını uygulaması talimatını verir. Bu parametre olmadan yapılan tüm büyük-küçük harf dönüşümleri Türkçe karakterlerde hatalı sonuçlar doğuracaktır.

Adım Adım Türkçe Title Case Fonksiyonu Yazımı

Sadece ilk harfleri büyütmek yetmez; kelimenin geri kalan harflerinin de küçük harfe dönüştürülmesi gerekir. Örneğin, kullanıcı "İSTANBUL" girdiğinde bunu "İstanbul" haline getirmeliyiz. Bu işleme "Title Case" denir.

Şimdi, bir metni alıp Türkçe kurallarına göre her kelimesinin ilk harfini büyük, diğer harflerini küçük yapan saf bir JavaScript yardımcı fonksiyonu yazalım. Bu fonksiyon, metindeki birden fazla boşluğu temizleyecek ve boş girdileri güvenli bir şekilde yönetecektir.

/**
 * Verilen metni Türkçe dil kurallarına uygun şekilde Title Case formatına dönüştürür.
 * @param {string} text - Dönüştürülecek ham metin
 * @returns {string} - Dönüştürülmüş metin
 */
export function toTurkishTitleCase(text) {
  if (!text || typeof text !== 'string') return '';

  return text
    .split(/\s+/) // Metni boşluk karakterlerine göre dizileştirir (birden fazla boşluğu filtreler)
    .map(word => {
      if (word.length === 0) return '';
      
      // İlk harfi Türkçe büyük harfe, geri kalanını Türkçe küçük harfe çevirir
      const firstLetter = word.charAt(0).toLocaleUpperCase('tr-TR');
      const restOfWord = word.slice(1).toLocaleLowerCase('tr-TR');
      
      return firstLetter + restOfWord;
    })
    .join(' '); // Kelimeleri tek bir boşlukla birleştirir
}

// Test Senaryoları
console.log(toTurkishTitleCase("ısparta şampiyonu ÖMER")); // Çıktı: "Isparta Şampiyonu Ömer"
console.log(toTurkishTitleCase("İSTANBUL boğazı"));      // Çıktı: "İstanbul Boğazı"
console.log(toTurkishTitleCase("   çoklu    boşluk   ")); // Çıktı: "Çoklu Boşluk"

Yazdığımız bu yardımcı fonksiyon, split(/\s+/) düzenli ifadesi (regex) sayesinde kelimeler arasındaki birden fazla boşluğu tek bir boşluğa indirger. Her kelimenin ilk karakterini charAt(0) ile alıp büyük harfe çevirirken, slice(1) ile geri kalan kısmı küçük harfe dönüştürür ve bunları birleştirir.

React Custom Hook (useTurkishTitleCase) Oluşturma

React projelerinde iş mantığını (business logic) bileşenlerden ayırmak ve yeniden kullanılabilirliği (reusability) artırmak için "Custom Hook" (Özel Kanca) yapısı tercih edilir. Şimdi, durum yönetimini (state) de içeren ve girdiğimiz metni otomatik olarak Türkçe Title Case formatında saklayan bir kanca yazalım.

Bu kanca, hem ham metni hem de dönüştürülmüş metni hafızada tutarak form elemanlarında kolayca kullanılmasını sağlayacaktır.

import { useState, useCallback } from 'react';
import { toTurkishTitleCase } from './utils'; // Yukarıda yazdığımız fonksiyonu içe aktarıyoruz

/**
 * Türkçe Title Case dönüşümü sağlayan özel React Kancası (Custom Hook)
 * @param {string} initialValue - Başlangıç değeri
 */
export function useTurkishTitleCase(initialValue = '') {
  const [value, setValue] = useState(toTurkishTitleCase(initialValue));

  const updateValue = useCallback((newValue) => {
    if (typeof newValue === 'string') {
      setValue(toTurkishTitleCase(newValue));
    }
  }, []);

  return [value, updateValue];
}

Bu kancada useCallback kullanmamızın sebebi, fonksiyon referansının her render sırasında yeniden oluşturulmasını engellemek ve performansı optimize etmektir. Bu sayede, bu kancayı alt bileşenlere (child components) prop olarak geçirdiğimizde gereksiz render işlemlerinin önüne geçmiş oluruz.

React Formlarında Gerçek Zamanlı Türkçe Title Case Uygulaması

Kullanıcıların form doldururken (örneğin ad-soyad girişi yaparken) girdikleri verilerin anlık olarak biçimlendirilmesi, veri tutarlılığı açısından kritik öneme sahiptir. Ancak, gerçek zamanlı input biçimlendirmelerinde sık karşılaşılan bir sorun vardır: Kullanıcı metnin ortasında bir değişiklik yapmak istediğinde, imleç (cursor) otomatik olarak metnin en sonuna sıçrar.

Aşağıdaki React bileşeni örneğinde, hem gerçek zamanlı Türkçe Title Case dönüşümünü gerçekleştireceğiz hem de imleç kayması sorununun önüne nasıl geçileceğini useRef kullanarak göstereceğiz.

import React, { useState, useRef, useEffect } from 'react';

export function TurkishTitleInput() {
  const [inputValue, setInputValue] = useState('');
  const inputRef = useRef(null);
  const cursorPositionRef = useRef(null);

  // Türkçe Title Case Dönüşüm Fonksiyonu (Bileşen içi veya dışı tanımlanabilir)
  const formatText = (text) => {
    return text
      .split(' ')
      .map(word => {
        if (!word) return '';
        return word.charAt(0).toLocaleUpperCase('tr-TR') + word.slice(1).toLocaleLowerCase('tr-TR');
      })
      .join(' ');
  };

  const handleChange = (e) => {
    const originalValue = e.target.value;
    const formattedValue = formatText(originalValue);
    
    // Değişiklik anındaki imleç pozisyonunu kaydet
    cursorPositionRef.current = e.target.selectionStart;
    
    setInputValue(formattedValue);
  };

  useEffect(() => {
    // State güncellendikten sonra imleç konumunu geri yükle
    if (inputRef.current && cursorPositionRef.current !== null) {
      inputRef.current.setSelectionRange(cursorPositionRef.current, cursorPositionRef.current);
    }
  }, [inputValue]);

  return (
    

      
        Ad Soyad (Türkçe Karakter Uyumlu):
      
      
      

        Güncel State Değeri: {inputValue}
      
    
  );
}

Bu bileşende, useRef ve useEffect ikilisini kullanarak tarayıcının varsayılan girdi davranışını manipüle ettik. Kullanıcı metnin ortasına tıklayıp bir harf eklediğinde veya sildiğinde, imleç pozisyonu selectionStart ile yakalanır ve state güncellendikten hemen sonra setSelectionRange ile aynı konuma geri getirilir. Bu, kusursuz bir kullanıcı deneyimi sağlar.

Gelişmiş Senaryolar: Bağlaçları Hariç Tutma ve Performans Optimizasyonu

Gerçek hayat senaryolarında, başlık yazımı kurallarına göre "ve", "veya", "ile", "de", "da", "ki" gibi bağlaçların (conjunctions) her zaman küçük harfle yazılması istenir (eğer başlığın en başında değillerse). Örneğin: "Suç ve Ceza", "Leyla ile Mecnun".

Aşağıdaki gelişmiş kod örneğimizde, Türkçe bağlaçları otomatik olarak algılayan ve bunları başlık ortasında küçük harfle bırakan, aynı zamanda büyük veri listelerinde performansı korumak için useMemo kullanan bir yapıyı kurgulayacağız.

import React, { useMemo } from 'react';

// Türkçe dilindeki yaygın bağlaçlar listesi
const TURKISH_CONJUNCTIONS = ['ve', 'veya', 'ile', 'de', 'da', 'ki', 'ise', 'ama', 'fakat'];

/**
 * Gelişmiş Türkçe Title Case Dönüştürücü
 * Bağlaçları kelime ortasındaysa küçük harf yapar.
 */
export function toAdvancedTurkishTitleCase(text) {
  if (!text || typeof text !== 'string') return '';

  const words = text.trim().split(/\s+/);
  
  return words.map((word, index) => {
    const lowerWord = word.toLocaleLowerCase('tr-TR');
    
    // Eğer kelime bir bağlaç ise VE listenin ilk kelimes