Internationalisierung

Daten internationalisieren

Wir können Datumsobjekte internationalisieren, indem wir die eingebaute Intl-API von JavaScript nutzen:

const now = new Date();

Eine komplette Tabelle dieser Codes findest du hier.

Wir können auch weitere Optionen mitgeben, um z.B. auch die Zeit anzuzeigen:

const options = {
  hour: 'numeric',
  minute: 'numeric',
  day: 'numeric',
  month: 'numeric',
  year: 'numeric'
};




 

Der Datentyp Options hat folgende Möglichkeiten:

type Options = {
 dateStyle: 'full' | 'long' | 'medium' | 'short',
 timeStyle: 'full' | 'long' | 'medium' | 'short',
 calendar: 'buddhist' | 'chinese' | 'coptic' | 'dangi' | 'ethioaa' | 'ethiopic' | 'gregory' | 'hebrew' | 'indian' | 'islamic' |
'islamic-umalqura' | 'islamic-tbla' | 'islamic-civil' | 'islamic-rgsa' | 'iso8601' | 'japanese' | 'persian' | 'roc' | 'islamicc',
 dayPeriod: 'narrow' | 'short' | 'long',
 numberingSystem: 'arab' | 'arabext' | 'bali' | 'beng' | 'deva' | 'fullwide' | ' gujr' | 'guru' | 'hanidec' | 'khmr' | ' knda' | 'laoo' | 'latn'
| 'limb' | 'mlym' | 'mong' | 'mymr' | 'orya' | 'tamldec' | 'telu' | 'thai' | 'tibt',
 localeMatcher: 'lookup' | 'best fit',
 year: "numeric" | "2-digit",
 month: "numeric" | "2-digit" | "long" | "short" | "narrow",
 day: "numeric" | "2-digit",
 hour: "numeric" | "2-digit",
 minute: "numeric" | "2-digit",
 second: "numeric" | "2-digit",
 era: "long" | "short" | "narrow",
 weekday: "long" | "short" | "narrow",
 hourCycle: 'h11'|'h12'|'h23'|'h24',
 hour12: boolean,
 timeZone: string,
 formatMatcher: 'basic' |'best fit',
timeZoneName: 'long' | 'short' |'shortOffset'|'longOffset'|'shortGeneric'| 'longGeneric'
}

Sprache / Locale vom Browser

Oftmals macht es Sinn die Sprache, bzw. das Locale vom Browser zu bekommen. Deshalb können wir einfach auf ein Property zugreifen (navigator.language)

Zahlen internationalisieren

Um Zahlen zu internationalisieren nutzen wir die Intl-API von JavaScript. Bei dieser API gibt es die statische Method NumberFormat(), mit welcher wir arbeiten können:

const num = 3884764.23;

Wie wir sehen, sind die Trennzeichen ganz anders, sowie die "Kommas" für die Dezimalstellen der Zahl.

Weiter können wir Optionen mitgeben, welche uns die Formatierung noch weiter vereinfacht:

const options = {
  style: 'unit',
  unit: 'mile-per-hour'
};

console.log(new

 

const currency = 12321.23;

options = {
  style: 'currency',
  currency: 'USD'
};

Der Datentyp Options bietet uns folgende Möglichkeiten:

type Options = {
  compactDisplay?: "short" | "long"; // Only used when notation is "compact"
  currencyDisplay?: "symbol" | "narrowSymbol" | "code" | "name";
  currencySign?: "standard" | "accounting";
  localeMatcher?: "lookup" | "best fit";
  notation?: "standard" | "scientific" | "engineering" | "compact";
  numberingSystem?: 'arab' | 'arabext' | 'bali' | 'beng' | 'deva' | 'fullwide' | 'gujr' | 'guru' | 'hanidec' | 'khmr' | 'knda' | 'laoo' | 'latn' | 'limb' | 'mlym' | 'mong' | 'mymr' | 'orya' | 'tamldec' | 'telu' | 'thai' | 'tibt';
  signDisplay?: "auto" | "always" | "exceptZero" | "negative" | "never" ;
  style?: "decimal" | "currency" | "percent" | "unit";
  unit?: string;
  unitDisplay?: "long" | "short" | "narrow";
  useGrouping?: "always" | "auto" | boolean | "min2";
  roundingMode?: "ceil" | "floor" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | halfEven";
  roundingPriority?: "auto" | "morePrecision" | "lessPrecision";
  roundingIncrement?: 1 | 2 | 5 | 10 | 20 | 25 | 50 | 100 | 200 | 250 | 500 | 1000 | 2000 | 2500 | 5000;
  trailingZeroDisplay?: "auto" | "stripIfInteger";
  minimumIntegerDigits?: number;
  minimumFractionDigits?: number;
  > maximumFractionDigits?: number;
  minimumSignificantDigits?: number;
  maximumSignificantDigits?: number;
}