Автор:

Создание:2024-08-11Последнее обновление:2025-06-29

Ссылайтесь на этот документ на ваш любимый ассистент AIChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Спросите свой вопрос и получите сводку документа, используя эту страницу и выбранного вами поставщика AI

Этот документ устарел, базовая версия была обновлена 23 августа 2025 г..

Перейти к английской документации

История версий

"Инициализация истории"
v5.5.1029.06.2025

Содержимое этой страницы было переведено с помощью ИИ.

Смотреть последнюю версию оригинального контента на английском

Изменить эту документацию

Если у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.

Ссылка на документацию GitHub

Копировать

Копировать Markdown документа в буфер обмена

Перечисление / Множественное число

Name: Intlayer
Author: Intlayer

Как работает перечисление

To use enumeration in a React component, you can leverage the useIntlayer hook from the react-intlayer package. This hook retrieves the correct content based on the specified ID. Here's an example of how to use it:

**/*.tsx

Копировать код

Копировать код в буфер обмена

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

const CarComponent: FC = () => {
const { numberOfCar } = useIntlayer("car_count");

return (
  <div>
    <p>
      {
        numberOfCar(0) // Output: No cars
      }
    </p>
    <p>
      {
        numberOfCar(6) // Output: Some cars
      }
    </p>
    <p>
      {
        numberOfCar(20) // Output: Many cars
      }
    </p>
    <p>
      {
        numberOfCar(0.01) // Output: Fallback value
      }
    </p>
  </div>
);
};

To use enumeration in Next.js Client Components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Копировать код

Копировать код в буфер обмена

"use client";

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

const CarComponent: FC = () => {
const { numberOfCar } = useIntlayer("car_count");

return (
  <div>
    <p>{numberOfCar(6)}</p>
  </div>
);
};

export default CarComponent;

To use enumeration in Vue components, retrieve it via the useIntlayer hook. Here's an example:

**/*.vue

Копировать код

Копировать код в буфер обмена

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { numberOfCar } = useIntlayer("car_count");</script><template><div>  <p>{{ numberOfCar(6) }}</p></div></template>

To use enumeration in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:

**/*.svelte

Копировать код

Копировать код в буфер обмена

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("car_count");</script><div><p>{$content.numberOfCar(6)}</p></div>

To use enumeration in Preact components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Копировать код

Копировать код в буфер обмена

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

const CarComponent: FC = () => {
const { numberOfCar } = useIntlayer("car_count");

return (
  <div>
    <p>{numberOfCar(6)}</p>
  </div>
);
};

export default CarComponent;

To use enumeration in SolidJS components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Копировать код

Копировать код в буфер обмена

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

const CarComponent: Component = () => {
const { numberOfCar } = useIntlayer("car_count");

return (
  <div>
    <p>{numberOfCar(6)}</p>
  </div>
);
};

export default CarComponent;

To use enumeration in Angular components, retrieve it via the useIntlayer hook. Here's an example:

app.component.ts

Копировать код

Копировать код в буфер обмена

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-car",template: `  <div>    <p>{{ content().numberOfCar(6) }}</p>  </div>`,})export class CarComponent {content = useIntlayer("car_count");}

To use enumeration with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

**/*.ts

Копировать код

Копировать код в буфер обмена

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

installIntlayer();

const content = useIntlayer("car_count").onChange((newContent) => {
document.getElementById("cars")!.textContent = newContent.numberOfCar(6);
});

// Initial render
document.getElementById("cars")!.textContent = content.numberOfCar(6);

Настройка перечисления

Чтобы настроить перечисление в вашем проекте Intlayer, необходимо создать модуль содержимого, включающий определения перечислений. Вот пример простого перечисления для количества автомобилей:

**/*.content.ts

Копировать код

Копировать код в буфер обмена

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

const carEnumeration = {
  key: "car_count",
  content: {
    numberOfCar: enu({
      "<-1": "Меньше чем минус один автомобиль",
      "-1": "Минус один автомобиль",
      "0": "Нет автомобилей",
      "1": "Один автомобиль",
      ">5": "Несколько автомобилей",
      ">19": "Много автомобилей",
      "fallback": "Запасное значение", // Необязательно
    }),
  },
} satisfies Dictionary;

export default carEnumeration;

В этом примере enu сопоставляет различные условия с конкретным содержимым. При использовании в React-компоненте Intlayer может автоматически выбирать соответствующее содержимое на основе переданной переменной.

Порядок объявления важен в перечислениях Intlayer. Первое подходящее объявление будет выбрано. Если применяются несколько условий, убедитесь, что они расположены в правильном порядке, чтобы избежать непредвиденного поведения.

Если запасное значение не объявлено, функция вернёт undefined, если ни один ключ не совпадает.

Использование перечислений с React Intlayer

**/*.tsx

