Konten Jamak / Jamak di Intlayer

Cara Kerja Jamak

Di Intlayer, konten jamak dicapai melalui fungsi plural, yang memetakan kategori jamak CLDR, zero, one, two, few, many, other, ke konten yang sesuai. Kategori yang benar dipilih secara otomatis berdasarkan lokal aktif dan nilai hitungan, menggunakan API Intl.PluralRules bawaan platform.

Berbeda dengan enu, yang memilih konten berdasarkan rentang numerik yang Anda tentukan sendiri, plural mendelegasikan pemilihan ke aturan CLDR. Inilah yang membuatnya skalabel untuk bahasa dengan aturan pluralisasi yang kompleks, seperti Rusia, Polandia, Arab, atau Welsh, tanpa harus menulis logika modulo secara manual.

Kapan Menggunakan plural vs enu

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

"use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";defineProps<{ count: number }>();const { totalOpenings } = useIntlayer("total_openings");</script><template><div>  <p>{{ totalOpenings(count) }}</p></div></template>

<script lang="ts">import { useIntlayer } from "svelte-intlayer";export let count: number;const content = useIntlayer("total_openings");</script><div><p>{$content.totalOpenings(count)}</p></div>

import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const OpeningsComponent: Component<{ count: number }> = (props) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(props.count)}</p>
  </div>
);
};

export default OpeningsComponent;

import { Component, Input } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-openings",template: `  <div>    <p>{{ content().totalOpenings(count) }}</p>  </div>`,})export class OpeningsComponent {@Input() count!: number;content = useIntlayer("total_openings");}

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("total_openings").onChange((newContent) => {
document.getElementById("openings")!.textContent =
  newContent.totalOpenings(5);
});

// Initial render
document.getElementById("openings")!.textContent = content.totalOpenings(5);

Menyiapkan Konten Jamak

Untuk menyiapkan konten jamak dalam proyek Intlayer Anda, buat modul konten yang menggunakan helper plural. Kategori other wajib ada dan digunakan sebagai fallback ketika lokal tidak menentukan kategori yang lebih spesifik.

import { plural, t, type Dictionary } from "intlayer";

const openingsContent = {
  key: "total_openings",
  content: {
    totalOpenings: t({
      en: plural({
        one: "{{count}} opening",
        other: "{{count}} openings",
      }),
      id: plural({
        other: "{{count}} lowongan",
      }),
    }),
  },
} satisfies Dictionary;

export default openingsContent;

Kategori yang didukung adalah zero, one, two, few, many, other. Anda hanya perlu mendeklarasikan kategori yang digunakan bahasa target Anda, Intlayer kembali ke other ketika tidak ada kategori spesifik yang cocok.

Placeholder {{count}} secara otomatis diganti dengan hitungan yang Anda berikan saat runtime. Anda juga dapat menyertakan placeholder lain (lihat Placeholder khusus di bawah).

Menggunakan Konten Jamak dengan React Intlayer

Untuk menggunakan konten jamak di dalam komponen React, ambil melalui hook useIntlayer dan panggil dengan hitungan. Lokal aktif dan hitungan digabungkan untuk memilih kategori CLDR yang cocok.

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
  const { totalOpenings } = useIntlayer("total_openings");

  return (
    <div>
      {/* Dalam bahasa Inggris:                               */}
      {/*  count=0  → "0 openings"   (other)           */}
      {/*  count=1  → "1 opening"    (one)             */}
      {/*  count=2  → "2 openings"   (other)           */}
      {/*  count=21 → "21 openings"  (other)           */}
      <p>{totalOpenings(count)}</p>
    </div>
  );
};

export default OpeningsComponent;

Anda dapat memanggil fungsi yang dikembalikan dengan dua cara yang setara:

totalOpenings(21); // singkatan: hanya hitungantotalOpenings({ count: 21 }); // bentuk eksplisit

Placeholder khusus

String jamak dapat menyertakan placeholder selain {{count}}. Lewatkan dalam bentuk objek bersama count:

import { plural, type Dictionary } from "intlayer";

const inboxContent = {
  key: "inbox_summary",
  content: {
    summary: plural({
      other: "{{name}}, Anda memiliki {{count}} pesan baru",
    }),
  },
} satisfies Dictionary;

export default inboxContent;

const { summary } = useIntlayer("inbox_summary");

summary({ count: 1, name: "Alice" });
// → "Alice, Anda memiliki 1 pesan baru"

summary({ count: 7, name: "Alice" });
// → "Alice, Anda memiliki 7 pesan baru"

Sekilas Kategori CLDR

Bahasa yang berbeda menggunakan subset kategori CLDR yang berbeda. Beberapa kasus umum:

Anda tidak perlu menghafal ini, deklarasikan kategori yang Anda miliki terjemahannya, dan Intlayer akan kembali ke other jika diperlukan.

Batasan

Dibandingkan dengan node lain, plural belum dapat disarangkan (nested) dengan node anak.

Contoh:

Valid:

    totalOpenings: t({      en: plural({        one: "{{count}} opening",        other: "{{count}} openings",      }),      fr: plural({        one: "{{count}} offre",        other: "{{count}} offres",      }),    }),

Tidak Valid:

totalOpenings: plural({  one: t({    en: "{{count}} opening",    fr: "{{count}} offre",  }),  other: t({    en: "{{count}} openings",    fr: "{{count}} offres",  }),}),

Sumber Daya Tambahan

Untuk informasi lebih rinci tentang konfigurasi dan penggunaan, lihat sumber daya berikut:

• Dokumentasi Enumerasi
• Dokumentasi Inseri
• Dokumentasi Intlayer CLI
• Dokumentasi React Intlayer
• Dokumentasi Next Intlayer

Sumber daya ini menawarkan wawasan lebih lanjut tentang penyiapan dan penggunaan Intlayer di berbagai lingkungan dan kerangka kerja.