كيف تقوم بتنسيق قوائم القياسات مع الوحدات؟
عرض قياسات متعددة مثل 5 كم، 10 كم، 15 كم بتنسيق قائمة مناسب للغة باستخدام واجهات برمجة التطبيقات Intl في جافا سكريبت
مقدمة
غالبًا ما تحتاج التطبيقات التي تعرض القياسات إلى إظهار قيم متعددة معًا. قد يعرض تطبيق اللياقة البدنية أوقات الانقسام مثل "5 كم، 10 كم، 15 كم". قد يعرض تطبيق الطقس درجات الحرارة على مدار الأسبوع مثل "20°م، 22°م، 25°م، 23°م". قد تسرد وصفة طعام كميات المكونات مثل "كوبان، ملعقة كبيرة واحدة، 3 ملاعق صغيرة".
تجمع هذه القوائم بين تحديين للتدويل. أولاً، يحتاج كل قياس إلى تنسيق وحدة مناسب للغة المحلية. ثانيًا، تحتاج القائمة نفسها إلى علامات ترقيم وفواصل مناسبة للغة المستهدفة. تستخدم اللغة الإنجليزية الفواصل وأحيانًا أدوات الربط مثل "و". تستخدم اللغات الأخرى فواصل مختلفة وتتبع قواعد نحوية مختلفة.
توفر جافا سكريبت واجهتي برمجة تطبيقات لحل هذه المشكلة. تقوم Intl.NumberFormat بتنسيق القياسات الفردية مع الوحدات. تقوم Intl.ListFormat بدمج قيم متعددة في قائمة صحيحة نحويًا. يشرح هذا الدرس كيفية استخدام كلتا واجهتي البرمجة معًا لتنسيق قوائم القياسات التي تتوافق مع توقعات المستخدم في أي لغة محلية.
قوائم القياسات تتطلب خطوتين للتنسيق
عند تنسيق قائمة من القياسات، لا يمكنك تخطي أي خطوة من خطوات التنسيق. إذا قمت بتنسيق القائمة دون تنسيق القياسات، ستحصل على فواصل مناسبة للغة المحلية ولكن عرض وحدة غير صحيح. إذا قمت بتنسيق القياسات دون تنسيق القائمة، ستحصل على وحدات صحيحة ولكن فواصل غير صحيحة.
const distances = [5, 10, 15];
// خطأ: تم تنسيق القائمة وليس القياسات
console.log(distances.join(', '));
// النتيجة: "5, 10, 15" (الوحدات مفقودة)
// خطأ: تم تنسيق القياسات وليس القائمة
const formatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer'
});
console.log(distances.map(d => formatter.format(d)).join(', '));
// النتيجة: "5 km, 10 km, 15 km" (الفاصلة المحددة قد تكون خاطئة لبعض اللغات المحلية)
النهج الصحيح هو تنسيق القياسات أولاً، ثم تنسيق المصفوفة الناتجة من السلاسل النصية كقائمة.
const distances = [5, 10, 15];
const numberFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer'
});
const formattedMeasurements = distances.map(d => numberFormatter.format(d));
// النتيجة: ["5 km", "10 km", "15 km"]
const listFormatter = new Intl.ListFormat('en-US', {
type: 'unit'
});
console.log(listFormatter.format(formattedMeasurements));
// النتيجة: "5 km, 10 km, 15 km"
هذا النمط يعمل مع أي نوع من القياسات وأي لغة محلية. تقوم بتنسيق كل قياس مع وحدته، ثم تنسيق مصفوفة السلاسل النصية المنسقة كقائمة.
استخدام نوع الوحدة لقوائم القياسات
يقبل منشئ Intl.ListFormat خيار type الذي يتحكم في كيفية دمج عناصر القائمة. يقوم خيار type: 'unit' بتنسيق القوائم باتباع اتفاقيات البيانات التقنية والعلمية.
const measurements = ['5 km', '10 km', '15 km'];
const unitList = new Intl.ListFormat('en-US', {
type: 'unit'
});
console.log(unitList.format(measurements));
// Output: "5 km, 10 km, 15 km"
القوائم ذات type: 'unit' تحذف أدوات الربط مثل "و" أو "أو". وتستخدم فواصل بسيطة بين العناصر. وهذا يتطابق مع كيفية كتابة القياسات عادة في السياقات التقنية.
قارن هذا بـ type: 'conjunction'، الذي يضيف "و" قبل العنصر الأخير.
const measurements = ['5 km', '10 km', '15 km'];
const conjunctionList = new Intl.ListFormat('en-US', {
type: 'conjunction'
});
console.log(conjunctionList.format(measurements));
// Output: "5 km, 10 km, and 15 km"
تبدو صيغة الربط طبيعية في النثر ولكنها تبدو غير صحيحة في السياقات التقنية. عند عرض قياسات متعددة، استخدم type: 'unit' لاتباع الاتفاقيات القياسية للكتابة العلمية والتقنية.
تنسيق قياسات المسافة في القوائم
تستخدم قياسات المسافة معرفات الوحدة مثل kilometer، meter، mile، وfoot. بعد تنسيق كل مسافة مع وحدتها، قم بدمجها في قائمة.
const distances = [5, 10, 15, 20];
const numberFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer'
});
const formattedDistances = distances.map(d => numberFormatter.format(d));
const listFormatter = new Intl.ListFormat('en-US', {
type: 'unit'
});
console.log(listFormatter.format(formattedDistances));
// Output: "5 km, 10 km, 15 km, 20 km"
نفس النمط يعمل للأميال.
const distances = [3, 6, 9];
const numberFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'mile'
});
const formattedDistances = distances.map(d => numberFormatter.format(d));
const listFormatter = new Intl.ListFormat('en-US', {
type: 'unit'
});
console.log(listFormatter.format(formattedDistances));
// Output: "3 mi, 6 mi, 9 mi"
يمكنك تنسيق المسافات بأماكن عشرية عن طريق تعيين خيارات تنسيق الأرقام.
const distances = [5.2, 10.7, 15.3];
const numberFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer',
maximumFractionDigits: 1
});
const formattedDistances = distances.map(d => numberFormatter.format(d));
const listFormatter = new Intl.ListFormat('en-US', {
type: 'unit'
});
console.log(listFormatter.format(formattedDistances));
// Output: "5.2 km, 10.7 km, 15.3 km"
يتعامل منسق الأرقام مع التقريب والأماكن العشرية قبل أن يقوم منسق القائمة بدمج القيم.
تنسيق قياسات الوزن في القوائم
تتبع قياسات الوزن نفس النمط باستخدام معرفات الوحدات مثل kilogram وpound وounce وgram.
const weights = [50, 75, 100];
const numberFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilogram'
});
const formattedWeights = weights.map(w => numberFormatter.format(w));
const listFormatter = new Intl.ListFormat('en-US', {
type: 'unit'
});
console.log(listFormatter.format(formattedWeights));
// Output: "50 kg, 75 kg, 100 kg"
يمكنك عرض الوزن بالباوند بدلاً من ذلك.
const weights = [110, 165, 220];
const numberFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'pound'
});
const formattedWeights = weights.map(w => numberFormatter.format(w));
const listFormatter = new Intl.ListFormat('en-US', {
type: 'unit'
});
console.log(listFormatter.format(formattedWeights));
// Output: "110 lb, 165 lb, 220 lb"
يستخدم منسق الأرقام تلقائيًا الاختصار الصحيح لكل وحدة.
تنسيق قياسات درجة الحرارة في القوائم
تستخدم قياسات درجة الحرارة معرفات الوحدات مثل celsius وfahrenheit.
const temperatures = [20, 22, 25, 23, 21];
const numberFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'celsius'
});
const formattedTemperatures = temperatures.map(t => numberFormatter.format(t));
const listFormatter = new Intl.ListFormat('en-US', {
type: 'unit'
});
console.log(listFormatter.format(formattedTemperatures));
// Output: "20°C, 22°C, 25°C, 23°C, 21°C"
تتضمن منسقات درجة الحرارة تلقائيًا رموز الدرجة في المخرجات.
تعمل درجة فهرنهايت بنفس الطريقة.
const temperatures = [68, 72, 77, 73, 70];
const numberFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'fahrenheit'
});
const formattedTemperatures = temperatures.map(t => numberFormatter.format(t));
const listFormatter = new Intl.ListFormat('en-US', {
type: 'unit'
});
console.log(listFormatter.format(formattedTemperatures));
// Output: "68°F, 72°F, 77°F, 73°F, 70°F"
يظل النمط متطابقًا عبر أنواع القياسات المختلفة. فقط معرف الوحدة هو الذي يتغير.
تنسيق قياسات الحجم في القوائم
تستخدم قياسات الحجم معرفات وحدات مثل liter وgallon وmilliliter وfluid-ounce.
const volumes = [1, 2, 3];
const numberFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'liter'
});
const formattedVolumes = volumes.map(v => numberFormatter.format(v));
const listFormatter = new Intl.ListFormat('en-US', {
type: 'unit'
});
console.log(listFormatter.format(formattedVolumes));
// Output: "1 L, 2 L, 3 L"
تعمل قياسات الحجم مع القيم العشرية.
const volumes = [0.5, 1.5, 2.5];
const numberFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'liter',
maximumFractionDigits: 1
});
const formattedVolumes = volumes.map(v => numberFormatter.format(v));
const listFormatter = new Intl.ListFormat('en-US', {
type: 'unit'
});
console.log(listFormatter.format(formattedVolumes));
// Output: "0.5 L, 1.5 L, 2.5 L"
يتعامل منسق الأرقام مع الدقة العشرية قبل أن يعالج منسق القائمة القيم.
تنسيق قياسات السرعة في القوائم
تستخدم قياسات السرعة وحدات مركبة مثل kilometer-per-hour وmile-per-hour.
const speeds = [50, 75, 100];
const numberFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer-per-hour'
});
const formattedSpeeds = speeds.map(s => numberFormatter.format(s));
const listFormatter = new Intl.ListFormat('en-US', {
type: 'unit'
});
console.log(listFormatter.format(formattedSpeeds));
// Output: "50 km/h, 75 km/h, 100 km/h"
تعمل الأميال في الساعة بنفس الطريقة.
const speeds = [30, 45, 60];
const numberFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'mile-per-hour'
});
const formattedSpeeds = speeds.map(s => numberFormatter.format(s));
const listFormatter = new Intl.ListFormat('en-US', {
type: 'unit'
});
console.log(listFormatter.format(formattedSpeeds));
// Output: "30 mph, 45 mph, 60 mph"
يتم تنسيق الوحدات المركبة تلقائيًا بالاختصارات والفواصل الصحيحة.
اللغة المحلية تحدد تنسيق فاصل القائمة
تتحكم معلمة اللغة المحلية في كيفية فصل عناصر القائمة وترقيمها. تستخدم اللغات المختلفة اصطلاحات مختلفة لتنسيق القوائم.
const distances = [5, 10, 15];
const numberFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer'
});
const formattedDistances = distances.map(d => numberFormatter.format(d));
const enList = new Intl.ListFormat('en-US', {
type: 'unit'
});
const frList = new Intl.ListFormat('fr-FR', {
type: 'unit'
});
const deList = new Intl.ListFormat('de-DE', {
type: 'unit'
});
console.log(enList.format(formattedDistances));
// Output: "5 km, 10 km, 15 km"
console.log(frList.format(formattedDistances));
// Output: "5 km, 10 km, 15 km"
console.log(deList.format(formattedDistances));
// Output: "5 km, 10 km, 15 km"
بينما تظل اختصارات الكيلومتر متشابهة عبر هذه اللغات المحلية، يمكن أن تختلف اصطلاحات المسافات والفواصل. تتعامل واجهة برمجة التطبيقات Intl.ListFormat مع قواعد التنسيق الخاصة باللغة المحلية تلقائيًا.
تستخدم بعض اللغات فواصل مختلفة أو أنماط ترقيم للقوائم. تضمن واجهة برمجة التطبيقات أن قوائمك تتبع الاصطلاحات الصحيحة لكل لغة محلية دون الحاجة إلى معرفة القواعد المحددة.
مطابقة لغة الأرقام مع لغة القائمة
عند تنسيق قوائم القياسات، استخدم نفس اللغة المحلية لكل من منسق الأرقام ومنسق القوائم. هذا يضمن تنسيقًا متسقًا في جميع المخرجات.
const distances = [1000, 2000, 3000];
const locale = 'de-DE';
const numberFormatter = new Intl.NumberFormat(locale, {
style: 'unit',
unit: 'meter'
});
const formattedDistances = distances.map(d => numberFormatter.format(d));
const listFormatter = new Intl.ListFormat(locale, {
type: 'unit'
});
console.log(listFormatter.format(formattedDistances));
// Output: "1.000 m, 2.000 m, 3.000 m"
التنسيق الألماني يستخدم النقاط كفواصل للآلاف. كل من منسق الأرقام ومنسق القوائم يستخدمان الاصطلاحات الألمانية لأنهما يشتركان في نفس اللغة المحلية.
استخدام لغات محلية مختلفة لتنسيق الأرقام والقوائم ينتج مخرجات غير متسقة.
const distances = [1000, 2000, 3000];
const numberFormatter = new Intl.NumberFormat('de-DE', {
style: 'unit',
unit: 'meter'
});
const formattedDistances = distances.map(d => numberFormatter.format(d));
const listFormatter = new Intl.ListFormat('en-US', {
type: 'unit'
});
console.log(listFormatter.format(formattedDistances));
// Output: "1.000 m, 2.000 m, 3.000 m"
هذا ينتج تنسيقًا مختلطًا حيث تستخدم الأرقام الاصطلاحات الألمانية بينما تستخدم القائمة الاصطلاحات الإنجليزية. استخدم دائمًا نفس اللغة المحلية لكلا المنسقين.
التحكم في نمط عرض القائمة
خيار style يتحكم في مدى تفصيل تنسيق القائمة. يقبل الخيار ثلاث قيم: "long" و"short" و"narrow".
const measurements = ['5 km', '10 km', '15 km'];
const longList = new Intl.ListFormat('en-US', {
type: 'unit',
style: 'long'
});
const shortList = new Intl.ListFormat('en-US', {
type: 'unit',
style: 'short'
});
const narrowList = new Intl.ListFormat('en-US', {
type: 'unit',
style: 'narrow'
});
console.log(longList.format(measurements));
// Output: "5 km, 10 km, 15 km"
console.log(shortList.format(measurements));
// Output: "5 km, 10 km, 15 km"
console.log(narrowList.format(measurements));
// Output: "5 km 10 km 15 km"
أنماط long وshort تنتج مخرجات متشابهة لقوائم الوحدات في اللغة الإنجليزية. نمط narrow يستخدم مسافات أقل ويحذف الفواصل بين العناصر.
اللغات المحلية المختلفة تظهر تباينًا أكبر بين الأنماط. اللغة المحلية تحدد التنسيق الدقيق لكل مستوى من الأنماط.
الدمج مع أسماء الوحدات الكاملة
يمكنك تنسيق القياسات بأسماء وحدات كاملة بدلاً من الاختصارات عن طريق تعيين unitDisplay: 'long' في منسق الأرقام.
const distances = [5, 10, 15];
const numberFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer',
unitDisplay: 'long'
});
const formattedDistances = distances.map(d => numberFormatter.format(d));
const listFormatter = new Intl.ListFormat('en-US', {
type: 'unit'
});
console.log(listFormatter.format(formattedDistances));
// الناتج: "5 kilometers, 10 kilometers, 15 kilometers"
يتعامل منسق الأرقام مع صيغ المفرد والجمع تلقائيًا. يقوم منسق القائمة بدمج السلاسل المنسقة بغض النظر عما إذا كانت تستخدم اختصارات أو أسماء كاملة.
const distances = [1, 5];
const numberFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer',
unitDisplay: 'long'
});
const formattedDistances = distances.map(d => numberFormatter.format(d));
const listFormatter = new Intl.ListFormat('en-US', {
type: 'unit'
});
console.log(listFormatter.format(formattedDistances));
// الناتج: "1 kilometer, 5 kilometers"
يستخدم منسق الأرقام "kilometer" للرقم 1 و"kilometers" للرقم 5. يقوم منسق القائمة بدمجها مع الفواصل المناسبة.
إعادة استخدام المنسقات لأداء أفضل
يتضمن إنشاء نسخ من Intl.NumberFormat وIntl.ListFormat تحميل بيانات اللغة ومعالجة الخيارات. عند تنسيق قوائم متعددة من القياسات، قم بإنشاء المنسقات مرة واحدة وإعادة استخدامها.
const numberFormatter = new Intl.NumberFormat('en-US', {
style: 'unit',
unit: 'kilometer'
});
const listFormatter = new Intl.ListFormat('en-US', {
type: 'unit'
});
const distanceLists = [
[5, 10, 15],
[20, 25, 30],
[35, 40, 45]
];
distanceLists.forEach(distances => {
const formattedDistances = distances.map(d => numberFormatter.format(d));
console.log(listFormatter.format(formattedDistances));
});
// الناتج:
// "5 km, 10 km, 15 km"
// "20 km, 25 km, 30 km"
// "35 km, 40 km, 45 km"
يقوم هذا النمط بإنشاء كل منسق مرة واحدة واستخدامه عدة مرات. يصبح الفرق في الأداء كبيرًا عند تنسيق العديد من القوائم.
إنشاء دالة تنسيق قابلة لإعادة الاستخدام
يمكنك تغليف نمط التنسيق ذو الخطوتين في دالة قابلة لإعادة الاستخدام.
function formatMeasurementList(values, locale, unit) {
const numberFormatter = new Intl.NumberFormat(locale, {
style: 'unit',
unit: unit
});
const formattedValues = values.map(v => numberFormatter.format(v));
const listFormatter = new Intl.ListFormat(locale, {
type: 'unit'
});
return listFormatter.format(formattedValues);
}
console.log(formatMeasurementList([5, 10, 15], 'en-US', 'kilometer'));
// الناتج: "5 km, 10 km, 15 km"
console.log(formatMeasurementList([50, 75, 100], 'en-US', 'kilogram'));
// الناتج: "50 kg, 75 kg, 100 kg"
console.log(formatMeasurementList([20, 22, 25], 'en-US', 'celsius'));
// الناتج: "20°C, 22°C, 25°C"
تتعامل هذه الدالة مع أي نوع من القياسات واللغات المحلية. يمكنك توسيعها لقبول خيارات تنسيق إضافية.
function formatMeasurementList(values, locale, unit, options = {}) {
const numberFormatter = new Intl.NumberFormat(locale, {
style: 'unit',
unit: unit,
...options
});
const formattedValues = values.map(v => numberFormatter.format(v));
const listFormatter = new Intl.ListFormat(locale, {
type: 'unit'
});
return listFormatter.format(formattedValues);
}
console.log(formatMeasurementList(
[5.123, 10.789, 15.456],
'en-US',
'kilometer',
{ maximumFractionDigits: 1 }
));
// الناتج: "5.1 km, 10.8 km, 15.5 km"
console.log(formatMeasurementList(
[1, 5, 10],
'en-US',
'kilometer',
{ unitDisplay: 'long' }
));
// الناتج: "1 kilometer, 5 kilometers, 10 kilometers"
تمرر الدالة خيارات إضافية إلى منسق الأرقام، مما يتيح التحكم في المنازل العشرية وعرض الوحدة وإعدادات التنسيق الأخرى.
تنسيق القوائم حسب اللغة المحلية للمستخدم
بدلاً من تحديد لغة محلية معينة، يمكنك استخدام تفضيلات لغة متصفح المستخدم. تُرجع خاصية navigator.language اللغة المحلية المفضلة للمستخدم.
const userLocale = navigator.language;
const distances = [5, 10, 15];
const numberFormatter = new Intl.NumberFormat(userLocale, {
style: 'unit',
unit: 'kilometer'
});
const formattedDistances = distances.map(d => numberFormatter.format(d));
const listFormatter = new Intl.ListFormat(userLocale, {
type: 'unit'
});
console.log(listFormatter.format(formattedDistances));
// يختلف الناتج حسب اللغة المحلية للمستخدم
يعرض هذا النهج قوائم القياسات وفقًا لتوقعات تنسيق كل مستخدم. يرى المستخدمون المختلفون نفس البيانات منسقة وفقًا لاتفاقيات لغتهم المحلية.
عرض قوائم القياسات في التطبيقات
يمكنك استخدام هذا النمط في أي مكان تعرض فيه قياسات متعددة للمستخدمين. وهذا يشمل تطبيقات اللياقة البدنية التي تعرض أوقات التقسيم، وتطبيقات الطقس التي تعرض توقعات درجات الحرارة، وتطبيقات الوصفات التي تعرض كميات المكونات، والتطبيقات العلمية التي تعرض بيانات التجارب.
const splitTimes = [5, 10, 15, 20];
const numberFormatter = new Intl.NumberFormat(navigator.language, {
style: 'unit',
unit: 'kilometer',
maximumFractionDigits: 1
});
const formattedTimes = splitTimes.map(t => numberFormatter.format(t));
const listFormatter = new Intl.ListFormat(navigator.language, {
type: 'unit'
});
const result = listFormatter.format(formattedTimes);
document.getElementById('split-times').textContent = result;
// Displays: "5 km, 10 km, 15 km, 20 km" (or locale equivalent)
تعمل السلاسل النصية المنسقة مثل أي قيمة نصية أخرى. يمكنك إدراجها في محتوى النص، أو السمات، أو أي سياق تعرض فيه معلومات للمستخدمين.