Parlons le même langage : internationalisation des applications JavaScript

Votre application parlera toutes les langues du monde

Imaginez : vous avez créé un super service, vous l'avez mis en ligne, et des utilisateurs d'Allemagne, du Japon ou du Brésil ferment le site au bout de 10 secondes. Pourquoi ? Parce qu'ils ne comprennent pas un mot de ce qui est écrit sur les boutons. À l'ère de la mondialisation, l'internationalisation JavaScript n'est pas un luxe, mais une nécessité fondamentale. Si vous voulez que votre produit conquière le monde (ou au moins quelques pays voisins), vous ne pouvez pas vous passer de i18n JavaScript.

Dans cet article, nous allons voir comment transformer une application ordinaire en un polyglotte multilingue. Vous découvrirez quelles bibliothèques i18n existent, comment organiser correctement les fichiers de traduction, et nous écrirons du code réel pour l'internationalisation. C'est parti !

Qu'est-ce que l'internationalisation et pourquoi en a-t-on besoin ?

Le terme technique i18n (où 18 est le nombre de lettres entre le premier "i" et le dernier "n") désigne la préparation architecturale d'une application à fonctionner avec différentes langues et cultures. Ce n'est pas seulement une traduction de mots — c'est une adaptation des formats de date, des nombres, des devises, des directions d'écriture (de gauche à droite ou de droite à gauche) et même des schémas de couleurs.

Imaginez la date "03/04/2025". Pour un habitant des États-Unis, c'est le 3 avril, et pour un Européen, le 4 mars. Et si votre application affiche un prix en dollars à un utilisateur japonais ? Catastrophe. L'internationalisation des applications web résout tous ces problèmes au niveau du code.

Pourquoi commencer dès maintenant ?

\n
• Augmentation de l'audience — 75% des utilisateurs préfèrent acheter dans leur langue maternelle
\n
• Boost SEO — les moteurs de recherche classent les sites multilingues plus haut dans les résultats locaux
\n
• Utilisabilité — réduction du taux de rebond et augmentation du temps passé sur le site
\n

Approches principales pour i18n en JavaScript

Il existe deux approches globales pour la localisation JavaScript : une solution maison et l'utilisation de bibliothèques prêtes à l'emploi. Nous allons examiner les deux, mais je recommande vivement la deuxième option — moins de bugs, plus de fonctionnalités.

Internationalisation maison : exemple de base

Si votre application est une simple page d'atterrissage de 10 lignes, vous pouvez vous passer de bibliothèques. Créons un objet avec les traductions :

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

Maintenant, la fonction pour changer de langue :

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// Utilisation en HTML :\n// <h1 data-i18n="greeting">Привет, мир!</h1>\n// <button data-i18n="button">Нажми меня</button>

Cela fonctionne, mais imaginez que vous ayez 500 lignes de texte, plus la gestion de la pluralisation (1 pomme, 2 pommes, 5 pommes) et de l'interpolation (Bonjour, {username}). C'est là que les bibliothèques d'internationalisation viennent à la rescousse.

Top des bibliothèques i18n pour JavaScript

Le marché des bibliothèques i18n est diversifié. Voici trois leaders qui méritent votre attention :

1. i18next — le roi des bibliothèques

i18next JavaScript est la norme de facto. Fonctionne avec React, Vue, Angular et le JS pur. Prend en charge la pluralisation, l'interpolation, les traductions imbriquées et le chargement des ressources à la demande.

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