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

مقدمة

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

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

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

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

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

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

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

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 لتنسيق التواريخ والأرقام والمحتويات الأخرى وفقًا لاتفاقيات تلك اللغة.

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 تلقائيًا أول لغة تدعمها من القائمة.

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

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