Autor:

Erstellung:2024-08-13Letzte Aktualisierung:2025-08-20

Referenzieren Sie diese Dokumentation mit Ihrem bevorzugten AI-AssistentenChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Stellen Sie Ihre Frage und erhalten Sie einen Resümee des Dokuments, indem Sie diese Seite und den AI-Anbieter Ihrer Wahl referenzieren

Dieses Dokument ist veraltet, die Basisversion wurde aktualisiert am 22. August 2026.

Zur englischen Doku gehen

Versionshistorie

"Vue-Formatter hinzugefügt"
v5.8.020.8.2025
"Dokumentation der Formatter hinzugefügt"
v5.8.018.8.2025
"Hinzufügen von Vue-Formatierern"
v5.8.020.8.2025
"Hinzufügen der Dokumentation zu Formatierern"
v5.8.018.8.2025
"Hinzufügen der Dokumentation zum Listen-Formatter"
v5.8.020.8.2025
"Hinzufügen zusätzlicher Intl-Dienstprogramme (DisplayNames, Collator, PluralRules)"
v5.8.020.8.2025
"Hinzufügen von Locale-Dienstprogrammen (getLocaleName, getLocaleLang, getLocaleFromPath, etc.)"
v5.8.020.8.2025
"Hinzufügen von Dienstprogrammen zur Inhaltsverwaltung (getContent, getTranslation, getIntlayer, etc.)"
v5.8.020.8.2025

Der Inhalt dieser Seite wurde mit einer KI übersetzt.

Den englischen Originaltext ansehen

Diese Dokumentation bearbeiten

Wenn Sie eine Idee haben, um diese Dokumentation zu verbessern, zögern Sie bitte nicht, durch das Einreichen eines Pull-Requests auf GitHub beizutragen.

GitHub-Link zur Dokumentation

Kopieren

Markdown des Dokuments in die Zwischenablage kopieren

Intlayer Formatierer

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

Überblick

Intlayer stellt eine Reihe von leichtgewichtigen Helfern bereit, die auf den nativen Intl-APIs aufbauen, sowie einen zwischengespeicherten Intl-Wrapper, um die wiederholte Erstellung schwerer Formatierer zu vermeiden. Diese Werkzeuge sind vollständig ortsabhängig und können aus dem Hauptpaket intlayer verwendet werden.

Für React, Vue und andere Frameworks verwenden Sie die Framework-spezifischen Hooks/Composables, die sich automatisch an den Locale-Kontext Ihrer App binden:

Alle Tabellendaten anzeigen

Tabelle in einem Modal öffnen, um alle Daten übersichtlich anzuzeigen

Framework	Import
React (client)	`react-intlayer/format`
React (server)	`react-intlayer/server/format`
Next.js (client)	`next-intlayer/client/format`
Next.js (server)	`next-intlayer/server/format`
Vue	`vue-intlayer/format`
Preact	`preact-intlayer/format`
Vanilla JS / Node.js	`intlayer` (erfordert manuelles Übergeben des Locale)

React Formatters

Import

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import {
  Intl,
  number,
  percentage,
  currency,
  date,
  relativeTime,
  units,
  compact,
  list,
  getLocaleName,
  getLocaleLang,
  getLocaleFromPath,
  getPathWithoutLocale,
  getLocalizedUrl,
  getHTMLTextDir,
  getContent,
  getTranslation,
  getIntlayer,
  getIntlayerAsync,
} from "intlayer";

Verfügbare Hooks

Alle Hooks verwenden automatisch das Locale aus IntlayerProvider oder IntlayerServerProvider.

Alle Tabellendaten anzeigen

Tabelle in einem Modal öffnen, um alle Daten übersichtlich anzuzeigen

Hook	Description	Example Output
`useNumber()`	Zahlen mit Gruppierung formatieren	`"123,456.789"`
`useCurrency()`	Währungswerte formatieren	`"€1,234.50"`
`usePercentage()`	Prozentsätze formatieren	`"25%"`
`useDate()`	Daten und Zeiten formatieren	`"Aug 2, 2025"`
`useRelativeTime()`	Relative Zeit formatieren	`"in 3 days"`
`useUnit()`	Werte mit Einheiten formatieren	`"5 kilometers"`
`useCompact()`	Zahlen in kompakter Notation formatieren	`"1.2K"`
`useList()`	Arrays als Listen formatieren	`"apple, banana, and orange"`
`useIntl()`	Locale-gebundenes `Intl` Objekt abrufen	Vollständiger `Intl` API Zugriff

