M

MLOG

العربية

أطلق العنان للوصول العالمي مع JavaScript Intl API. تعلم أفضل ممارسات التدويل لتنسيق التواريخ والأرقام والعملات والمزيد، مما يضمن تجربة مستخدم سلسة في جميع أنحاء العالم.

JavaScript Intl API: أفضل الممارسات للتدويل لجمهور عالمي

في عالم اليوم المترابط، يعد إنشاء تطبيقات ويب تلبي احتياجات جمهور عالمي أمرًا بالغ الأهمية. توفر JavaScript Intl API أدوات قوية للتدويل (i18n)، مما يتيح لك تنسيق التواريخ والأرقام والعملات والمزيد وفقًا لاتفاقيات اللغات المختلفة. تستكشف هذه المقالة أفضل الممارسات للاستفادة من Intl API لبناء تطبيقات عالمية حقًا.

فهم التدويل (i18n) والتوطين (l10n)

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

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

المكونات الرئيسية لـ Intl API

تتكون Intl API من عدة كائنات رئيسية، كل منها مسؤول عن معالجة جوانب محددة من التدويل:

أفضل الممارسات لاستخدام Intl API

للاستفادة من Intl API بفعالية وضمان تجربة مستخدم إيجابية لجمهورك العالمي، ضع في اعتبارك أفضل الممارسات التالية:

1. تحديد الموقع الصحيح

أساس التدويل هو تحديد الموقع الصحيح. يحدد الموقع اللغة والمنطقة وأي متغيرات محددة لاستخدامها في التنسيق. يمكنك الحصول على الموقع المفضل للمستخدم من خاصية navigator.language أو رأس HTTP Accept-Language.

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

مثال:

const locale = navigator.language || 'en-US';
const numberFormat = new Intl.NumberFormat(locale);

إذا لم يكن الموقع المفضل للمستخدم متاحًا، يمكنك توفير موقع احتياطي. على سبيل المثال، يمكنك استخدام 'en-US' كقيمة افتراضية إذا أبلغ متصفح المستخدم عن موقع غير مدعوم.

2. الاستفادة من Intl.DateTimeFormat لتنسيق التاريخ والوقت

يعد تنسيق التواريخ والأوقات بشكل صحيح أمرًا بالغ الأهمية لتوفير تجربة محلية. يسمح كائن Intl.DateTimeFormat لك بتنسيق التواريخ والأوقات وفقًا لاتفاقيات موقع جغرافي محدد.

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

مثال:

const locale = 'de-DE'; // German (Germany)
const date = new Date();
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZone: 'Europe/Berlin'
};

const dateTimeFormat = new Intl.DateTimeFormat(locale, options);
const formattedDate = dateTimeFormat.format(date); // Output: z.B. "22. Mai 2024, 14:30"
console.log(formattedDate);

يقوم هذا المثال بتنسيق التاريخ والوقت الحاليين وفقًا للموقع الجغرافي الألماني (ألمانيا)، بما في ذلك السنة والشهر واليوم والساعة والدقيقة. كما أنه يحدد المنطقة الزمنية 'Europe/Berlin'.

تذكر مراعاة تنسيقات التاريخ والوقت المختلفة المستخدمة في جميع أنحاء العالم. على سبيل المثال، تستخدم الولايات المتحدة MM/DD/YYYY، بينما تستخدم العديد من البلدان الأخرى DD/MM/YYYY.

3. استخدام Intl.NumberFormat لتنسيق الأرقام والعملات والنسب المئوية

يوفر كائن Intl.NumberFormat طريقة مرنة لتنسيق الأرقام والعملات والنسب المئوية وفقًا لاتفاقيات خاصة بالموقع. يمكنك تخصيص التنسيق عن طريق تحديد خيارات مثل العملة، والنمط (عشري، عملة، أو نسبة مئوية)، والحد الأدنى والأقصى لأرقام الكسور، والمزيد.

مثال (تنسيق العملة):

const locale = 'ja-JP'; // Japanese (Japan)
const amount = 12345.67;
const options = {
  style: 'currency',
  currency: 'JPY'
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedAmount = numberFormat.format(amount); // Output: z.B. "￥12,346"
console.log(formattedAmount);

يقوم هذا المثال بتنسيق الرقم 12345.67 بالين الياباني (JPY). لاحظ كيف يتم تعديل رمز العملة (￥) ومحدد التجميع (،) تلقائيًا وفقًا للموقع الياباني.

مثال (تنسيق النسبة المئوية):

const locale = 'ar-EG'; // Arabic (Egypt)
const percentage = 0.75;
const options = {
  style: 'percent',
  minimumFractionDigits: 2
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedPercentage = numberFormat.format(percentage); // Output: z.B. "٧٥٫٠٠٪"
console.log(formattedPercentage);

يقوم هذا المثال بتنسيق الرقم 0.75 كنسبة مئوية باللغة العربية (مصر). يتضمن الإخراج علامة النسبة المئوية العربية (٪) ومنزلتين عشريتين.

اعتبارات هامة لتنسيق العملة:

4. التعامل مع الجمع بشكل صحيح باستخدام Intl.PluralRules

تختلف قواعد الجمع بشكل كبير عبر اللغات. على سبيل المثال، لدى اللغة الإنجليزية قواعد بسيطة مع أشكال مفرد وجمع، بينما تمتلك لغات أخرى قواعد أكثر تعقيدًا بناءً على قيمة الرقم. يساعد كائن Intl.PluralRules لك في تحديد شكل الجمع الصحيح لرقم وموقع جغرافي معين.

مثال:

const locale = 'ru-RU'; // Russian (Russia)
const pluralRules = new Intl.PluralRules(locale);

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // tovar (singular)
    case 'few': return 'товара'; // tovara (few)
    case 'many': return 'товаров'; // tovarov (many)
    default: return 'товаров'; // Default to many
  }
}

