Was ist i18n (Internationalisierung)? Definition & Beispiele

Schnelle Antwort

i18n ist eine Abkürzung für "internationalization" (i + 18 Buchstaben + n). Es bezieht sich auf das Designen und Entwickeln von Software so dass sie für Benutzer in verschiedenen Sprachen und Regionen angepasst werden kann ohne Engineering-Änderungen zu erfordern.

Warum "i18n"?

Der Begriff "i18n" ist ein Numeronym:

i = erster Buchstabe
18 = Anzahl der Buchstaben zwischen 'i' und 'n'
n = letzter Buchstabe

Diese Kurzform existiert weil "internationalization" lang und häufig in technischen Kontexten verwendet wird.

Definition

Internationalisierung (i18n): Der Prozess Software-Architektur zu designen die mehrere Sprachen, Regionen und kulturelle Konventionen unterstützt. Dies beinhaltet:

Benutzer-sichtbaren Text aus Code extrahieren
Verschiedene Datums-, Zeit- und Zahlenformate unterstützen
Rechts-nach-links (RTL) Sprachen handhaben
Verschiedene Pluralisierungsregeln verwalten
Text-Expansion in Übersetzungen ermöglichen

i18n vs l10n: Was ist der Unterschied?

Begriff	Steht für	Bedeutung
i18n	Internationalisierung	Vorbereiten Ihrer App für mehrere Sprachen
l10n	Lokalisierung	Tatsächliches Übersetzen von Inhalten für spezifische Locales

Analogie:

i18n = Ein Auto mit austauschbarem Lenkrad-Modul bauen
l10n = Das Lenkrad auf der linken (US) oder rechten (UK) Seite installieren

Sie machen i18n einmal. Sie machen l10n für jede Sprache.

Warum ist i18n wichtig?

Business-Impact

Statistik	Quelle
75% der Benutzer bevorzugen Inhalte in ihrer Muttersprache	CSA Research
40% kaufen nicht auf Sites in anderen Sprachen	CSA Research
Lokalisierte Apps sehen 128% mehr Downloads	Distomo
25-40% Umsatzsteigerung beim Hinzufügen wichtiger Sprachen	Verschiedene

Technische Vorteile

Skalierbarkeit: Neue Sprachen ohne Code-Änderungen hinzufügen
Wartbarkeit: Übersetzungen vom Code getrennt
Qualität: Konsistentes Handling von locale-spezifischer Formatierung

Wie i18n funktioniert

Schritt 1: Strings extrahieren

Hardcoded Text in separate Dateien verschieben:

Vorher (hardcoded):

JSX
<h1>Willkommen in unserer App</h1>
<button>Registrieren</button>

Nachher (internationalisiert):

JSX
<h1>{t('welcome.title')}</h1>
<button>{t('auth.signup')}</button>

Übersetzungsdatei (de.json):

JSON
1{
2  "welcome": {
3    "title": "Willkommen in unserer App"
4  },
5  "auth": {
6    "signup": "Registrieren"
7  }
8}

Schritt 2: Variablen handhaben

Interpolation statt Konkatenation verwenden:

Schlecht:

JavaScript
"Hallo, " + name + "!"

Gut:

JavaScript
t('greeting', { name: name })
// Übersetzung: "Hallo, {name}!"

Schritt 3: Pluralisierung unterstützen

Verschiedene Sprachen haben verschiedene Pluralregeln:

Sprache	Pluralformen
Englisch	2 (one, other)
Französisch	2+ (one, other, many)
Russisch	3 (one, few, many)
Arabisch	6 (zero, one, two, few, many, other)

Schritt 4: Daten, Zahlen, Währungen formatieren

Locale-aware Formatierung verwenden:

JavaScript
1// Datumsformatierung
2new Intl.DateTimeFormat('de-DE').format(date) // "31.12.2026"
3
4// Währungsformatierung
5new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(99)
6// "99,00 €"

Schritt 5: RTL-Sprachen unterstützen

Arabisch, Hebräisch und Persisch lesen von rechts nach links:

HTML
<html dir="rtl" lang="ar">

CSS
/* Logische Eigenschaften verwenden */
margin-inline-start: 1rem; /* Statt margin-left */

i18n nach Framework

React

JSX
1// Mit react-i18next
2import { useTranslation } from 'react-i18next';
3
4function App() {
5  const { t } = useTranslation();
6  return <h1>{t('welcome')}</h1>;
7}

Next.js

JSX
1// Mit next-intl
2import { useTranslations } from 'next-intl';
3
4function Page() {
5  const t = useTranslations('home');
6  return <h1>{t('title')}</h1>;
7}

Vue

VUE
1<!-- Mit vue-i18n -->
2<template>
3  <h1>{{ $t('welcome') }}</h1>
4</template>

Häufige i18n-Fehler

1. String-Konkatenation

Falsch:

JavaScript
"Hallo " + name + ", Sie haben " + count + " Artikel"

Richtig:

JavaScript
t('message', { name, count })

2. Hardcoded Formatierung

Falsch:

JavaScript
`€${price.toFixed(2)}`

Richtig:

JavaScript
new Intl.NumberFormat(locale, { style: 'currency', currency }).format(price)

3. Fixed-Width Layouts

Deutscher Text ist ~30% länger als Englisch. Expansion berücksichtigen.

Zusammenfassung

i18n (Internationalisierung) ist das Fundament für Software die über Sprachen und Regionen hinweg funktioniert. Kernpunkte:

i18n = Code für mehrere Sprachen vorbereiten
l10n = Inhalte tatsächlich übersetzen
Strings extrahieren, Interpolation verwenden, Plurale unterstützen
Locale-aware Formatierung für Daten/Zahlen
RTL-Sprachen handhaben
Die richtige Bibliothek für Ihr Framework wählen

Bereit Ihre App zu internationalisieren? IntlPull hilft Ihnen Übersetzungen mit KI-gestützter Automatisierung und OTA-Updates für mobile Apps zu verwalten.

Was ist i18n? Internationalisierung einfach erklärt