> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baenninger.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Internationalisierung

## Daten internationalisieren

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

```javascript theme={null}
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](http://www.lingoes.net/en/translator/langcode.htm).

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

```javascript theme={null}
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); 
```

<Info>
  Der Datentyp `Options` hat folgende Möglichkeiten:

  ```javascript theme={null}
  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'
  }
  ```
</Info>

### 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:

```javascript theme={null}
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:

```javascript theme={null}
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));
```

<Info>
  Der Datentyp `Options` bietet uns folgende Möglichkeiten:

  ```javascript theme={null}
  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;
  }
  ```
</Info>