0Pricing
React Academy · Pelajaran

Bentuk Jamak & Interpolasi

Tangani bentuk jamak berdasarkan jumlah dan sisipkan nilai dinamis ke dalam string terjemahan.

Bentuk Jamak & Interpolasi adalah pelajaran React 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 React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Selamat Datang

Dalam pelajaran ini, Anda akan menangani bentuk jamak berdasarkan jumlah dan menyisipkan nilai dinamis ke dalam teks terjemahan menggunakan interpolasi serta dukungan bentuk jamak i18next.

Dasar-Dasar Interpolasi

Gunakan kurung kurawal ganda dalam teks terjemahan sebagai placeholder. Berikan objek berisi nilai variabel sebagai argumen kedua untuk t().
// JSON: "greeting": "Hello, {{name}}!"
t('greeting', { name: 'Alice' }); // Hello, Alice!

Beberapa Variabel Interpolasi

Anda dapat menggunakan sebanyak mungkin variabel interpolasi yang diperlukan dalam satu teks.
// JSON: "summary": "You have {{count}} messages in {{folder}}"
t('summary', { count: 5, folder: 'Inbox' });
// You have 5 messages in Inbox

Mengamankan HTML

Secara bawaan, i18next mengamankan karakter HTML dalam nilai yang diinterpolasikan. Untuk merender HTML di dalam nilai yang diinterpolasikan, tetapkan `escapeValue: false` dalam konfigurasi init (sudah aman di React karena React mengamankan JSX).

Bentuk Jamak

i18next mendukung bentuk jamak secara otomatis. Definisikan `key` untuk bentuk tunggal dan `key_other` (atau `key_plural`) untuk bentuk jamak. Berikan `count` dalam objek interpolasi.
// JSON:
// "item": "{{count}} item"
// "item_other": "{{count}} items"

t('item', { count: 1 }); // 1 item
t('item', { count: 5 }); // 5 items

Aturan Bentuk Jamak Khusus Bahasa

Setiap bahasa memiliki aturan bentuk jamak yang berbeda. Bahasa Rusia memiliki 4 bentuk jamak, sedangkan bahasa Arab memiliki 6. i18next secara otomatis menggunakan aturan Unicode CLDR untuk setiap bahasa. Definisikan semua bentuk yang diperlukan dalam berkas terjemahan.
// Russian (ru):
// key_one, key_few, key_many, key_other

Bentuk Nol

i18next juga mendukung bentuk khusus `key_zero` ketika count bernilai 0, sehingga Anda dapat menggunakan susunan kata yang berbeda (misalnya, 'Tidak ada item' alih-alih '0 item').
// JSON:
// "messages_zero": "No messages"
// "messages_one": "{{count}} message"
// "messages_other": "{{count}} messages"

t('messages', { count: 0 }); // No messages

Kunci Bertingkat dengan Bentuk Jamak

Anda dapat memiliki kunci bentuk jamak di dalam objek bertingkat. Gunakan notasi titik untuk mengaksesnya, sama seperti kunci bertingkat biasa.
// JSON: { "cart": { "items_one": "item", "items_other": "items" } }
t('cart.items', { count: 3 }); // items

Pemformatan Tanggal dan Angka

i18next terintegrasi dengan API Intl untuk pemformatan tanggal dan angka sesuai lokal. Gunakan i18n.format() atau plugin intlify untuk memformat tanggal sebagai bagian dari terjemahan.
t('lastSeen', { date: new Date(), formatParams: {
  date: { month: 'long', day: 'numeric' }
}});

Terjemahan Berdasarkan Konteks

Gunakan opsi `context` untuk bentuk yang berbeda secara tata bahasa dalam konteks yang berbeda (misalnya, kata yang menunjukkan gender). Definisikan varian `key_male` dan `key_female` dalam berkas terjemahan.
// JSON: { "hero_male": "Hero", "hero_female": "Heroine" }
t('hero', { context: 'female' }); // Heroine

Pemeriksaan Singkat

Bagaimana cara memasukkan nilai dinamis bernama 'username' ke dalam teks terjemahan dengan i18next?

Ringkasan

Gunakan {{variable}} untuk interpolasi, key_other/key_one untuk bentuk jamak, dan key_zero untuk bentuk nol. i18next secara otomatis menerapkan aturan bentuk jamak Unicode CLDR untuk setiap bahasa. Gunakan context untuk varian tata bahasa.

Selanjutnya

Pelajaran berikutnya: **Pengalih Bahasa dan Pemuatan Terjemahan Secara Malas** — Anda akan membuat pengalih lokal dan memuat paket terjemahan sesuai kebutuhan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Bentuk Jamak & Interpolasi” gratis?

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

Apa yang akan aku pelajari di “Bentuk Jamak & Interpolasi”?

Tangani bentuk jamak berdasarkan jumlah dan sisipkan nilai dinamis ke dalam string terjemahan. Kamu berlatih React 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 React Academy?

Tidak diperlukan pengalaman sebelumnya. React 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 “Bentuk Jamak & Interpolasi” 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 React Academy ini?

Ya. Setiap pelajaran React 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

  1. Menyiapkan react-i18next
  2. Menggunakan Hook useTranslation
  3. Bentuk Jamak & Interpolasi
  4. Pengalih Bahasa & Pemuatan Terjemahan Malas
← Kembali ke React Academy