Dokumentation von Go-Projekten: Fortgeschrittene Techniken und Werkzeuge

Ihre Anwendung wird jede Sprache der Welt sprechen

Stellen Sie sich vor: Sie haben einen großartigen Dienst erstellt, ihn online veröffentlicht, und Benutzer aus Deutschland, Japan oder Brasilien schließen die Seite nach 10 Sekunden. Warum? Weil sie kein einziges Wort auf den Schaltflächen verstehen. Im Zeitalter der Globalisierung ist JavaScript-Internationalisierung kein Luxus, sondern eine grundlegende Notwendigkeit. Wenn Sie möchten, dass Ihr Produkt die Welt erobert (oder zumindest ein paar Nachbarländer), kommen Sie ohne i18n JavaScript nicht aus.

In diesem Artikel werden wir aufschlüsseln, wie man eine gewöhnliche Anwendung in einen mehrsprachigen Polyglotten verwandelt. Sie erfahren, welche i18n-Bibliotheken es gibt, wie man Übersetzungsdateien richtig organisiert, und wir werden echten Code für die Internationalisierung schreiben. Los geht's!

Was ist Internationalisierung und warum wird sie benötigt?

Der technische Begriff i18n (wobei 18 die Anzahl der Buchstaben zwischen dem ersten "i" und dem letzten "n" ist) bezeichnet die architektonische Vorbereitung einer Anwendung für die Arbeit mit verschiedenen Sprachen und Kulturen. Dabei geht es nicht nur um die Übersetzung von Wörtern – es geht um die Anpassung von Datumsformaten, Zahlen, Währungen, Textrichtungen (von links nach rechts oder von rechts nach links) und sogar Farbschemata.

Stellen Sie sich das Datum "03/04/2025" vor. Für einen US-Bürger ist das der 3. April, für einen Europäer der 4. März. Und wenn Ihre Anwendung einem Benutzer aus Japan einen Preis in Dollar anzeigt? Eine Katastrophe. Webanwendungs-Internationalisierung löst all diese Probleme auf Codeebene.

Warum gleich jetzt damit beginnen?

\n
• Zuschauerwachstum — 75% der Benutzer bevorzugen es, in ihrer Muttersprache zu kaufen
\n
• SEO-Boost — Suchmaschinen ranken mehrsprachige Seiten in lokalen Ergebnissen höher
\n
• Benutzerfreundlichkeit — reduzierte Absprungrate und erhöhte Verweildauer auf der Seite
\n

Hauptansätze für i18n in JavaScript

Es gibt zwei globale Ansätze für die JavaScript-Lokalisierung: eine benutzerdefinierte Lösung und die Verwendung vorgefertigter Bibliotheken. Wir werden uns beide ansehen, aber ich empfehle stark die zweite Option – weniger Fehler, mehr Funktionen.

Benutzerdefinierte Internationalisierung: Einfaches Beispiel

Wenn Ihre Anwendung eine einfache Landingpage mit 10 Zeilen ist, können Sie auf Bibliotheken verzichten. Erstellen wir ein Übersetzungsobjekt:

const translations = {\n    de: {\n        greeting: "Hallo, Welt!",\n        button: "Klick mich"\n    },\n    en: {\n        greeting: "Hello, World!",\n        button: "Click me"\n    },\n    ru: {\n        greeting: "Привет, мир!",\n        button: "Нажми меня"\n    }\n};

Jetzt eine Funktion zum Ändern der Sprache:

function translate(lang) {\n    document.querySelectorAll('[data-i18n]').forEach(el => {\n        const key = el.dataset.i18n;\n        if (translations[lang] && translations[lang][key]) {\n            el.textContent = translations[lang][key];\n        }\n    });\n}\n\n// Verwendung in HTML:\n// <h1 data-i18n="greeting">Hallo, Welt!</h1>\n// <button data-i18n="button">Klick mich</button>

Das funktioniert, aber stellen Sie sich vor, Sie haben 500 Textzeilen, plus Sie müssen Pluralisierung (1 Apfel, 2 Äpfel, 5 Äpfel) und Interpolation (Hallo, {Benutzername}) handhaben. Hier kommen Internationalisierungsbibliotheken zur Rettung.

Top i18n-Bibliotheken für JavaScript

Der Markt für i18n-Bibliotheken ist vielfältig. Hier sind drei Spitzenreiter, die Ihre Aufmerksamkeit verdienen:

1. i18next – der König der Bibliotheken

i18next JavaScript ist der De-facto-Standard. Es funktioniert mit React, Vue, Angular und Vanilla JS. Es unterstützt Pluralisierung, Interpolation, verschachtelte Übersetzungen und Lazy Loading von Ressourcen.

import i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\n\ni18n.use(initReactI18next).init({\n    resources: {\n        en: {\n            translation: {\n                welcome: "Welcome b