Vollständiges Beispiel

tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import {
  useNumber,
  useCurrency,
  useDate,
  usePercentage,
  useCompact,
  useList,
  useRelativeTime,
  useUnit,
} from "react-intlayer/format";

const MyComponent = () => {
  const number = useNumber();
  const currency = useCurrency();
  const date = useDate();
  const percentage = usePercentage();
  const compact = useCompact();
  const list = useList();
  const relativeTime = useRelativeTime();
  const unit = useUnit();

  return (
    <div>
      <p>{number(123456.789)}</p>
      <p>{currency(1234.5, { currency: "EUR" })}</p>
      <p>{date(new Date(), "short")}</p>
      <p>{percentage(0.25)}</p>
      <p>{compact(1200)}</p>
      <p>{list(["apple", "banana", "orange"])}</p>
      <p>{relativeTime(new Date(), new Date(Date.now() + 86400000))}</p>
      <p>{unit(5, { unit: "kilometer" })}</p>
    </div>
  );
};

`useIntl` Hook

Der useIntl Hook bietet direkten Zugriff auf ein locale-gebundenes Intl Objekt. Dies ist nützlich, wenn Sie die vollständige Intl API benötigen (z. B. DisplayNames, Collator, PluralRules) mit automatischer Locale-Injektion.

tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { useIntl } from "react-intlayer/format";

const MyComponent = () => {
  const intl = useIntl(); // nutzt die Kontext-Locale

  // Standard Intl API, aber Locale wird automatisch injiziert, wenn undefined
  const formatted = new intl.NumberFormat(undefined, {
    style: "currency",
    currency: "USD",
  }).format(123.45);

  // Sie können die Locale bei Bedarf trotzdem überschreiben
  const date = new intl.DateTimeFormat("fr-FR").format(new Date());

  // Zugriff auf weitere Intl Features
  const displayNames = new intl.DisplayNames(undefined, { type: "language" });
  const languageName = displayNames.of("fr"); // "French" (oder lokalisiert)

  return (
    <div>
      <p>{formatted}</p>
      <p>{date}</p>
      <p>{languageName}</p>
    </div>
  );
};

Vue Formatters

`Intl.DisplayNames`

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { Intl } from "intlayer";

const languageNames = new Intl.DisplayNames("en", { type: "language" });
languageNames.of("fr"); // "Französisch"

const regionNames = new Intl.DisplayNames("fr", { type: "region" });
regionNames.of("US"); // "États-Unis"

Verfügbare Composables

Alle Composables geben berechnete Refs zurück, die automatisch das Gebietsschema vom eingefügten IntlayerProvider verwenden.

Alle Tabellendaten anzeigen

Tabelle in einem Modal öffnen, um alle Daten übersichtlich anzuzeigen

Composable	Beschreibung	Beispielausgabe
`useNumber()`	Formatiere Zahlen mit Gruppierung	`"123,456.789"`
`useCurrency()`	Formatiere Währungswerte	`"€1,234.50"`
`usePercentage()`	Formatiere Prozentsätze	`"25%"`
`useDate()`	Formatiere Daten und Zeiten	`"Aug 2, 2025"`
`useRelativeTime()`	Formatiere relative Zeit	`"in 3 days"`
`useUnit()`	Formatiere Werte mit Einheiten	`"5 kilometers"`
`useCompact()`	Formatiere Zahlen in kompakter Notation	`"1.2K"`
`useList()`	Formatiere Arrays als Listen	`"apple, banana, and orange"`
`useIntl()`	Rufe gebietsschemagebendes `Intl` Objekt ab	Vollständiger `Intl` API-Zugriff

Vollständiges Beispiel

vue

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<script setup>
import {
  useNumber,
  useCurrency,
  useDate,
  usePercentage,
  useCompact,
  useList,
  useRelativeTime,
  useUnit,
} from "vue-intlayer/format";

const number = useNumber();
const currency = useCurrency();
const date = useDate();
const percentage = usePercentage();
const compact = useCompact();
const list = useList();
const relativeTime = useRelativeTime();
const unit = useUnit();
</script>

