تدويل جافا سكريبت

تعرف على كيفية التعامل مع التدويل في JavaScript

Intlهو كائن قوي يفضحواجهة برمجة تطبيقات تدويل جافا سكريبت.

يعرض الخصائص التالية:

  • Intl.Collator: يتيح لك الوصول إلى مقارنة سلسلة حساسة للغة
  • Intl.DateTimeFormat: يتيح لك الوصول إلى تنسيق التاريخ والوقت الحساس للغة
  • Intl.NumberFormat: يتيح لك الوصول إلى تنسيق الأرقام الحساس للغة
  • Intl.PluralRules: يتيح لك الوصول إلى قواعد لغة الجمع والصياغة الحساسة للغة
  • Intl.RelativeTimeFormat: يتيح لك الوصول إلى تنسيق الوقت النسبي الحساس للغة

كما يوفر طريقة واحدة:Intl.getCanonicalLocales().

Intl.getCanonicalLocales()يتيح لك التحقق مما إذا كانت الإعدادات المحلية صالحة ، وإرجاع التنسيق الصحيح لها. يمكن أن تقبل سلسلة أو مصفوفة:

Intl.getCanonicalLocales('it-it') //[ 'it-IT' ]
Intl.getCanonicalLocales(['en-us', 'en-gb']) //[ 'en-US', 'en-GB' ]

ويرمي خطأ إذا كانت اللغة غير صالحة

Intl.getCanonicalLocales('it_it') //RangeError: Invalid language tag: it_it

التي يمكنك التقاطها باستخدام كتلة try / catch.

يمكن للأنواع المختلفة التفاعل مع Intl API لتلبية احتياجاتهم الخاصة. على وجه الخصوص يمكننا أن نذكر:

  • String.prototype.localeCompare()
  • Number.prototype.toLocaleString()
  • Date.prototype.toLocaleString()
  • Date.prototype.toLocaleDateString()
  • Date.prototype.toLocaleTimeString()

دعنا نذهب ونرى كيفية العمل مع خصائص Intl المذكورة أعلاه:

المصمم الدولي

تتيح لك هذه الخاصية الوصول إلى مقارنة سلسلة حساسة للغة

يمكنك تهيئة كائن Collator باستخدامnew Intl.Collator()، قم بتمريره بلغة ، ويمكنك استخدامcompare()طريقة تُرجع قيمة موجبة إذا كانت الوسيطة الأولى تأتي بعد الثانية. سالب إذا كان معكوسًا ، وصفر إذا كان بنفس القيمة:

const collator = new Intl.Collator('it-IT')
collator.compare('a', 'c') //a negative value
collator.compare('c', 'b') //a positive value

يمكننا استخدامه لطلب مصفوفات من الأحرف ، على سبيل المثال.

Intl.DateTimeFormat

تتيح لك هذه الخاصية الوصول إلى تنسيق التاريخ والوقت الحساس للغة.

يمكنك تهيئة كائن DateTimeFormat باستخدامnew Intl.DateTimeFormat()، قم بتمريرها بلغة محلية ، ثم تمرر لها تاريخًا لتنسيقها بالشكل الذي تفضله تلك اللغة:

const date = new Date()
let dateTimeFormatter = new Intl.DateTimeFormat('it-IT')
dateTimeFormatter.format(date) //27/1/2019
dateTimeFormatter = new Intl.DateTimeFormat('en-GB')
dateTimeFormatter.format(date) //27/01/2019
dateTimeFormatter = new Intl.DateTimeFormat('en-US')
dateTimeFormatter.format(date) //1/27/2019

يعيد التابع formatToParts () مصفوفة بكل أجزاء التاريخ:

const date = new Date()
const dateTimeFormatter = new Intl.DateTimeFormat('en-US')
dateTimeFormatter.formatToParts(date)
/*
[ { type: 'month', value: '1' },
  { type: 'literal', value: '/' },
  { type: 'day', value: '27' },
  { type: 'literal', value: '/' },
  { type: 'year', value: '2019' } ]
*/

يمكنك طباعة الوقت أيضًا. تحقق من جميع الخيارات التي يمكنك استخدامهاعلى MDN.

Intl.NumberFormat

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

لنفترض أن لديك رقم مثل10، وهو يمثل سعر شيء ما.

تريد تحويله إلى$10,00.

إذا كان الرقم يحتوي على أكثر من 3 أرقام ، فيجب عرضه بشكل مختلف ، على سبيل المثال ،1000يجب أن يتم عرضها على شكل$1.000,00

هذا بالدولار الأمريكي.

الدول المختلفة لديها اصطلاحات مختلفة لعرض القيم.

تجعل JavaScript الأمر سهلاً للغاية بالنسبة لنا باستخدام ملفاتECMAScript Internationalization API، واجهة برمجة تطبيقات متصفح حديثة نسبيًا توفر الكثير من ميزات التدويل ، مثل تنسيق التواريخ والوقت.

إنه مدعوم جيدًا:

Browser support for the internationalization API

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2
})

formatter.format(1000) // “$1,000.00” formatter.format(10) // “$10.00” formatter.format(123233000) // “$123,233,000.00”

الminimumFractionDigitsتعيّن الخاصية جزء الكسر ليكون دائمًا رقمين على الأقل. يمكنك التحقق من المعلمات الأخرى التي يمكنك استخدامهاصفحة NumberFormat MDN.

ينشئ هذا المثال مُنسق أرقام لعملة اليورو للبلد الإيطالي:

const formatter = new Intl.NumberFormat('it-IT', {
  style: 'currency',
  currency: 'EUR'
})

القواعد الجماعية الدولية

تتيح لك هذه الخاصية الوصول إلى قواعد لغة الجمع وصياغة صيغة الجمع الحساسة للغة. وجدتالمثال الموجود على بوابة Google Developers بواسطة Mathias Bynensالوحيد الذي يمكنني ربطه بالاستخدام العملي: إعطاء لاحقة للأرقام المرتبة: 0 ، 1 ، 2 ، 3 ، 4 ، 5 ..

const pr = new Intl.PluralRules('en-US', {
    type: 'ordinal'
})
pr.select(0) //other
pr.select(1) //one
pr.select(2) //two
pr.select(3) //few
pr.select(4) //other
pr.select(10) //other
pr.select(22) //two

في كل مرة وصلناother، نترجم ذلك إلىth. اذا كان لديناone، نحن نستخدمst. بالنسبةtwoنحن نستخدمnd.fewيحصل علىrd.

يمكننا استخدام كائن لإنشاء مصفوفة ترابطية:

const suffixes = {
  'one': 'st',
  'two': 'nd',
  'few': 'rd',
  'other': 'th'
}

ونقوم بوظيفة تنسيق للإشارة إلى القيمة في الكائن ، ونعيد سلسلة تحتوي على الرقم الأصلي ولاحقته:

const format = (number) => `${number}${suffixes[pr.select(number)]}`

الآن يمكننا استخدامه على النحو التالي:

format(0) //0th
format(1) //1st
format(2) //2nd
format(3) //3rd
format(4) //4th
format(21) //21st
format(22) //22nd

لاحظ أن هناك أشياء لطيفة ستظهر قريبًا في Intl ، مثلIntl.RelativeTimeFormatوIntl.ListFormat، التي كانت متوفرة وقت كتابة هذا التقرير فقط في Chrome و Opera.


المزيد من دروس js: