作者:
    Aymeric PINEAU
    Creation:2026-05-04Last update:2026-05-04

    复数内容 / Intlayer 中的复数

    复数如何工作

    在 Intlayer 中，复数内容是通过 plural 函数实现的，它将 CLDR 复数类别（zero、one、two、few、many、other）映射到相应的内容。系统会根据当前激活的语言区域和计数，通过平台内置的 Intl.PluralRules API 自动选择正确的类别。

    与 enu 不同，enu 是根据您自己定义的数值范围选择内容的，而 plural 将选择权交给 CLDR 规则。这使得它能够扩展到具有复杂复数规则的语言（如俄语、波兰语、阿拉伯语或威尔士语），而无需手动编写求余逻辑。

    何时使用 plural vs enu

    To use plural content inside a React component, retrieve it via the useIntlayer hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.

    To use plural content in Next.js Client Components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

    设置复数内容

    要在 Intlayer 项目中设置复数内容，请创建一个使用 plural 辅助函数的内容模块。other 类别是必需的，并在语言区域未定义更具体类别时作为回退方案。

    **/*.content.ts
    import { plural, t, type Dictionary } from "intlayer";

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

export default openingsContent;

    支持的类别包括 zero、one、two、few、many、other。您只需要声明目标语言使用的类别, 当没有特定类别匹配时，Intlayer 会回退到 other。

    {{count}} 占位符会自动替换为您在运行时传入的计数。您也可以包含其他占位符（参见下面的自定义占位符）。

    在 React Intlayer 中使用复数内容

    要在 React 组件中使用复数内容，请通过 useIntlayer 钩子获取它，并传入计数进行调用。激活的语言区域和计数将结合在一起以匹配 CLDR 类别。

    **/*.tsx
    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;

    要在 Next.js 客户端组件中使用复数内容，通过 useIntlayer hook 检索它，并使用计数调用它。以下是一个示例：

    **/*.tsx
    "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;

    要在 Vue 组件中使用复数内容，请通过 useIntlayer hook 检索它，并使用计数调用它。以下是一个示例：

    **/*.vue
    <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>

    要在 Svelte 组件中使用复数内容，需要通过 useIntlayer hook 检索它，并使用计数调用它。通过 $ 访问 store。以下是一个示例：

    **/*.svelte
    <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>

    要在 Preact 组件中使用复数内容，通过 useIntlayer hook 检索它，并使用计数调用它。以下是一个示例：

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

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

  return (
    <div>
      {/* 英语中：                                     */}
      {/*  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;

    要在 SolidJS 组件中使用复数内容，请通过 useIntlayer hook 检索它，并使用计数调用它。以下是一个示例：

    **/*.tsx
    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;

    要在 Angular 组件中使用复数内容，通过 useIntlayer hook 检索它，并使用计数调用它。以下是一个示例：

    app.component.ts
    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");
}

    您可以通过两种等效的方式调用返回的函数：

    tsx
    totalOpenings(21); // 简写：仅传入计数
totalOpenings({ count: 21 }); // 显式形式

    自定义占位符

    复数文本可以包含除 {{count}} 之外的占位符。请在对象形式中与 count 一起传入：

    **/*.content.ts
    import { plural, type Dictionary } from "intlayer";

const inboxContent = {
  key: "inbox_summary",
  content: {
    summary: plural({
      other: "{{name}}，您有 {{count}} 条新消息",
    }),
  },
} satisfies Dictionary;

export default inboxContent;
    **/*.tsx
    const { summary } = useIntlayer("inbox_summary");

summary({ count: 1, name: "Alice" });
// → "Alice，您有 1 条新消息"

summary({ count: 7, name: "Alice" });
// → "Alice，您有 7 条新消息"

    CLDR 类别一览

    不同的语言使用 CLDR 类别的不同子集。一些常见情况：

    语言 使用的类别
    英语 (en) one, other
    法语 (fr) one, many, other
    俄语 (ru) one, few, many, other
    波兰语 (pl) one, few, many, other
    阿拉伯语 (ar) zero, one, two, few, many, other
    日语 / 中文 仅 other

    您无需死记硬背, 只需为您拥有翻译的类别进行声明，Intlayer 会在需要时回退到 other。

    限制

    与其他节点相比，plural 目前还不能与子节点嵌套使用。

    示例：

    有效：

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

    无效：

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

    更多资源

    有关配置和使用的更多详细信息，请参考以下资源：

    这些资源提供了在各种环境和框架中设置和使用 Intlayer 的深入见解。

    翻译选择