<template>
  <div>
    <p>{{ number.value(123456.789) }}</p>
    <p>{{ currency.value(1234.5, { currency: "EUR" }) }}</p>
    <p>{{ date.value(new Date(), "short") }}</p>
    <p>{{ percentage.value(0.25) }}</p>
    <p>{{ compact.value(1200) }}</p>
    <p>{{ list.value(["apple", "banana", "orange"]) }}</p>
    <p>{{ relativeTime.value(new Date(), new Date(Date.now() + 86400000)) }}</p>
    <p>{{ unit.value(5, { unit: "kilometer" }) }}</p>
  </div>
</template>

`Intl.Collator`

Für lokalisierte Zeichenfolgenvergleiche und Sortierungen:

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { Intl } from "intlayer";

const collator = new Intl.Collator("de", {
  sensitivity: "base",
  numeric: true,
});

const words = ["äpfel", "zebra", "100", "20"];
words.sort(collator.compare); // ["20", "100", "äpfel", "zebra"]

Vanilla JS / Node.js Formatters

For non-framework contexts, import formatters directly from intlayer. Note that you must pass the locale manually.

`Intl.PluralRules`

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { Intl } from "intlayer";

const pluralRules = new Intl.PluralRules("ar");
pluralRules.select(0); // "zero"
pluralRules.select(1); // "one"
pluralRules.select(2); // "two"
pluralRules.select(3); // "few"
pluralRules.select(11); // "many"

Formatter-Funktionen

`number(value, options?)`

Formatiert einen numerischen Wert mit lokalisierter Gruppierung und Dezimalstellen.

value: number | string
options: Intl.NumberFormatOptions & { locale?: LocalesValues }

Code kopieren

Kopieren Sie den Code in die Zwischenablage

number(123456.789); // "123,456.789" (in en-US)
number("1000000", { locale: "fr" }); // "1 000 000"
number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"

`percentage(value, options?)`

Formatiert eine Zahl als Prozentsatz-String. Werte größer als 1 werden normalisiert (z. B. 25 → 25%, 0.25 → 25%).

value: number | string
options: Intl.NumberFormatOptions & { locale?: LocalesValues }

Code kopieren

Kopieren Sie den Code in die Zwischenablage

percentage(0.25); // "25%"
percentage(25); // "25%"
percentage(0.237, { minimumFractionDigits: 1 }); // "23.7%"

`currency(value, options?)`

Formatiert einen Wert als lokalisierte Währung. Standardmäßig USD.

value: number | string
options: Intl.NumberFormatOptions & { locale?: LocalesValues }
- Common: currency, currencyDisplay ("symbol" | "code" | "name")

Code kopieren

Kopieren Sie den Code in die Zwischenablage

currency(1234.5, { currency: "EUR" }); // "€1,234.50"
currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5 000,00 CAD"

`date(date, optionsOrPreset?)`

Formatiert einen Datums-/Zeitwert.

date: Date | string | number
optionsOrPreset: Intl.DateTimeFormatOptions & { locale?: LocalesValues } oder Voreinstellung: "short" | "long" | "dateOnly" | "timeOnly" | "full"

Code kopieren

Kopieren Sie den Code in die Zwischenablage

date(new Date(), "short"); // z. B. "08/02/25, 14:30"
date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); // "2 août"

`relativeTime(from, to?, options?)`

Formatiert relative Zeit zwischen zwei Zeitpunkten.

from: Date | string | number
to: Date | string | number (Standardwert: new Date())
options: { locale?, unit?, numeric?, style? }

Code kopieren

Kopieren Sie den Code in die Zwischenablage

const now = new Date();
const in3Days = new Date(now.getTime() + 3 * 864e5);
relativeTime(now, in3Days, { unit: "day" }); // "in 3 days"

const twoHoursAgo = new Date(now.getTime() - 2 * 3600e3);
relativeTime(now, twoHoursAgo, { unit: "hour", numeric: "auto" }); // "2 hours ago"

`units(value, options?)`

Formatiert einen numerischen Wert mit einer Einheit.

value: number | string
options: Intl.NumberFormatOptions & { locale?: LocalesValues }
- Common: unit (z. B. "kilometer", "byte"), unitDisplay ("short" | "narrow" | "long")

Code kopieren

Kopieren Sie den Code in die Zwischenablage

units(5, { unit: "kilometer", unitDisplay: "long", locale: "en-GB" }); // "5 kilometers"
units(1024, { unit: "byte", unitDisplay: "narrow" }); // "1,024B"

`compact(value, options?)`

Formatiert eine Nummer mit kompakter Notation.

value: number | string
options: Intl.NumberFormatOptions & { locale?: LocalesValues }

