Internationalisierung

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;
}

HTML

CSS

JavaScript

TypeScript

React

Angular

Daten internationalisieren

Sprache / Locale vom Browser

Zahlen internationalisieren

​Daten internationalisieren

​Sprache / Locale vom Browser﻿

​Zahlen internationalisieren

Daten internationalisieren

Sprache / Locale vom Browser

Zahlen internationalisieren