كيفية اكتشاف اللغة المفضلة للمستخدم من المتصفح

مقدمة

عندما يزور شخص ما تطبيق الويب الخاص بك، يعرف متصفحه بالفعل اللغات التي يفضلها. تأتي هذه المعلومات من نظام التشغيل وإعدادات المتصفح الخاصة به. من خلال قراءة تفضيلات اللغة هذه، يمكنك عرض المحتوى باللغة الصحيحة دون مطالبة المستخدم باختيار لغة يدوياً.

هذا هو أساس التدويل من جانب العميل. قبل أن تتمكن من تنسيق التواريخ أو الأرقام أو عرض النص المترجم، تحتاج إلى معرفة اللغة التي يريدها المستخدم.

كيف تخزن المتصفحات تفضيلات اللغة

يحتفظ كل متصفح حديث بقائمة من اللغات المفضلة. يقوم المستخدمون بتكوين هذه التفضيلات في إعدادات المتصفح أو نظام التشغيل الخاص بهم. على سبيل المثال، قد يقوم شخص ما بتعيين تفضيلاته إلى الإسبانية كخيار أول، مع الإنجليزية كخيار احتياطي.

يستخدم المتصفح هذه التفضيلات لطلب صفحات الويب باللغة المناسبة. عندما يتم تشغيل كود JavaScript الخاص بك، يمكنه قراءة نفس التفضيلات لاتخاذ قرارات حول اللغة التي سيتم عرضها.

قراءة تفضيلات اللغة باستخدام JavaScript

تُرجع الخاصية navigator.languages مصفوفة من السلاسل النصية تمثل اللغات المفضلة للمستخدم. هذه هي الطريقة الأساسية لاكتشاف تفضيلات اللغة في JavaScript.

const languages = navigator.languages;
console.log(languages);
// Output: ["es-MX", "es", "en-US", "en"]

يتم ترتيب اللغات حسب الأفضلية، مع اللغة الأكثر تفضيلاً أولاً. في هذا المثال، يفضل المستخدم الإسبانية المكسيكية، تليها الإسبانية العامة، ثم الإنجليزية الأمريكية، ثم الإنجليزية العامة.

فهم ما يُرجعه المتصفح

يتم وصف كل لغة باستخدام علامة لغة وفقاً لمعيار BCP 47. يمكن أن تكون هذه العلامات بسيطة مثل en للإنجليزية، أو أكثر تحديداً مثل en-US للإنجليزية الأمريكية أو zh-CN للصينية كما تُستخدم في الصين.

سيتم تغطية الشكل والمعنى الدقيقين لهذه العلامات في الدرس التالي. في الوقت الحالي، افهم أن كل سلسلة نصية في المصفوفة تمثل لغة يمكن للمستخدم قراءتها، مرتبة حسب الأفضلية.

الحصول على اللغة المفضلة الواحدة الأكثر تفضيلاً

الخاصية navigator.language هي العنصر الأول من مصفوفة navigator.languages. إذا كنت بحاجة فقط إلى تفضيل اللغة الأعلى للمستخدم، يمكنك استخدام هذه الخاصية مباشرة.

const topLanguage = navigator.language;
console.log(topLanguage);
// Output: "es-MX"

كلا النهجين صحيحان. استخدم navigator.language عندما تحتاج إلى لغة واحدة فقط، واستخدم navigator.languages عندما تريد النظر في خيارات احتياطية متعددة.

لماذا يوفر المتصفح لغات متعددة

غالباً ما يتحدث المستخدمون لغات متعددة بمستويات متفاوتة من الطلاقة. يسمح لهم المتصفح بتحديد عدة لغات حسب ترتيب الأفضلية. هذا يمنح تطبيقك خيارات متعددة للاختيار من بينها.

ضع في اعتبارك مستخدماً يتحدث الفرنسية والإنجليزية. إذا كان تطبيقك يدعم الفرنسية، اعرض المحتوى بالفرنسية. إذا لم يكن كذلك، ارجع إلى الإنجليزية. إذا كان تطبيقك يدعم تفضيل لغة واحدة فقط، فلن يكون لديك خيار احتياطي.

const languages = navigator.languages;
// ["fr-CA", "fr", "en-US", "en"]

const supportedLanguages = ["en", "es", "de"];

// Find the first language the app supports
const selectedLanguage = languages.find(lang => 
  supportedLanguages.includes(lang)
);

console.log(selectedLanguage);
// Output: "en"

يجد هذا الكود أول تطابق بين تفضيلات المستخدم واللغات التي يدعمها تطبيقك.

استخدام تفضيلات اللغة لتنسيق المحتوى

بمجرد معرفة اللغة المفضلة للمستخدم، يمكنك استخدامها مع Intl API لتنسيق التواريخ والأرقام والمحتويات الأخرى وفقاً لاصطلاحات تلك اللغة.

const userLanguage = navigator.language;

const date = new Date("2025-03-15");
const formattedDate = new Intl.DateTimeFormat(userLanguage).format(date);

console.log(formattedDate);
// Output varies by language
// For "en-US": "3/15/2025"
// For "en-GB": "15/03/2025"
// For "ja-JP": "2025/3/15"

يمكن تمرير مصفوفة معرفات اللغة من navigator.languages مباشرة إلى منشئات Intl لتنفيذ اختيار احتياطي قائم على الأفضلية. ستستخدم Intl API تلقائياً أول لغة تدعمها من القائمة.

const formattedDate = new Intl.DateTimeFormat(navigator.languages).format(date);

يتيح هذا النهج لواجهة برمجة التطبيقات Intl التعامل مع منطق الاحتياطي نيابةً عنك.

عند تغيير تفضيلات اللغة

عندما تتغير اللغات المفضلة للمستخدم، يتم تشغيل حدث languagechange على كائن Window. يمكنك الاستماع لهذا الحدث لتحديث لغة تطبيقك في الوقت الفعلي.

window.addEventListener("languagechange", () => {
  const newLanguage = navigator.language;
  console.log("Language changed to:", newLanguage);
  // Update your app's displayed language here
});

هذا الحدث غير شائع في الممارسة العملية. معظم المستخدمين لا يغيرون تفضيلات لغة المتصفح أثناء التصفح. ومع ذلك، فإن الاستماع له يوفر تجربة أفضل عندما يحدث ذلك.