Jede Lingo-Instanz bringt eine Reihe von Formatierungsmethoden mit, die auf die aktive Sprache abgestimmt sind. Sie sind schlanke Wrapper um die nativen Intl.*-APIs — ohne zusätzliches Bundle-Gewicht und ohne voreingenommene Standards jenseits der Sprachkennung, die du LingoProvider ohnehin schon übergeben hast.
Alle Methoden sind rein: Gibst du dieselbe Eingabe und dieselbe Sprache an, bekommst du dieselbe Ausgabe. Du kannst sie im Rendern bedenkenlos ohne Memoisierung aufrufen.
Zahlen#
l.num(value, options?)#
Formatiert eine Zahl mit sprachabhängiger Gruppierung und Dezimaldarstellung.
l.num(1234567); // "1,234,567" (en) / "1.234.567" (de) / "1 234 567" (fr)
l.num(3.14159, { maximumFractionDigits: 2 }); // "3.14" (en) / "3,14" (de)options wird an Intl.NumberFormat durchgereicht.
l.currency(value, code, options?)#
l.currency(29.99, "USD"); // "$29.99" (en) / "29,99 $US" (fr)
l.currency(29.99, "EUR"); // "€29.99" (en) / "29,99 €" (de)l.percent(value, options?)#
Übergib einen Dezimalwert (0.156, nicht 15.6).
l.percent(0.156); // "16%" (en) / "16 %" (fr)
l.percent(0.156, { maximumFractionDigits: 1 }); // "15.6%"l.unit(value, unit, options?)#
unit ist ein von Intl erkannter Einheitenname (celsius, kilometer-per-hour, megabyte usw.).
l.unit(32, "celsius"); // "32°C" (en) / "32 °C" (de)
l.unit(120, "kilometer-per-hour"); // "120 km/h"l.compact(value, options?)#
l.compact(1234567); // "1.2M" (en) / "123万" (ja) / "1,2 Mio." (de)
l.compact(950); // "950"Datum und Uhrzeit#
l.date(value, options?) / l.time / l.datetime#
Akzeptiert Date oder Epoch-Millisekunden.
l.date(new Date()); // "3/16/2026" (en) / "16.03.2026" (de)
l.time(new Date()); // "3:45 PM" (en) / "15:45" (de)
l.datetime(new Date()); // "3/16/2026, 3:45 PM" (en)
l.date(now, { dateStyle: "long" }); // "March 16, 2026"
l.date(now, { weekday: "short", month: "short", day: "numeric" }); // "Mon, Mar 16"l.relative(value, unit, options?)#
Offset mit Vorzeichen — negativ für Vergangenes, positiv für Zukünftiges.
l.relative(-3, "day"); // "3 days ago" (en) / "vor 3 Tagen" (de)
l.relative(2, "hour"); // "in 2 hours"
l.relative(0, "second", { numeric: "auto" }); // "now"Listen#
l.list(items, options?)#
Sprachabhängige Konjunktion. Der Standardstil ist long mit dem Typ conjunction ("und").
l.list(["apples", "oranges", "pears"]); // "apples, oranges, and pears" (en)
// "apples, oranges y pears" (es)
l.list(["red", "blue"], { type: "disjunction" }); // "red or blue"Dateigrößen#
l.fileSize(bytes)#
Praktischer Wrapper, der automatisch eine passende Einheit (B, KB, MB, GB, TB, PB) wählt und das Ergebnis mit sprachabhängigen Dezimalstellen formatiert.
l.fileSize(1024); // "1 KB"
l.fileSize(1073741824); // "1 GB" (en) / "1 Go" (fr)
l.fileSize(1536); // "1.5 KB"Anzeigenamen#
l.displayName(code, type)#
Übersetzt einen Sprach-, Regions-, Skript- oder Währungscode in einen lokalisierten Namen.
l.displayName("en", "language"); // "English" (en) / "Englisch" (de) / "Английский" (ru)
l.displayName("US", "region"); // "United States" / "Vereinigte Staaten"
l.displayName("USD", "currency"); // "US Dollar" / "US-Dollar"
l.displayName("Cyrl", "script"); // "Cyrillic" / "Kyrillisch"Gibt undefined zurück, wenn der Code für den angeforderten Typ nicht erkannt wird.
Sortierung#
l.sort(items, options?)#
Gibt ein neues sortiertes Array zurück — die Eingabe bleibt unverändert.
l.sort(["ä", "z", "a"]); // de: ["a", "ä", "z"] sv: ["a", "z", "ä"]
l.sort(["File 10", "File 2"], { numeric: true }); // ["File 2", "File 10"]Segmentierung#
l.segment(text, granularity?)#
Sprachabhängiges Aufteilen in Grapheme, Wörter oder Sätze. Unverzichtbar für CJK-Sprachen, in denen Leerzeichen keine Wörter voneinander trennen.
l.segment("Hello world", "word"); // ["Hello", " ", "world"]
l.segment("こんにちは世界", "word"); // ["こんにちは", "世界"] (ja)
l.segment("café", "grapheme"); // ["c", "a", "f", "é"]Die Standardgranularität ist "grapheme".
Warum schlanke Wrapper?#
Jede Methode delegiert an einen nativen Intl-Formatierer — kein Parsing, keine Zahlenbibliotheken, keine zusätzlichen Abhängigkeiten. Die Laufzeit hält das Bundle klein und überlässt die Sprachdaten der Plattform. Das heißt: Neue Sprachen, die in die ICU-Tabellen von V8 / SpiderMonkey aufgenommen werden, funktionieren ohne zusätzlichen Aufwand direkt mit.
Der einzige Mehrwert gegenüber rohem Intl ist die Sprachkennung — du setzt sie einmal über <LingoProvider locale="...">, und jeder Formatierer liest sie von dort. Wenn du lieber rohes Intl verwenden möchtest (für Code außerhalb von React), gibt dir createLingo(locale) dasselbe Objekt ohne den Provider.
Wie geht’s weiter?#
- useLingo — Strings über
l.textundl.richübersetzen. - Plurals and select — Formen anhand von Anzahl oder Kategorie auswählen.
