Vue Academy · Pelajaran

Pluralisasi dan Pesan Tertaut

Aturan plural @:key|@:key, plural berdasarkan jumlah, serta pesan tertaut dengan @:path.

Pelajaran 3 dari 413 langkah

Pluralisasi dan Pesan Tertaut adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Penghitungan Bergantung pada Bahasa

Dalam bahasa Inggris, "1 item" berbeda dari "5 item"—bahasa lain bahkan memiliki lebih banyak bentuk. Menulis bentuk jamak secara langsung menghasilkan string canggung seperti "5 item atau beberapa item". Vue I18n memiliki pembentukan jamak bawaan untuk memilih bentuk yang tepat berdasarkan jumlah.

Bentuk Jamak Dipisahkan dengan Garis Tegak

Tuliskan bentuk-bentuk tersebut dalam satu string pesan yang dipisahkan oleh karakter garis tegak (|). Untuk bahasa Inggris, dua atau tiga bentuk merupakan hal yang umum.

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

Memilih Bentuk Jamak Berdasarkan Jumlah

Teruskan angka sebagai argumen kedua ke t. Vue I18n memilih bentuk yang sesuai berdasarkan jumlah tersebut.

const { t } = useI18n()

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

Aturan Jamak Bawaan

Dengan tiga bentuk, aturannya adalah: 0 menggunakan bentuk pertama, 1 menggunakan bentuk kedua, dan angka lainnya menggunakan bentuk ketiga. Dua bentuk menggabungkan 0 dan jumlah banyak ke dalam satu bentuk.

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

Penanda Tempat {count}

Di dalam pesan jamak, penanda tempat khusus {count} (atau {n}) diisi dengan angka yang Anda teruskan, sehingga Anda dapat menampilkan jumlahnya.

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

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

Bentuk Jamak dalam Templat

Dalam templat, gunakan $t dengan jumlah sebagai argumen kedua, sama seperti dalam skrip.

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

Menggabungkan Jumlah dan Nilai Bernama

Anda dapat meneruskan jumlah sekaligus penanda tempat bernama dengan memberikan jumlah dan objek berisi nilai.

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)

Apa Itu Pesan Tertaut?

Terkadang satu terjemahan perlu menyertakan terjemahan lain untuk menghindari duplikasi. Pesan tertaut merujuk ke kunci lain dengan sintaks @:.

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

Menyelesaikan Tautan

Saat Anda menerjemahkan welcome, token @:brand digantikan oleh nilai terjemahan dari brand. Ubah brand sekali dan setiap pesan tertaut akan diperbarui.

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

Menautkan dengan Kunci Bersarang

Tautan juga berfungsi dengan kunci bersarang yang dipisahkan titik. Bungkus referensi yang terdiri dari beberapa kata dalam tanda kurung jika diperlukan.

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

Pengubah pada Tautan

Pesan tertaut mendukung pengubah seperti @.upper untuk mengubah nilai tertaut (menjadi huruf besar, huruf kecil, atau kapital).

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

Pemeriksaan Singkat

Periksa pemahaman Anda tentang bentuk jamak dan tautan.

Jawab di pelajaran interaktif

Rangkuman

Anda telah mempelajari bentuk jamak dan penggunaan ulang pesan:

Pisahkan bentuk jamak dengan |: "no items | one item | {count} items".
Teruskan jumlah ke t(key, count) untuk memilih bentuk yang tepat.
Penanda tempat {count} menampilkan jumlahnya.
Pesan tertaut menggunakan ulang kunci lain melalui @:otherKey (gunakan @:(nested.key) untuk kunci bersarang).
Pengubah seperti @.upper mengubah nilai tertaut.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 42
Pelajaran: 156

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pluralisasi dan Pesan Tertaut” gratis?

Ya — teks lengkap “Pluralisasi dan Pesan Tertaut” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pluralisasi dan Pesan Tertaut”?

Aturan plural @:key|@:key, plural berdasarkan jumlah, serta pesan tertaut dengan @:path. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Pluralisasi dan Pesan Tertaut” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Menyiapkan vue-i18n dan File Pesan
Composable useI18n dan Fungsi t()
Pluralisasi dan Pesan Tertaut
Pemformatan Angka, Tanggal, dan Mata Uang

← Kembali ke Vue Academy