Code kopieren

Kopieren Sie den Code in die Zwischenablage

compact(1200); // "1.2K"
compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"

`list(values, options?)`

Formatiert ein Array in eine lokalisierte Listzeichenkette.

values: (string | number)[]
options: Intl.ListFormatOptions & { locale?: LocalesValues }
- Häufig: type ("conjunction" | "disjunction" | "unit"), style ("long" | "short" | "narrow")

Code kopieren

Kopieren Sie den Code in die Zwischenablage

list(["apple", "banana", "orange"]); // "apple, banana, and orange"
list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge, vert ou bleu"

Cached Intl

Das von intlayer exportierte Intl ist ein gecachter Wrapper um das globale Intl. Es speichert Formatter-Instanzen (NumberFormat, DateTimeFormat, usw.) im Cache, um zu vermeiden, dass diese wiederholt erstellt werden, was die Performance verbessert.

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { Intl } from "intlayer";

// Zahlenformatierung
const numberFormat = new Intl.NumberFormat("en-GB", {
  style: "currency",
  currency: "GBP",
});
numberFormat.format(1234.5); // "£1,234.50"

// Anzeigenamen für Sprachen, Regionen usw.
const displayNames = new Intl.DisplayNames("fr", { type: "language" });
displayNames.of("en"); // "anglais"

// Sortierung (Collation)
const collator = new Intl.Collator("fr", { sensitivity: "base" });
collator.compare("é", "e"); // 0 (equal)

// Pluralregeln
const pluralRules = new Intl.PluralRules("fr");
pluralRules.select(1); // "one"
pluralRules.select(2); // "other"

Zusätzliche Intl-Funktionen

`Intl.DisplayNames`

Für lokalisierte Namen von Sprachen, Regionen, Währungen und Schriften:

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { Intl } from "intlayer";

const languageNames = new Intl.DisplayNames("en", { type: "language" });
languageNames.of("fr"); // "French"

const regionNames = new Intl.DisplayNames("fr", { type: "region" });
regionNames.of("US"); // "États-Unis"

`Intl.Collator`

Für gebietsschemaabhängigen Stringvergleich und Sortierung:

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { Intl } from "intlayer";

const collator = new Intl.Collator("de", {
  sensitivity: "base",
  numeric: true,
});

const words = ["äpfel", "zebra", "100", "20"];
words.sort(collator.compare); // ["20", "100", "äpfel", "zebra"]

`Intl.PluralRules`

Zur Bestimmung von Pluralformen in verschiedenen Locales:

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { Intl } from "intlayer";

const pluralRules = new Intl.PluralRules("ar");
pluralRules.select(0); // "zero"
pluralRules.select(1); // "one"
pluralRules.select(2); // "two"
pluralRules.select(3); // "few"
pluralRules.select(11); // "many"

Locale-Dienstprogramme

`getLocaleName(displayLocale, targetLocale?)`

Ermittelt den lokalisierten Namen eines Sprachraums in einem anderen Sprachraum:

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { getLocaleName } from "intlayer";

getLocaleName("fr", "en"); // "French"
getLocaleName("en", "fr"); // "anglais"
getLocaleName("de", "es"); // "alemán"

`getLocaleLang(locale?)`

Extrahiert den Sprachcode aus einem Locale-String:

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { getLocaleLang } from "intlayer";

getLocaleLang("en-US"); // "en"
getLocaleLang("fr-CA"); // "fr"
getLocaleLang("de"); // "de"

`getLocaleFromPath(inputUrl)`

Extrahiert das Locale-Segment aus einer URL oder einem Pfadnamen:

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { getLocaleFromPath } from "intlayer";

getLocaleFromPath("/en/dashboard"); // "en"
getLocaleFromPath("/fr/dashboard"); // "fr"
getLocaleFromPath("/dashboard"); // "en" (Standard-Sprachregion)
getLocaleFromPath("https://example.com/es/about"); // "es"

`getPathWithoutLocale(inputUrl, locales?)`

Entfernt das Sprachregion-Segment aus einer URL oder einem Pfadnamen:

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { getPathWithoutLocale } from "intlayer";

getPathWithoutLocale("/en/dashboard"); // "/dashboard"
getPathWithoutLocale("/fr/dashboard"); // "/dashboard"
getPathWithoutLocale("https://example.com/en/about"); // "https://example.com/about"

`getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`

