Vue Academy · Ders

Sayı, Tarih ve Para Birimi Biçimlendirme

Sayılar için n(), tarihler için d(), tarih-saat biçimleri ve locale başına numberFormats.

4. ders / 413 adım

Sayı, Tarih ve Para Birimi Biçimlendirme, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Sayılar ve tarihler yerel ayara göre değişir

ABD'de 1,000.50, Avrupa'nın büyük bölümünde 1.000,50 olarak yazılır. Tarihler ve para birimleri de farklılık gösterir. Vue I18n, sayıların, tarihlerin ve para değerlerinin her yerel ayara uygun görüntülenmesi için tarayıcının Intl API'lerini kapsüller.

numberFormats yapılandırması

Yerel ayar başına adlandırılmış sayı biçimlerini createI18n işlevinin numberFormats seçeneğinde tanımlayın. Her adlandırılmış biçim, bir Intl.NumberFormat seçenekler nesnesidir.

const i18n = createI18n({
  locale: "en",
  numberFormats: {
    en: {
      currency: { style: "currency", currency: "USD" },
      decimal: { style: "decimal", minimumFractionDigits: 2 },
    },
  },
})

n() işlevi

useI18n() içindeki n(value, formatName) ile veya şablonlarda $n ile bir sayıyı biçimlendirin. Etkin yerel ayar için adlandırılmış biçimi kullanır.

const { n } = useI18n()

n(1234.5, "decimal") // "1,234.50" in en

Para birimi biçimlendirme

currency stili doğru simgeyi ve gruplandırmayı ekler. Biçim yapılandırmasındaki para birimi kodu, hangi simgenin görüneceğini belirler.

const { n } = useI18n()

n(49.99, "currency") // "$49.99" in en

Yerel ayara duyarlı para birimi çıktısı

Her yerel ayarın altına, o yerel ayara uygun ayarlara sahip aynı adlandırılmış biçimi ekleyin. locale değiştirildiğinde gruplandırma, ondalık işaretleri ve simgenin konumu otomatik olarak değişir.

numberFormats: {
  en: { currency: { style: "currency", currency: "USD" } },
  tr: { currency: { style: "currency", currency: "TRY" } },
}
// n(49.99, "currency") => "$49.99" (en) or "TRY 49,99" style (tr)

Yüzdeler

percent stili değeri 100 ile çarpar ve yerel ayara uygun bir yüzde işareti ekler.

numberFormats: {
  en: { percent: { style: "percent", maximumFractionDigits: 1 } },
}

n(0.256, "percent") // "25.6%"

datetimeFormats yapılandırması

Tarih biçimlendirme sayılara benzer. Adlandırılmış biçimleri datetimeFormats altında tanımlayın; her biri bir Intl.DateTimeFormat seçenekler nesnesidir.

const i18n = createI18n({
  locale: "en",
  datetimeFormats: {
    en: {
      short: { year: "numeric", month: "short", day: "numeric" },
      long: { dateStyle: "full", timeStyle: "short" },
    },
  },
})

d() işlevi

d(value, formatName) ile (veya şablonlarda $d ile) bir Date değerini biçimlendirin. Bir Date nesnesi veya zaman damgası geçin.

const { d } = useI18n()

d(new Date("2026-05-29"), "short") // "May 29, 2026" in en

Yerel ayara duyarlı tarihler

Sayılar gibi, adlandırılmış tarih biçimini her yerel ayar için sağlayın. Yerel ayar değiştiğinde aynı çağrı, yerel ayara uygun sıralamayı ve ay adlarını üretir.

datetimeFormats: {
  en: { short: { year: "numeric", month: "short", day: "numeric" } },
  tr: { short: { year: "numeric", month: "short", day: "numeric" } },
}
// d(date, "short") => "May 29, 2026" (en) / "29 May 2026" (tr)

Şablonlarda biçimlendirme yardımcılarını kullanma

Şablonlarda, bir değer ve adlandırılmış biçimle birlikte $n ve $d kullanın.

<template>
  <p>Total: {{ $n(total, "currency") }}</p>
  <p>Updated: {{ $d(updatedAt, "short") }}</p>
</template>

Tek Seferlik Satır İçi Seçenekler

Adlandırılmış biçimlerin yanı sıra, yapılandırmada tanımlamadan tek seferlik bir biçimlendirme için ikinci bağımsız değişken olarak satır içi bir seçenekler nesnesi aktarabilirsiniz.

const { n, d } = useI18n()

n(0.5, { style: "percent" })           // "50%"
d(new Date(), { weekday: "long" })     // "Friday"

Kısa Kontrol

Yerel ayara duyarlı biçimlendirme konusunu anlayıp anlamadığınızı kontrol edin.

İnteraktif derste cevapla

Özet

Yerel ayara duyarlı biçimlendirmeyi öğrendiniz:

Her yerel ayar için adlandırılmış biçimleri numberFormats ve datetimeFormats altında yapılandırabilirsiniz.
n(value, name) / $n sayıları ondalık, para birimi ve yüzde stilleriyle biçimlendirir.
d(value, name) / $d tarihleri biçimlendirir.
locale değerini değiştirdiğinizde gruplandırma, ondalık işaretleri, semboller ve tarih sıralaması otomatik olarak değişir.
Tek seferlik biçimlendirme için satır içi bir seçenekler nesnesi de aktarabilirsiniz.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 42
Dersler: 156

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Sayı, Tarih ve Para Birimi Biçimlendirme” dersi ücretsiz mi?

Evet — “Sayı, Tarih ve Para Birimi Biçimlendirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Sayı, Tarih ve Para Birimi Biçimlendirme” dersinde ne öğreneceğim?

Sayılar için n(), tarihler için d(), tarih-saat biçimleri ve locale başına numberFormats. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Sayı, Tarih ve Para Birimi Biçimlendirme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

vue-i18n Kurulumu ve Mesaj Dosyaları
useI18n Composable'ı ve t() İşlevi
Çoğullaştırma ve Bağlantılı Mesajlar
Sayı, Tarih ve Para Birimi Biçimlendirme

← Vue Academy Sayfasına Dön