نتحدث بلغة واحدة: تدويل تطبيقات JavaScript

تطبيقك سيتحدث بأي لغة في العالم

تخيل: لقد أنشأت خدمة رائعة، ونشرتها على الإنترنت، والمستخدمون من ألمانيا أو اليابان أو البرازيل يغلقون الموقع بعد 10 ثوانٍ. لماذا؟ لأنهم لا يفهمون كلمة واحدة مما هو مكتوب على الأزرار. في عصر العولمة، تدويل JavaScript ليس ترفًا، بل ضرورة أساسية. إذا كنت تريد أن يغزو منتجك العالم (أو على الأقل بضع دول مجاورة)، فلا يمكنك الاستغناء عن i18n JavaScript.

في هذه المقالة، سنشرح كيفية تحويل تطبيق عادي إلى متعدد اللغات. ستتعرف على مكتبات i18n الموجودة، وكيفية تنظيم ملفات الترجمة بشكل صحيح، وسنكتب كودًا حقيقيًا للتدويل. هيا بنا!

ما هو التدويل ولماذا هو مطلوب؟

المصطلح التقني i18n (حيث 18 هو عدد الأحرف بين الحرف الأول "i" والحرف الأخير "n") يعني الإعداد المعماري للتطبيق للعمل مع لغات وثقافات مختلفة. هذا ليس مجرد ترجمة للكلمات - بل هو تكييف لتنسيقات التواريخ والأرقام والعملات واتجاهات النص (من اليسار إلى اليمين أو من اليمين إلى اليسار) وحتى أنظمة الألوان.

تخيل التاريخ "03/04/2025". بالنسبة لساكن الولايات المتحدة، هذا هو 3 أبريل، وبالنسبة للأوروبي، هذا هو 4 مارس. وإذا كان تطبيقك يعرض السعر بالدولار لمستخدم من اليابان؟ كارثة. تدويل تطبيقات الويب يحل كل هذه المشاكل على مستوى الكود.

لماذا يجب أن تبدأ الآن؟

\n
• نمو الجمهور - 75% من المستخدمين يفضلون الشراء بلغتهم الأم
\n
• تعزيز SEO - محركات البحث ترتب المواقع متعددة اللغات أعلى في النتائج المحلية
\n
• سهولة الاستخدام - تقليل معدل الارتداد وزيادة الوقت الذي يقضيه المستخدمون على الموقع
\n

الأساليب الرئيسية لـ i18n في JavaScript

يوجد نهجان عالميان لـ توطين JavaScript: حل مكتوب ذاتيًا واستخدام مكتبات جاهزة. سننظر في كليهما، لكنني أوصي بشدة بالخيار الثاني - أخطاء أقل، ميزات أكثر.

التدويل الذاتي: مثال أساسي

إذا كان تطبيقك عبارة عن صفحة هبوط بسيطة مكونة من 10 أسطر، يمكنك الاستغناء عن المكتبات. لننشئ كائنًا بالترجمات:

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

الآن دالة لتغيير اللغة:

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// الاستخدام في HTML:\n// <h1 data-i18n="greeting">Привет, мир!</h1>\n// <button data-i18n="button">Нажми меня</button>

هذا يعمل، لكن تخيل أن لديك 500 سطر من النص، بالإضافة إلى الحاجة إلى معالجة الجمع (تفاحة واحدة، تفاحتان، 5 تفاحات) والإقحام (مرحبًا، {username}). هنا تأتي مكتبات التدويل للإنقاذ.

أفضل مكتبات i18n لـ JavaScript

سوق مكتبات i18n متنوع. إليك ثلاثة قادة يستحقون اهتمامك:

1. i18next - ملك المكتبات

i18next JavaScript هو المعيار الفعلي. يعمل مع React و Vue و Angular و JS النقي. يدعم الجمع والإقحام والترجمات المتداخلة وتحميل الموارد عند الطلب.

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