0Pricing
Vue Academy · Ders

Çoğullaştırma ve Bağlantılı Mesajlar

Çoğul kuralları için @:key|@:key söz dizimi, sayıya dayalı çoğul ve @:path ile bağlantılı mesajlar.

Çoğullaştırma ve Bağlantılı Mesajlar, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. 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.

Sayma dile özgüdür

"1 öğe" ancak "5 öğe" — diğer dillerde daha da fazla biçim bulunur. Çoğulları doğrudan kodlamak, "5 öğe(ler)" gibi kulağa garip gelen dizelere yol açar. Vue I18n, bir sayı için doğru biçimi seçmek üzere yerleşik çoğullaştırma özelliğine sahiptir.

Dikey çizgiyle ayrılmış çoğul biçimleri

Biçimleri tek bir mesaj dizesine, dikey çizgi (|) karakteriyle ayırarak yazın. İngilizcede genellikle iki veya üç biçim kullanılır.

const en = {
  items: "no items | one item | {count} items",
}

Sayıyla çoğul biçim seçme

t işlevine ikinci bağımsız değişken olarak bir sayı geçin. Vue I18n, sayıya göre eşleşen biçimi seçer.

const { t } = useI18n()

t("items", 0) // "no items"
t("items", 1) // "one item"
t("items", 9) // "9 items"

Varsayılan çoğul kuralı

Üç biçim olduğunda kural şöyledir: 0 birinci biçimi, 1 ikinci biçimi, diğer tüm sayılar üçüncü biçimi kullanır. İki biçim, 0 ile çoğul durumu aynı biçimde birleştirir.

const en = {
  // two-form version: 0 and N share the plural
  files: "no file | one file | {count} files",
}

{count} yer tutucusu

Çoğul bir mesajın içindeki özel {count} (veya {n}) yer tutucusu, geçtiğiniz sayıyla doldurulur; böylece sayıyı gösterebilirsiniz.

const en = { photos: "no photos | {count} photo | {count} photos" }

t("photos", 3) // "3 photos"

Şablonlarda çoğullar

Şablonlarda, tıpkı betikte olduğu gibi, ikinci bağımsız değişken olarak sayıyı $t işlevine geçin.

<template>
  <p>{{ $t("items", cartCount) }}</p>
</template>

Sayıyı ve adlandırılmış değerleri birleştirme

Sayıyı ve değerlerden oluşan bir nesneyi birlikte vererek hem bir sayı hem de adlandırılmış yer tutucular geçebilirsiniz.

const en = { greeting: "Hi {name}, no messages | Hi {name}, {count} messages" }

t("greeting", 2, { named: { name: "Ada" } })
// or per API: t("greeting", { name: "Ada" }, 2)

Bağlantılı mesajlar nedir?

Bazen yinelemeyi önlemek için bir çevirinin başka bir çeviriyi içine yerleştirmesi gerekir. Bağlantılı mesajlar, başka bir anahtara @: söz dizimiyle başvurur.

const en = {
  brand: "Acme",
  welcome: "Welcome to @:brand",
}

Bir bağlantıyı çözümleme

welcome anahtarını çevirdiğinizde @:brand belirteci, brand anahtarının çevrilmiş değeriyle değiştirilir. brand değerini bir kez değiştirin; bağlantılı tüm mesajlar güncellenir.

t("welcome") // "Welcome to Acme"
// change brand -> all linked messages reflect it

İç içe anahtarlarla bağlantı kurma

Bağlantılar, noktayla ayrılmış iç içe anahtarlarla da çalışır. Gerektiğinde birden çok sözcükten oluşan başvuruları parantez içine alın.

const en = {
  app: { name: "MyApp" },
  footer: "Thanks for using @:(app.name)",
}

Bağlantılarda değiştiriciler

Bağlantılı mesajlar, bağlantılı değeri dönüştürmek için @.upper gibi değiştiricileri destekler (büyük harf, küçük harf, ilk harfi büyük).

const en = {
  brand: "acme",
  banner: "@.upper:brand sale!", // "ACME sale!"
}

Hızlı kontrol

Çoğullar ve bağlantılar konusundaki anlayışınızı kontrol edin.

Özet

Çoğulları ve mesajları yeniden kullanmayı öğrendiniz:

  • Çoğul biçimlerini | ile ayırın: "no items | one item | {count} items".
  • Doğru biçimi seçmek için t(key, count) işlevine bir sayı geçin.
  • {count} yer tutucusu sayıyı gösterir.
  • Bağlantılı mesajlar başka bir anahtarı @:otherKey aracılığıyla yeniden kullanır (iç içe anahtarlar için @:(nested.key) kullanılır).
  • @.upper gibi değiştiriciler bağlantılı değeri dönüştürür.

Sıkça Sorulan Sorular

“Çoğullaştırma ve Bağlantılı Mesajlar” dersi ücretsiz mi?

Evet — “Çoğullaştırma ve Bağlantılı Mesajlar” 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.

“Çoğullaştırma ve Bağlantılı Mesajlar” dersinde ne öğreneceğim?

Çoğul kuralları için @:key|@:key söz dizimi, sayıya dayalı çoğul ve @:path ile bağlantılı mesajlar. 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 3. dersidir.

“Çoğullaştırma ve Bağlantılı Mesajlar” 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

  1. vue-i18n Kurulumu ve Mesaj Dosyaları
  2. useI18n Composable'ı ve t() İşlevi
  3. Çoğullaştırma ve Bağlantılı Mesajlar
  4. Sayı, Tarih ve Para Birimi Biçimlendirme
← Vue Academy Sayfasına Dön