作者:

Creation:2026-05-04Last update:2026-05-04

将此文档参考到您的 AI 助手ChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

使用您最喜欢的AI助手总结文档，并引用此页面和AI提供商

版本历史

"Init history"
v8.8.02026/5/4

此页面的内容已使用 AI 翻译。

查看英文原文的最新版本

编辑此文档

如果您有改善此文档的想法，请随时通过在GitHub上提交拉取请求来贡献。

文档的 GitHub 链接

Copy

复制文档 Markdown 到剪贴板

复数内容 / Intlayer 中的复数

Name: Intlayer
Rating: 4.92 (64 reviews)
Author: Intlayer

复数如何工作

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

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

何时使用 `plural` 与 `enu`

显示表格的所有内容

在弹窗中打开表格以清晰地查看所有数据

用例	辅助函数
语言相关的语法复数形式 (one apple / two apples)	`plural`
自定义数值范围 (`<5`, `>=10`) 或非 CLDR 分类	`enu`

如果您仅针对英语（只有 one / other），两者皆可。对于具有 few / many / two 区分的语言，推荐使用 plural。

设置复数内容

要在 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 目前还不能与子节点嵌套使用。

示例：

有效：

复制代码

复制代码到剪贴板

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

无效：

复制代码

复制代码到剪贴板

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

版本历史

复数内容 / Intlayer 中的复数

复数如何工作

何时使用 plural 与 enu

设置复数内容

在 React Intlayer 中使用复数内容

自定义占位符

CLDR 类别一览

限制

更多资源

何时使用 `plural` 与 `enu`