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

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

تعمل واجهة برمجة التطبيقات هذه على حل التحدي المتمثل في تنسيق البيانات لمختلف الثقافات واللغات. يسهل تنسيق الأرقام برمز العملة المناسب أو التواريخ باستخدام تنسيق التاريخ المناسب لمنطقة معينة.

باستخدام Intl API ، يمكنك إنشاء تطبيقات ويب يمكن الوصول إليها وسهلة الاستخدام للجماهير عبر المناطق والثقافات.

الحصول على لغة المستخدم

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

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

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

instagram viewer

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

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

يمكنك إنشاء ملف وظيفة JavaScript لمساعدتك في الحصول على لغة المستخدم. إليك مقتطف الشفرة الذي يمكن أن يساعدك:

مقدار ثابت getUserLocale = () => {
لو (navigator.languages ​​&& navigator.languages.length) {
يعود navigator.languages ​​[0];
 }
يعود الملاح.
};
وحدة التحكم.log (getUserLocale ()) ؛

هذا getUserLocale تُرجع الدالة العنصر الأول لخاصية navigator.languages ​​إذا كانت متوفرة. وإلا فإنه يعود إلى خاصية navigator.language التي تمثل لغة المستخدم المفضلة في المتصفحات القديمة.

تنسيق التواريخ لمواقع مختلفة

لتنسيق التواريخ باستخدام ملف دولي API ، يمكنك استخدام ملف دولي DateTimeFormat () البناء. يأخذ هذا المُنشئ وسيطتين: سلسلة محلية وكائن خيارات.

يمكن أن يحتوي كائن الخيارات على خصائص تتحكم في تنسيق التاريخ.

تتضمن بعض الخيارات الشائعة الاستخدام ما يلي:

  • يوم من أيام الأسبوع: يحدد هذا الخيار تنسيق يوم الأسبوع. يمكنك ضبطه على أي منهما طويل (جمعة)، قصير (الجمعة) ، أو ضيق (F).
  • سنة: يحدد هذا الخيار تنسيق السنة. يمكنك ضبطه على أي منهما رقمي (2023) أو 2 رقم (23).
  • شهر: يحدد هذا الخيار تنسيق الشهر. يمكنك ضبطه على أي منهما رقمي (3), 2 رقم (03), طويل (يمشي)، قصير (مارس) ، أو ضيق (م).
  • يوم: هذا الخيار يحدد تنسيق اليوم. يمكنك ضبطه على أي منهما رقمي (2) أو 2 رقم (02).

فيما يلي مثال يوضح كيفية تنسيق التاريخ باستخدام ملف دولي DateTimeFormat () البناء:

مقدار ثابت التاريخ = تاريخ.الآن()
مقدار ثابت locale = getUserLocale () ،
مقدار ثابت الخيارات = {
 يوم من أيام الأسبوع: "طويل",
 سنة: "رقمية",
 شهر: "طويل",
 يوم: "رقمية",
};


مقدار ثابت المنسق = جديددولي.DateTimeFormat (الإعدادات المحلية ، الخيارات) ؛
// يوم من أيام الأسبوع ، تاريخ الشهر ، السنة (الجمعة 24 مارس 2023)
وحدة التحكم.log (formatter.format (تاريخ)) ؛

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

تنسيق أنواع مختلفة من الأرقام

يمكنك استخدام ال دولي API لتنسيق الأرقام باستخدام امتداد دولي NumberFormat () البناء. يحب دولي DateTimeFormat ()، يأخذ هذا المُنشئ سلسلة محلية وكائن خيارات كوسائط.

يحتوي كائن الخيارات على الخصائص التي تتحكم في تنسيق الرقم. تختلف هذه الخصائص حسب المحدد أسلوب من العدد.

تنسيق الكسور العشرية والنسب المئوية

يمكنك تنسيق الأرقام على هيئة كسور عشرية ونسب مئوية باستخدام دولي NumberFormat () المُنشئ عن طريق تعيين خاصية النمط إلى عدد عشري للأرقام العشرية و نسبه مئويه للنسب المئوية.

إليك مثال يوضح كيفية تنسيق رقم عشري:

مقدار ثابت عدد = 123456;
مقدار ثابت locale = getUserLocale () ، // ar
مقدار ثابت الخيارات = {
 أسلوب: "عدد عشري",
 الحد الأدنى للكسر: 2,
 maxFractionDigits: 2,
 الاستخدام حقيقي,
};


