0Pricing
Vue Academy · Lektion

Formatierung von Zahlen, Datumsangaben und Währungen

n() für Zahlen, d() für Datumsangaben, Datums-/Zeitformate und numberFormats pro Locale

Formatierung von Zahlen, Datumsangaben und Währungen ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Zahlen und Datumsangaben unterscheiden sich je nach Locale

1,000.50 in den USA entspricht 1.000,50 in weiten Teilen Europas. Auch Datumsangaben und Währungen unterscheiden sich. Vue I18n kapselt die Intl-APIs des Browsers, damit Zahlen, Datumsangaben und Geldbeträge je nach Locale korrekt dargestellt werden.

numberFormats konfigurieren

Definieren Sie benannte Zahlenformate pro Locale in der Option numberFormats von createI18n. Jedes benannte Format ist ein Optionsobjekt für Intl.NumberFormat.

const i18n = createI18n({
  locale: "en",
  numberFormats: {
    en: {
      currency: { style: "currency", currency: "USD" },
      decimal: { style: "decimal", minimumFractionDigits: 2 },
    },
  },
})

Die Funktion n()

Formatieren Sie eine Zahl mit n(value, formatName) aus useI18n() oder mit $n in Templates. Dabei wird das benannte Format der aktiven Locale verwendet.

const { n } = useI18n()

n(1234.5, "decimal") // "1,234.50" in en

Währungsformatierung

Der Stil currency fügt das richtige Symbol und die passende Gruppierung hinzu. Der Währungscode in der Formatkonfiguration legt fest, welches Symbol angezeigt wird.

const { n } = useI18n()

n(49.99, "currency") // "$49.99" in en

Locale-gerechte Währungsdarstellung

Fügen Sie dasselbe benannte Format unter jeder Locale mit den jeweils passenden Einstellungen hinzu. Beim Wechsel von locale ändern sich Gruppierung, Dezimaltrennzeichen und Symbolposition automatisch.

numberFormats: {
  en: { currency: { style: "currency", currency: "USD" } },
  tr: { currency: { style: "currency", currency: "TRY" } },
}
// n(49.99, "currency") => "$49.99" (en) or "TRY 49,99" style (tr)

Prozentangaben

Der Stil percent multipliziert mit 100 und fügt je nach Locale ein Prozentzeichen hinzu.

numberFormats: {
  en: { percent: { style: "percent", maximumFractionDigits: 1 } },
}

n(0.256, "percent") // "25.6%"

datetimeFormats konfigurieren

Die Datumsformatierung funktioniert analog zur Zahlenformatierung. Definieren Sie benannte Formate unter datetimeFormats, die jeweils Optionsobjekte für Intl.DateTimeFormat sind.

const i18n = createI18n({
  locale: "en",
  datetimeFormats: {
    en: {
      short: { year: "numeric", month: "short", day: "numeric" },
      long: { dateStyle: "full", timeStyle: "short" },
    },
  },
})

Die Funktion d()

Formatieren Sie ein Datum mit d(value, formatName) (oder mit $d in Templates). Übergeben Sie ein Date-Objekt oder einen Zeitstempel.

const { d } = useI18n()

d(new Date("2026-05-29"), "short") // "May 29, 2026" in en

Locale-gerechte Datumsangaben

Geben Sie wie bei Zahlen das benannte Datumsformat pro Locale an. Derselbe Aufruf liefert bei einem Wechsel der Locale eine lokalisierte Reihenfolge und lokalisierte Monatsnamen.

datetimeFormats: {
  en: { short: { year: "numeric", month: "short", day: "numeric" } },
  tr: { short: { year: "numeric", month: "short", day: "numeric" } },
}
// d(date, "short") => "May 29, 2026" (en) / "29 May 2026" (tr)

Formatierungshilfen in Templates verwenden

Verwenden Sie in Templates $n und $d mit einem Wert und dem benannten Format.

<template>
  <p>Total: {{ $n(total, "currency") }}</p>
  <p>Updated: {{ $d(updatedAt, "short") }}</p>
</template>

Einmalige Inline-Optionen

Neben benannten Formaten können Sie als zweites Argument ein Inline-Optionsobjekt für eine einmalige Formatierung übergeben, ohne es in der Konfiguration zu definieren.

const { n, d } = useI18n()

n(0.5, { style: "percent" })           // "50%"
d(new Date(), { weekday: "long" })     // "Friday"

Kurzer Check

Überprüfen Sie Ihr Verständnis der lokalisierungsabhängigen Formatierung.

Zusammenfassung

Sie haben die lokalisierungsabhängige Formatierung kennengelernt:

  • Konfigurieren Sie benannte Formate pro Locale unter numberFormats und datetimeFormats.
  • n(value, name) / $n formatiert Zahlen als Dezimal-, Währungs- oder Prozentwerte.
  • d(value, name) / $d formatiert Datumswerte.
  • Durch das Wechseln von locale werden Gruppierung, Dezimaltrennzeichen, Symbole und die Reihenfolge der Datumsbestandteile automatisch angepasst.
  • Sie können außerdem ein Inline-Optionsobjekt für eine einmalige Formatierung übergeben.

Häufig gestellte Fragen

Ist die Lektion „Formatierung von Zahlen, Datumsangaben und Währungen“ kostenlos?

Ja — der vollständige Text von „Formatierung von Zahlen, Datumsangaben und Währungen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Formatierung von Zahlen, Datumsangaben und Währungen“?

n() für Zahlen, d() für Datumsangaben, Datums-/Zeitformate und numberFormats pro Locale Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Formatierung von Zahlen, Datumsangaben und Währungen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. vue-i18n einrichten und Nachrichtendateien
  2. useI18n-Composable und t()-Funktion
  3. Pluralisierung und verknüpfte Nachrichten
  4. Formatierung von Zahlen, Datumsangaben und Währungen
← Zurück zu Vue Academy