Копировать код

Копировать код в буфер обмена

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

const CarComponent: FC = () => {
const { numberOfCar } = useIntlayer("car_count");

return (
  <div>
    <p>
      {
        numberOfCar(0) // Output: No cars
      }
    </p>
    <p>
      {
        numberOfCar(6) // Output: Some cars
      }
    </p>
    <p>
      {
        numberOfCar(20) // Output: Many cars
      }
    </p>
    <p>
      {
        numberOfCar(0.01) // Output: Fallback value
      }
    </p>
  </div>
);
};

To use enumeration in Next.js Client Components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Копировать код

Копировать код в буфер обмена

"use client";

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

const CarComponent: FC = () => {
const { numberOfCar } = useIntlayer("car_count");

return (
  <div>
    <p>{numberOfCar(6)}</p>
  </div>
);
};

export default CarComponent;

To use enumeration in Vue components, retrieve it via the useIntlayer hook. Here's an example:

**/*.vue

Копировать код

Копировать код в буфер обмена

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { numberOfCar } = useIntlayer("car_count");</script><template><div>  <p>{{ numberOfCar(6) }}</p></div></template>

To use enumeration in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:

**/*.svelte

Копировать код

Копировать код в буфер обмена

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("car_count");</script><div><p>{$content.numberOfCar(6)}</p></div>

To use enumeration in Preact components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Копировать код

Копировать код в буфер обмена

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

const CarComponent: FC = () => {
const { numberOfCar } = useIntlayer("car_count");

return (
  <div>
    <p>{numberOfCar(6)}</p>
  </div>
);
};

export default CarComponent;

To use enumeration in SolidJS components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Копировать код

Копировать код в буфер обмена

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

const CarComponent: Component = () => {
const { numberOfCar } = useIntlayer("car_count");

return (
  <div>
    <p>{numberOfCar(6)}</p>
  </div>
);
};

export default CarComponent;

To use enumeration in Angular components, retrieve it via the useIntlayer hook. Here's an example:

app.component.ts

Копировать код

Копировать код в буфер обмена

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-car",template: `  <div>    <p>{{ content().numberOfCar(6) }}</p>  </div>`,})export class CarComponent {content = useIntlayer("car_count");}

To use enumeration with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

**/*.ts

Копировать код

Копировать код в буфер обмена

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

installIntlayer();

const content = useIntlayer("car_count").onChange((newContent) => {
document.getElementById("cars")!.textContent = newContent.numberOfCar(6);
});

// Initial render
document.getElementById("cars")!.textContent = content.numberOfCar(6);

Дополнительные ресурсы

Для получения более подробной информации о настройке и использовании обратитесь к следующим ресурсам:

Эти ресурсы предоставляют дополнительную информацию о настройке и использовании Intlayer в различных средах и с разными фреймворками.

Using Ordinal Enumeration

To use this in a React component, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

**/*.tsx

Копировать код

Копировать код в буфер обмена

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

const RankingComponent: FC<{ count: number }> = ({ count }) => {
const { ordinal } = useIntlayer("ranking_component");

// Get the last digit to determine the correct suffix
const lastDigit = Math.abs(count) % 10;

return (
  <div>
    <p>
      {
        ordinal(lastDigit)({ count }) // e.g., "5th place" for count=5
      }
    </p>
  </div>
);
};

To use this in Next.js Client Components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

**/*.tsx

Копировать код

Копировать код в буфер обмена

"use client";

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

const RankingComponent: FC<{ count: number }> = ({ count }) => {
const { ordinal } = useIntlayer("ranking_component");
const lastDigit = Math.abs(count) % 10;

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

export default RankingComponent;

To use this in Vue components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

**/*.vue

Копировать код

Копировать код в буфер обмена

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";defineProps<{ count: number }>();const { ordinal } = useIntlayer("ranking_component");</script><template><div>  <p>{{ ordinal(Math.abs(count) % 10)({ count }) }}</p></div></template>

To use this in Svelte components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

**/*.svelte

Копировать код

Копировать код в буфер обмена

<script lang="ts">import { useIntlayer } from "svelte-intlayer";export let count: number;const content = useIntlayer("ranking_component");$: lastDigit = Math.abs(count) % 10;</script><div><p>{$content.ordinal(lastDigit)({ count })}</p></div>

To use this in Preact components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

**/*.tsx

Копировать код

Копировать код в буфер обмена

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