Erzeugt eine lokalisierte URL für die aktuelle Sprachregion:

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { getLocalizedUrl } from "intlayer";

getLocalizedUrl("/about", "fr", ["en", "fr"], "en", false); // "/fr/about"
getLocalizedUrl("/about", "en", ["en", "fr"], "en", false); // "/about"
getLocalizedUrl("https://example.com/about", "fr", ["en", "fr"], "en", true); // "https://example.com/fr/about"

`getHTMLTextDir(locale?)`

Gibt die Schreibrichtung für eine Sprache zurück:

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { getHTMLTextDir } from "intlayer";

getHTMLTextDir("en-US"); // "ltr"
getHTMLTextDir("ar"); // "rtl"
getHTMLTextDir("he"); // "rtl"

Dienstprogramme zur Inhaltsverarbeitung

`getContent(node, nodeProps, locale?)`

Transformiert einen Inhaltsknoten mit allen verfügbaren Plugins (Übersetzung, Aufzählung, Einfügung usw.):

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { getContent } from "intlayer";

const content = getContent(
  contentNode,
  { dictionaryKey: "common", dictionaryPath: "/path/to/dict" },
  "fr"
);

`getTranslation(languageContent, locale?, fallback?)`

Extrahiert Inhalte für eine bestimmte Sprache aus einem Sprachinhaltsobjekt:

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { getTranslation } from "intlayer";

const content = getTranslation(
  {
    en: "Hello",
    fr: "Bonjour",
    de: "Hallo",
  },
  "fr",
  true
); // "Bonjour"

`getIntlayerAsync(dictionaryKey, locale?, plugins?)`

Ruft asynchron Inhalte aus einem entfernten Wörterbuch ab:

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { getIntlayerAsync } from "intlayer";

const content = await getIntlayerAsync("common", "fr");

Hinweise

Alle Hilfsfunktionen akzeptieren Eingaben vom Typ string; diese werden intern in Zahlen oder Daten umgewandelt.
Die Locale wird standardmäßig auf Ihre konfigurierte internationalization.defaultLocale gesetzt, falls keine Locale angegeben wird.
Diese Hilfsfunktionen sind dünne Wrapper; für erweiterte Formatierungen können die Standard-Intl-Optionen direkt verwendet werden.

Funktionsabruf Datei pro Locale

Versionshistorie

Intlayer Formatierer

Table of Contents

Überblick

React Formatters

Import

Verfügbare Hooks

Vollständiges Beispiel

useIntl Hook

Vue Formatters

Intl.DisplayNames

Verfügbare Composables

Vollständiges Beispiel

Intl.Collator

Vanilla JS / Node.js Formatters

Intl.PluralRules

Formatter-Funktionen

number(value, options?)

percentage(value, options?)

currency(value, options?)

date(date, optionsOrPreset?)

relativeTime(from, to?, options?)

units(value, options?)

compact(value, options?)

list(values, options?)

Cached Intl

Zusätzliche Intl-Funktionen

Intl.DisplayNames

Intl.Collator

Intl.PluralRules

Locale-Dienstprogramme

getLocaleName(displayLocale, targetLocale?)

getLocaleLang(locale?)

getLocaleFromPath(inputUrl)

getPathWithoutLocale(inputUrl, locales?)

getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)

getHTMLTextDir(locale?)

Dienstprogramme zur Inhaltsverarbeitung

getContent(node, nodeProps, locale?)

getTranslation(languageContent, locale?, fallback?)

getIntlayerAsync(dictionaryKey, locale?, plugins?)

Hinweise

`useIntl` Hook

`Intl.DisplayNames`

`Intl.Collator`

`Intl.PluralRules`

`number(value, options?)`

`percentage(value, options?)`

`currency(value, options?)`

`date(date, optionsOrPreset?)`

`relativeTime(from, to?, options?)`

`units(value, options?)`

`compact(value, options?)`

`list(values, options?)`

`Intl.DisplayNames`

`Intl.Collator`

`Intl.PluralRules`

`getLocaleName(displayLocale, targetLocale?)`

`getLocaleLang(locale?)`

`getLocaleFromPath(inputUrl)`

`getPathWithoutLocale(inputUrl, locales?)`

`getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`

`getHTMLTextDir(locale?)`

`getContent(node, nodeProps, locale?)`

`getTranslation(languageContent, locale?, fallback?)`

`getIntlayerAsync(dictionaryKey, locale?, plugins?)`