const count = 5;
const pluralForm = getPluralForm(count);
console.log(`${count} ${pluralForm}`); // Output: "5 товаров"

يوضح هذا المثال كيفية استخدام Intl.PluralRules للحصول على شكل الجمع الصحيح لكلمة "товар" (عنصر) باللغة الروسية. لدى اللغة الروسية أشكال جمع مختلفة اعتمادًا على ما إذا كان الرقم ينتهي بـ 1، أو 2-4، أو 5-9.

5. تنسيق القوائم باستخدام Intl.ListFormat

عند تقديم قوائم بالعناصر، يمكن أن يختلف التنسيق عبر اللغات. يسمح لك كائن Intl.ListFormat بتنسيق القوائم وفقًا لاتفاقيات خاصة بالموقع، بما في ذلك استخدام روابط مختلفة (مثل "and"، "or") ومحددات القائمة (مثل الفواصل، الفواصل المنقوطة).

مثال:

const locale = 'es-ES'; // Spanish (Spain)
const list = ['manzanas', 'naranjas', 'plátanos'];
const listFormat = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' });

const formattedList = listFormat.format(list); // Output: "manzanas, naranjas y plátanos"
console.log(formattedList);

يقوم هذا المثال بتنسيق قائمة فواكه باللغة الإسبانية (إسبانيا)، باستخدام الرابط "y" (و) لربط العنصرين الأخيرين.

6. تنسيق الأوقات النسبية باستخدام Intl.RelativeTimeFormat

يوفر عرض الأوقات النسبية (مثل "أمس"، "بعد ساعتين") طريقة سهلة الاستخدام لعرض معلومات الوقت. يسمح لك كائن Intl.RelativeTimeFormat بتنسيق الأوقات النسبية وفقًا لاتفاقيات خاصة بالموقع.

مثال:

const locale = 'fr-CA'; // French (Canada)
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });

console.log(rtf.format(-1, 'day')); // Output: "hier"
console.log(rtf.format(2, 'day')); // Output: "dans 2 jours"

يقوم هذا المثال بتنسيق الأوقات النسبية باللغة الفرنسية (كندا). يُظهر الإخراج "hier" (أمس) و "dans 2 jours" (بعد يومين).

يتحكم الخيار `numeric` في كيفية عرض الأرقام. يعرض `'auto'` الكلمات النسبية عند توفرها (مثل "أمس")، والأرقام بخلاف ذلك. يعرض `'always'` دائمًا الأرقام.

7. مقارنة السلاسل النصية باستخدام Intl.Collator

مقارنة السلاسل النصية حساسة للموقع. تختلف طريقة فرز السلاسل النصية اعتمادًا على اللغة. على سبيل المثال، في الألمانية، يتم فرز الحرف "ä" عادةً مثل "a"، بينما في السويدية، يتم فرزه بعد "z". يسمح لك كائن Intl.Collator بمقارنة السلاسل النصية وفقًا لقواعد موقع جغرافي محدد.

مثال:

const locale = 'de-DE';
const collator = new Intl.Collator(locale);

const strings = ['äpfel', 'birnen', 'bananen', 'aprikosen'];
strings.sort(collator.compare);

console.log(strings); // Output: ["äpfel", "aprikosen", "bananen", "birnen"]

يقوم هذا المثال بفرز مصفوفة من الكلمات الألمانية باستخدام Intl.Collator. لاحظ أن "äpfel" يتم فرزها قبل "aprikosen"، على الرغم من أن "ä" تأتي لاحقًا في الأبجدية.

8. التعامل مع الحالات الهامشية والبيانات المفقودة

لا يتم دعم جميع اللغات في كل متصفح أو بيئة. من الضروري التعامل مع الحالات الهامشية حيث لا يكون الموقع متاحًا أو عندما تكون البيانات مفقودة. ضع في اعتبارك الاستراتيجيات التالية:

9. الاختبار الشامل مع لغات مختلفة

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

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

10. النظر في آثار الأداء

بينما تعد Intl API فعالة بشكل عام، فإن إنشاء كائنات Intl يمكن أن يكون مكلفًا نسبيًا. لتحسين الأداء، ضع في اعتبارك ما يلي:

ما وراء Intl API: اعتبارات إضافية للتدويل

بينما توفر Intl API أدوات قوية لتنسيق البيانات، فإن التدويل يتضمن أكثر من مجرد التنسيق. ضع في اعتبارك الجوانب الإضافية التالية:

الخاتمة

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