JavaScript’te Sayı Biçimlendirmeyi Özümsemek

JavaScript’te sayı biçimlendirmesinde uzmanlaşmak, kullanıcı dostu ve görsel açıdan çekici uygulamalar oluşturmak için şarttır. İster para birimi, ister yüzdelik değerler, isterse büyük sayısal veri kümeleriyle uğraşıyor olun, doğru biçimlendirme okunabilirliği önemli ölçüde artırır ve genel kullanıcı deneyimini iyileştirir. Bu kılavuz, özel ihtiyaçlarınız için en iyi yaklaşımı seçmenize yardımcı olmak üzere, basit yerleşik işlevlerden güçlü kütüphanelere kadar çeşitli teknikleri inceliyor.

İçindekiler

• toLocaleString() ile Yerel Ayarlara Uygun Biçimlendirme
• toFixed() kullanarak Ondalık Basamakları Kontrol Etme
• toPrecision() ile Hassasiyet Ayarlama
• Intl.NumberFormat ile Gelişmiş Biçimlendirme
• Karmaşık Biçimlendirme için Kütüphanelerden Faydalanma

toLocaleString() ile Yerel Ayarlara Uygun Biçimlendirme

toLocaleString() yöntemi, yerel ayarlara duyarlı sayı biçimlendirmesi için başvuracağınız çözümdür. Kullanıcının diline ve bölgesel ayarlarına otomatik olarak uyum sağlar ve farklı yerel ayarlar arasında tutarlı bir görüntüleme sağlar. Bu, ondalık ve binlik ayırıcıları, para birimi sembolleri ve hatta sayı gruplama stillerini gibi önemli yönleri ele alır.

const number = 1234567.89;

// Varsayılan yerel ayar biçimlendirmesi
console.log(number.toLocaleString()); // Çıktı (yerel ayara göre değişir): 1,234,567.89

// Belirli yerel ayar (örneğin, Almanca)
console.log(number.toLocaleString('de-DE')); // Çıktı: 1.234.567,89

// Para birimi biçimlendirmesi
console.log(number.toLocaleString('en-US', { style: 'currency', currency: 'USD' })); // Çıktı: $1,234,567.89

// Yüzde biçimlendirmesi
console.log((0.75).toLocaleString('en-US', { style: 'percent' })); // Çıktı: 75%

toFixed() kullanarak Ondalık Basamakları Kontrol Etme

Ondalık basamak sayısı üzerinde hassas kontrol için toFixed() yöntemini kullanın. Bu, sayıyı belirtilen hassasiyete yuvarlar. toFixed()‘in bir dize döndürdüğünü unutmayın.

const number = 123.456789;

console.log(number.toFixed(0)); // Çıktı: 123
console.log(number.toFixed(2)); // Çıktı: 123.46
console.log(number.toFixed(5)); // Çıktı: 123.45679

toPrecision() ile Hassasiyet Ayarlama

toPrecision() yöntemi, toplam anlamlı basamak sayısını kontrol eden farklı bir yaklaşım sunar. Bu, farklı büyüklükteki sayılarla çalışırken özellikle kullanışlıdır.

const number = 12345.6789;

console.log(number.toPrecision(3)); // Çıktı: 1.23e+4
console.log(number.toPrecision(5)); // Çıktı: 12346
console.log(number.toPrecision(8)); // Çıktı: 12345.6789

Intl.NumberFormat ile Gelişmiş Biçimlendirme

toLocaleString()‘in ötesinde daha ayrıntılı kontrol ve özellikler için, Intl.NumberFormat nesnesi gelişmiş özelleştirme seçenekleri sağlar. Minimum ve maksimum anlamlı basamakları ayarlayabilir, farklı yuvarlama yöntemleri kullanabilir ve daha fazlasını yapabilirsiniz.

const number = 12345.67;

const formatter = new Intl.NumberFormat('en-US', {
  minimumSignificantDigits: 2,
  maximumSignificantDigits: 4
});

console.log(formatter.format(number)); // Çıktı: 12,350

Karmaşık Biçimlendirme için Kütüphanelerden Faydalanma

Son derece özelleştirilmiş veya karmaşık biçimlendirme senaryoları için, numeral.js gibi özel bir JavaScript kütüphanesini kullanmayı düşünün. Bu kütüphaneler, özel sayı biçimleri, kısaltmalar (örneğin, 1k, 1M) ve daha fazlasını sunarak karmaşık biçimlendirme görevlerini basitleştirir.

Bu çeşitli yöntemleri anlayarak ve işe uygun doğru aracı seçerek, sayılarınızın açık, tutarlı ve kullanıcı deneyimini artıracak şekilde sunulduğundan emin olabilirsiniz.