مقدار ثابت المنسق = جديددولي.NumberFormat (الإعدادات المحلية ، الخيارات) ؛
وحدة التحكم.log (formatter.format (num)) ؛ // 123,456.00

تنسيقات كتلة التعليمات البرمجية أعلاه 123،456 كرقم عشري مع فواصل التجميع (,) ومنزلتين عشريتين.

إليك مثال يوضح كيفية تنسيق النسبة المئوية:

مقدار ثابت عدد = 123456;
مقدار ثابت locale = getUserLocale () ،
مقدار ثابت الخيارات = {
 أسلوب: "نسبه مئويه",
 الاستخدام حقيقي,
};


مقدار ثابت المنسق = جديددولي.NumberFormat (الإعدادات المحلية ، الخيارات) ؛
وحدة التحكم.log (formatter.format (num)) ؛ // 12,345,600%

تعبر كتلة التعليمات البرمجية أعلاه عن 123456 كنسبة مئوية مع فواصل التجميع.

تنسيق العملات

يمكنك تنسيق الأرقام كعملات عن طريق تعيين خاصية النمط إلى عملة. يجب عليك تعيين خيارات أخرى بجانبه ، مثل:

  • عملة: سلسلة تمثل رمز العملة ISO 4217 (مثل "USD" أو "EUR" أو "JPY") لاستخدامها في التنسيق. إذا لم تقم بتوفير هذا الخيار ، فسيقوم المنسق باختيار رمز العملة بناءً على الإعدادات المحلية للمستخدم.
  • العملة: تحدد هذه الخاصية كيفية عرض المتصفح للعملة. يمكن أن يكون رمز (75 دولارًا أمريكيًا) أو الرمز (75 دولارًا أمريكيًا) أو اسم (75 دولارا أمريكيا).

إليك مثال يوضح كيف يمكنك تنسيق العملة:

مقدار ثابت عدد = 123456;
مقدار ثابت locale = getUserLocale () ، // ar
مقدار ثابت الخيارات = {
 أسلوب: "عملة",
 عملة: "دولار أمريكي",
 العملة "شفرة",
};


مقدار ثابت المنسق = جديددولي.NumberFormat (الإعدادات المحلية ، الخيارات) ؛
وحدة التحكم.log (formatter.format (num)) ؛ // 123456.00 دولارًا أمريكيًا

تنسيقات كتلة التعليمات البرمجية أعلاه 123456 كعملة (بالدولار الأمريكي).

وحدات التنسيق

يمكنك استخدام ال دولي NumberFormat () المُنشئ لتنسيق الأرقام بالوحدات ، مثل الطول والحجم والكتلة. يمكنك القيام بذلك عن طريق ضبط ملف أسلوب ل وحدة. عندما تقوم بتعيين النمط على وحدة ، يجب عليك تحديد هذه الخيارات:

  • وحدة: تحدد هذه الخاصية الوحدة المراد استخدامها للتنسيق ، مثل "متر" و "كيلوغرام" و "لتر" و "ثانية" وهكذا.
  • وحدة: تحدد هذه الخاصية كيفية عرض المتصفح للوحدة. يمكنك ضبطه على أي منهما طويل (10 لترات) ، قصير (10 لتر) ، أو ضيق (10 لتر).

إليك مثال يوضح كيف يمكنك تنسيق الوحدات:

مقدار ثابت عدد = 123456;
مقدار ثابت locale = getUserLocale () ،
مقدار ثابت الخيارات = {
 أسلوب: "وحدة",
 وحدة: "لتر",
 الوحدة "طويل",
};


مقدار ثابت المنسق = جديددولي.NumberFormat (الإعدادات المحلية ، الخيارات) ؛
وحدة التحكم.log (formatter.format (num)) ؛ // 123،456 لترًا

تقوم كتلة الكود أعلاه بتنسيق الرقم 123456 كوحدة باللترات.

بدائل لـ Intl API

توفر Intl API مجموعة قوية ومرنة من الأدوات لتنسيق التواريخ والأرقام والعملات والوحدات في تطبيقات JavaScript. يدعم العديد من المواقع ويوفر طريقة متسقة لتنسيق البيانات عبر مختلف الثقافات واللغات.

قد ترغب في استخدام مكتبة بديلة ، مثل Luxon أو Day.js ، بسبب دعم المتصفح المحدود لـ Intl. في النهاية ، يعتمد الاختيار بين Intl API أو بديل على المتطلبات والقيود الخاصة بمشروعك.