Nội dung số nhiều / Số nhiều trong Intlayer

Cách hoạt động của số nhiều

Trong Intlayer, nội dung số nhiều được thực hiện thông qua hàm plural, hàm này ánh xạ các danh mục số nhiều CLDR, zero, one, two, few, many, other, tới nội dung tương ứng của chúng. Danh mục chính xác được chọn tự động dựa trên ngôn ngữ đang hoạt động và giá trị số lượng, sử dụng API Intl.PluralRules tích hợp sẵn của nền tảng.

Không giống như enu, chọn nội dung dựa trên các phạm vi số do bạn tự xác định, plural ủy quyền việc lựa chọn cho các quy tắc CLDR. Đây là điều làm cho nó có thể mở rộng cho các ngôn ngữ có quy tắc số nhiều phức tạp, như tiếng Nga, tiếng Ba Lan, tiếng Ả Rập hoặc tiếng Wales, mà không cần phải tự viết logic modulo.

Khi nào nên sử dụng plural so với 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);

Thiết lập nội dung số nhiều

Để thiết lập nội dung số nhiều trong dự án Intlayer của bạn, hãy tạo một mô-đun nội dung sử dụng trợ giúp plural. Danh mục other là bắt buộc và được sử dụng làm phương án dự phòng khi một ngôn ngữ không xác định danh mục cụ thể hơn.

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

const openingsContent = {
  key: "total_openings",
  content: {
    totalOpenings: t({
      en: plural({
        one: "{{count}} opening",
        other: "{{count}} openings",
      }),
      vi: plural({
        other: "{{count}} vị trí đang tuyển",
      }),
    }),
  },
} satisfies Dictionary;

export default openingsContent;

Các danh mục được hỗ trợ là zero, one, two, few, many, other. Bạn chỉ cần khai báo các danh mục mà ngôn ngữ mục tiêu của bạn sử dụng, Intlayer sẽ quay lại other khi không có danh mục cụ thể nào khớp.

Trình giữ chỗ {{count}} được thay thế tự động bằng số lượng bạn chuyển vào lúc thực thi. Bạn cũng có thể bao gồm các trình giữ chỗ khác (xem Trình giữ chỗ tùy chỉnh bên dưới).

Sử dụng nội dung số nhiều với React Intlayer

Để sử dụng nội dung số nhiều bên trong một thành phần React, hãy truy xuất nó thông qua hook useIntlayer và gọi nó với một số lượng. Ngôn ngữ đang hoạt động và số lượng được kết hợp để chọn danh mục CLDR phù hợp.

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

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

  return (
    <div>
      {/* Trong tiếng Anh:                                  */}
      {/*  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;

Bạn có thể gọi hàm được trả về theo hai cách tương đương:

totalOpenings(21); // viết tắt: chỉ số lượngtotalOpenings({ count: 21 }); // dạng đầy đủ

Trình giữ chỗ tùy chỉnh

Chuỗi số nhiều có thể bao gồm các trình giữ chỗ khác ngoài {{count}}. Chuyển chúng dưới dạng đối tượng cùng với count:

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

const inboxContent = {
  key: "inbox_summary",
  content: {
    summary: plural({
      other: "{{name}}, bạn có {{count}} tin nhắn mới",
    }),
  },
} satisfies Dictionary;

export default inboxContent;

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

summary({ count: 1, name: "Alice" });
// → "Alice, bạn có 1 tin nhắn mới"

summary({ count: 7, name: "Alice" });
// → "Alice, bạn có 7 tin nhắn mới"

Sơ lược về các danh mục CLDR

Các ngôn ngữ khác nhau sử dụng các tập hợp con khác nhau của các danh mục CLDR. Một vài trường hợp phổ biến:

Bạn không cần phải ghi nhớ điều này, hãy khai báo các danh mục bạn có bản dịch và Intlayer sẽ quay lại other khi cần thiết.

Hạn chế

So với các nút khác, plural chưa thể được lồng ghép với các nút con.

Ví dụ:

Hợp lệ:

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

Không hợp lệ:

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

Tài nguyên bổ sung

Để biết thêm thông tin chi tiết về cấu hình và cách sử dụng, hãy tham khảo các tài nguyên sau:

• Tài liệu về Liệt kê (Enumeration)
• Tài liệu về Chèn (Insertion)
• Tài liệu về Intlayer CLI
• Tài liệu về React Intlayer
• Tài liệu về Next Intlayer

Các tài nguyên này cung cấp thêm thông tin chi tiết về việc thiết lập và sử dụng Intlayer trên nhiều môi trường và khung làm việc khác nhau.