Skip to main content

​
Daten internationalisieren

Wir können Datumsobjekte internationalisieren, indem wir die eingebaute Intl-API von JavaScript nutzen: 
const now = new Date();
console.log(new Intl.DateTimeFormat('en-US').format(now));
console.log(new Intl.DateTimeFormat('en-GB').format(now));
console.log(new Intl.DateTimeFormat('de-DE').format(now));
console.log(new Intl.DateTimeFormat('ar-SY').format(now));
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'
};

console.log(new Intl.DateTimeFormat('en-US', options).format(now));
console.log(new Intl.DateTimeFormat('en-GB', options).format(now));
console.log(new Intl.DateTimeFormat('de-DE', options).format(now));
console.log(new Intl.DateTimeFormat('ar-SY', options).format(now);
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;

console.log(new Intl.NumberFormat('en-US').format(num));
console.log(new Intl.NumberFormat('de-DE').format(num));
console.log(new Intl.NumberFormat('de-CH').format(num));
console.log(new Intl.NumberFormat('ar-SY').format(num));
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 Intl.NumberFormat('en-US', options).format(velocity));
console.log(new Intl.NumberFormat('de-DE', options).format(velocity));
console.log(new Intl.NumberFormat('ar-SY', options).format(velocity)); 

const currency = 12321.23;

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

console.log(new Intl.NumberFormat('en-US', options).format(currency));
console.log(new Intl.NumberFormat('de-DE', options).format(currency));
console.log(new Intl.NumberFormat('ar-SY', options).format(currency));
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;
}