const RankingComponent: FC<{ count: number }> = ({ count }) => {
const { ordinal } = useIntlayer("ranking_component");
const lastDigit = Math.abs(count) % 10;

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

export default RankingComponent;

To use this in SolidJS components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

**/*.tsx

Копировать код

Копировать код в буфер обмена

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

const RankingComponent: Component<{ count: number }> = (props) => {
const { ordinal } = useIntlayer("ranking_component");

return (
  <div>
    <p>{ordinal(Math.abs(props.count) % 10)({ count: props.count })}</p>
  </div>
);
};

export default RankingComponent;

To use this in Angular components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

app.component.ts

Копировать код

Копировать код в буфер обмена

import { Component, Input } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-ranking",template: `  <div>    <p>{{ content().ordinal(lastDigit())({ count }) }}</p>  </div>`,})export class RankingComponent {@Input() count!: number;content = useIntlayer("ranking_component");lastDigit() {  return Math.abs(this.count) % 10;}}

To use this with vanilla-intlayer, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

**/*.ts

Копировать код

Копировать код в буфер обмена

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

installIntlayer();

const content = useIntlayer("ranking_component");
const lastDigit = Math.abs(5) % 10;

document.getElementById("ranking")!.textContent = content.ordinal(lastDigit)({
count: 5,
});

Combining Enumeration with Insert for Ordinal Numbers

A common use case is displaying ordinal numbers (1st, 2nd, 3rd, etc.). You can combine enu with insert to create dynamic ordinal content:

**/*.content.ts

Копировать код

Копировать код в буфер обмена

import { enu, insert, type Dictionary } from "intlayer";

const rankingContent = {
  key: "ranking_component",
  content: {
    ordinal: enu({
      1: insert("{{count}}st place"),
      2: insert("{{count}}nd place"),
      3: insert("{{count}}rd place"),
      fallback: insert("{{count}}th place"),
    }),
  },
} satisfies Dictionary;

export default rankingContent;

Using Ordinal Enumeration

To use this in a React component, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

**/*.tsx

Копировать код

Копировать код в буфер обмена

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

const RankingComponent: FC<{ count: number }> = ({ count }) => {
const { ordinal } = useIntlayer("ranking_component");

// Get the last digit to determine the correct suffix
const lastDigit = Math.abs(count) % 10;

return (
  <div>
    <p>
      {
        ordinal(lastDigit)({ count }) // e.g., "5th place" for count=5
      }
    </p>
  </div>
);
};

To use this in Next.js Client Components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

**/*.tsx

Копировать код

Копировать код в буфер обмена

"use client";

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

const RankingComponent: FC<{ count: number }> = ({ count }) => {
const { ordinal } = useIntlayer("ranking_component");
const lastDigit = Math.abs(count) % 10;

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

export default RankingComponent;

To use this in Vue components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

**/*.vue

Копировать код

Копировать код в буфер обмена

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";defineProps<{ count: number }>();const { ordinal } = useIntlayer("ranking_component");</script><template><div>  <p>{{ ordinal(Math.abs(count) % 10)({ count }) }}</p></div></template>

To use this in Svelte components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

**/*.svelte

Копировать код

Копировать код в буфер обмена

<script lang="ts">import { useIntlayer } from "svelte-intlayer";export let count: number;const content = useIntlayer("ranking_component");$: lastDigit = Math.abs(count) % 10;</script><div><p>{$content.ordinal(lastDigit)({ count })}</p></div>

To use this in Preact components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

**/*.tsx

Копировать код

Копировать код в буфер обмена

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

const RankingComponent: FC<{ count: number }> = ({ count }) => {
const { ordinal } = useIntlayer("ranking_component");
const lastDigit = Math.abs(count) % 10;

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

export default RankingComponent;

To use this in SolidJS components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

**/*.tsx

Копировать код

Копировать код в буфер обмена

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

const RankingComponent: Component<{ count: number }> = (props) => {
const { ordinal } = useIntlayer("ranking_component");

return (
  <div>
    <p>{ordinal(Math.abs(props.count) % 10)({ count: props.count })}</p>
  </div>
);
};

export default RankingComponent;

To use this in Angular components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

app.component.ts

Копировать код

Копировать код в буфер обмена

import { Component, Input } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-ranking",template: `  <div>    <p>{{ content().ordinal(lastDigit())({ count }) }}</p>  </div>`,})export class RankingComponent {@Input() count!: number;content = useIntlayer("ranking_component");lastDigit() {  return Math.abs(this.count) % 10;}}

To use this with vanilla-intlayer, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

**/*.ts

Копировать код

Копировать код в буфер обмена

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

installIntlayer();

const content = useIntlayer("ranking_component");
const lastDigit = Math.abs(5) % 10;

document.getElementById("ranking")!.textContent = content.ordinal(lastDigit)({
count: 5,
});

Additional Resources

For more detailed information on configuration and usage, refer to the following resources:

These resources provide further insights into the setup and usage of Intlayer in different environments and with various frameworks.

Множественное число Условие