برمجة الجافا سكربت: كيفية استخدام تخصيص المحتوى بواسطة Intl API
كيفية استخدام Intl API في JavaScript
يمكنك الوصول إلى جمهور أوسع من خلال تخصيص المحتوى الخاص بك
لأي لغة أو منطقة محلية باستخدام Intl API.
يبسط Intl API تنسيق ومعالجة النصوص والأرقام والتواريخ والعملات الدولية.
يتيح لك التعامل مع تنسيقات البيانات المختلفة وفقًا للإعدادات المحلية.
تعمل واجهة برمجة التطبيقات هذه على حل التحدي المتمثل في تنسيق البيانات
لمختلف الثقافات واللغات. يسهل تنسيق الأرقام برمز العملة المناسب أو
التواريخ باستخدام تنسيق التاريخ المناسب لمنطقة معينة.
باستخدام Intl API ، يمكنك إنشاء تطبيقات ويب يمكن الوصول إليها
وسهلة الاستخدام للجماهير عبر المناطق والثقافات.
الحصول على لغة المستخدم
تحدد أدوات إنشاء JavaScript التي توفرها Intl API اللغة التي
ستستخدمها لتنسيق التاريخ والنص والرقم وما إلى ذلك ، باتباع نمط مألوف.
يأخذ كل مُنشئ لغة وكائن خيارات كوسائط . باستخدام هذه الوسيطات ،
يطابق المنشئ الإعدادات المحلية المطلوبة مقابل اللغات التي يدعمونها حاليًا.
للحصول على الإعدادات المحلية للمستخدم ، يمكنك استخدام الخاصية navigator.language .
تقوم هذه الخاصية بإرجاع سلسلة تمثل إصدار اللغة للمتصفح.
قيمة الخاصية navigator.language هي علامة لغة BCP 47 ، والتي تتكون
من رمز لغة ، واختيارياً ، رمز منطقة وعلامات فرعية أخرى. على سبيل المثال ،
تمثل "en-US" اللغة الإنجليزية كما يتم التحدث بها في الولايات المتحدة.
يمكنك أيضًا استخدام الخاصية navigator.languages للحصول على مجموعة
من اللغات المفضلة للمستخدم ، مرتبة حسب الأولوية. يمثل العنصر الأول في
المصفوفة تفضيل اللغة الأساسية للمستخدم.
بمجرد حصولك على لغة المستخدم ، يمكنك تخصيص عرض التطبيق الخاص بك
للتواريخ والأوقات والأرقام والعملات باستخدام Intl API .
يمكنك إنشاء وظيفة JavaScript بسيطة لمساعدتك في الحصول على لغة المستخدم.
إليك مقتطف الشفرة الذي يمكن أن يساعد:
const getUserLocale = () => {
if (navigator.languages && navigator.languages.length) {
return navigator.languages[0];
}
return navigator.language;
};
console.log(getUserLocale());
تعرض دالة getUserLocale هذه العنصر الأول من الخاصية
navigator.languages إذا كانت متوفرة. وإلا فإنه يعود إلى خاصية navigator.language
التي تمثل لغة المستخدم المفضلة في المتصفحات القديمة.
تنسيق التواريخ لمواقع مختلفة
لتنسيق التواريخ باستخدام Intl API ، يمكنك استخدام مُنشئ Intl.DateTimeFormat () .
يأخذ هذا المُنشئ وسيطتين: سلسلة محلية وكائن خيارات.
يمكن أن يحتوي كائن الخيارات على خصائص تتحكم في تنسيق التاريخ.
تتضمن بعض الخيارات الشائعة الاستخدام ما يلي:
**يوم الأسبوع :
يحدد هذا الخيار تنسيق يوم الأسبوع. يمكنك ضبطه على إما طويل (الجمعة) أو قصير (جمعة) أو ضيق (F).
**year :
يحدد هذا الخيار تنسيق السنة. يمكنك ضبطه على رقم (2023) أو رقمين (23).
**الشهر :
يحدد هذا الخيار تنسيق الشهر. يمكنك ضبطه إما على رقم (3) ، أو رقمين (03) ،
أو طويل (مارس) ، أو قصير (مارس) ، أو ضيق (M).
**اليوم :
يحدد هذا الخيار تنسيق اليوم. يمكنك ضبطه إما على رقم (2) أو رقمين (02).
فيما يلي مثال يوضح كيفية تنسيق التاريخ باستخدام مُنشئ Intl.DateTimeFormat () :
const date = Date.now()
const locale = getUserLocale();
const options = {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
};
const formatter = new Intl.DateTimeFormat(locale, options);
// weekday, month date, year (Friday, March 24, 2023)
console.log(formatter.format(date));
يقوم هذا الرمز بإعداد كائن منسق عن طريق تمرير الإعدادات المحلية
للمستخدم إلى Intl.DateTimeFormat () ، إلى جانب مجموعة من الخيارات.
ثم يستخدم المنسق لتحويل التاريخ الحالي إلى سلسلة. يحتوي كائن الخيارات
على الخصائص التي تتحكم في تنسيق التاريخ.
تنسيق أنواع مختلفة من الأرقام
يمكنك استخدام Intl API لتنسيق الأرقام باستخدام مُنشئ Intl.NumberFormat () .
مثل Intl.DateTimeFormat () ، يأخذ هذا المُنشئ سلسلة محلية وكائن خيارات كوسائط.
يحتوي كائن الخيارات على الخصائص التي تتحكم في تنسيق الرقم.
تختلف هذه الخصائص حسب النمط المحدد للرقم.
*تنسيق الكسور العشرية والنسب المئوية*
يمكنك تنسيق الأرقام ككسور عشرية ونسب مئوية باستخدام مُنشئ
Intl.NumberFormat () عن طريق تعيين خاصية النمط إلى قيمة
عشرية للأرقام العشرية والنسبة المئوية للنسب المئوية.
إليك مثال يوضح كيفية تنسيق رقم عشري:
const num = 123456;
const locale = getUserLocale(); // en-US
const options = {
style: "decimal",
minimumFractionDigits: 2,
maximumFractionDigits: 2,
useGrouping: true,
};
const formatter = new Intl.NumberFormat(locale, options);
console.log(formatter.format(num)); // 123,456.00
تنسيقات كتلة التعليمات البرمجية أعلاه 123،456 كرقم عشري مع فواصل التجميع ( ، ) ومنزلتين عشريتين.
فيما يلي مثال يوضح كيفية تنسيق النسبة المئوية:
const num = 123456;
const locale = getUserLocale();
const options = {
style: "percent",
useGrouping: true,
};
const formatter = new Intl.NumberFormat(locale, options);
console.log(formatter.format(num)); // 12,345,600%
تعبر كتلة التعليمات البرمجية أعلاه عن 123456 كنسبة مئوية مع فواصل التجميع.
*تنسيق العملات*
يمكنك تنسيق الأرقام كعملات عن طريق تعيين خاصية النمط إلى العملة .
يجب عليك تعيين خيارات أخرى بجانبه ، مثل:
العملة :
سلسلة تمثل رمز العملة ISO 4217 (مثل "USD" أو "EUR" أو "JPY")
لاستخدامها في التنسيق. إذا لم تقم بتوفير هذا الخيار ، فسيقوم المنسق باختيار
رمز العملة بناءً على الإعدادات المحلية للمستخدم.
CurrencyDisplay :
تحدد هذه الخاصية كيفية عرض المتصفح للعملة.
يمكن أن يكونرمزًا(75 دولارًا أمريكيًا) أو رمزًا (75 دولارًا أمريكيًا) أواسمًا(75 دولارًا أمريكيًا).
فيما يلي مثال يوضح كيف يمكنك تنسيق العملة:
const num = 123456;
const locale = getUserLocale(); // en-US
const options = {
style: "currency",
currency: "USD",
currencyDisplay: "code",
};
const formatter = new Intl.NumberFormat(locale, options);
console.log(formatter.format(num)); // USD 123,456.00
تنسيقات كتلة التعليمات البرمجية أعلاه 123456 كعملة (بالدولار الأمريكي).
*وحدات التنسيق*
يمكنك استخدام مُنشئ Intl.NumberFormat () لتنسيق الأرقام بالوحدات ،
مثل الطول والحجم والكتلة. يمكنك القيام بذلك عن طريق ضبط النمط على الوحدة .
عندما تقوم بتعيين النمط على وحدة ، يجب عليك تحديد هذه الخيارات:
الوحدة :
تحدد هذه الخاصية الوحدة المراد استخدامها للتنسيق ، مثل "متر" و
"كيلوغرام" و "لتر" و "ثانية" وما إلى ذلك.
unitDisplay :
تحدد هذه الخاصية كيفية عرض المتصفح للوحدة. يمكنك ضبطه إماطويل
(10 لترات) أوقصير(10 لتر) أوضيق(10 لتر).
فيما يلي مثال يوضح كيف يمكنك تنسيق الوحدات:
const num = 123456;
const locale = getUserLocale();
const options = {
style: "unit",
unit: "liter",
unitDisplay: "long",
};
const formatter = new Intl.NumberFormat(locale, options);
console.log(formatter.format(num)); //123,456 liters
تقوم كتلة الكود أعلاه بتنسيق الرقم 123456 كوحدة باللترات.
بدائل لـ Intl API
توفر Intl API مجموعة قوية ومرنة من الأدوات لتنسيق التواريخ والأرقام
والعملات والوحدات في تطبيقات JavaScript. يدعم العديد من المواقع
ويوفر طريقة متسقة لتنسيق البيانات عبر مختلف الثقافات واللغات.
قد ترغب في استخدام مكتبة بديلة ، مثل Luxon أو Day.js ، بسبب
دعم المتصفح المحدود لـ Intl. في النهاية ، يعتمد الاختيار بين Intl API أو
بديل على المتطلبات والقيود الخاصة بمشروعك.
