كيفية تنسيق القياسات مثل 5 كيلومترات أو 10 أرطال

مقدمة

تُعبّر القياسات عن الكميات بوحدات تمنحها معنى. خمسة كيلومترات تشير إلى مسافة، وعشرة أرطال تشير إلى وزن، وعشرون درجة مئوية تشير إلى درجة حرارة. التطبيقات التي تعرض القياسات تحتاج إلى إظهار القيمة العددية والوحدة بتنسيق يفهمه المستخدمون.

تنسّق اللغات المختلفة القياسات بطرق مختلفة. يكتب الأمريكيون "5 km" أو "5 kilometers" حسب السياق. قد يكتب الألمان "5 km" باتفاقيات مسافات مختلفة. يمكن أن يظهر نفس القياس كـ "5 km" أو "5km" أو "5 kilometers" حسب اللغة ومستوى التفصيل المطلوب. تستخدم بعض المناطق الوحدات المترية بينما تستخدم مناطق أخرى الوحدات الإمبراطورية، لكن تنسيق الوحدات يختلف أيضاً حسب اللغة.

توفر JavaScript واجهة برمجة التطبيقات Intl.NumberFormat لتنسيق القياسات بتنسيق وحدات مناسب للغة. يشرح هذا الدرس كيفية تنسيق القياسات مثل المسافة والوزن ودرجة الحرارة والحجم والسرعة مع عرض الوحدة الصحيح لأي لغة.

القياسات تحتاج إلى وحدات للسياق

الأرقام بدون وحدات تفتقر إلى المعنى في العديد من السياقات. الرقم 5 يمكن أن يمثل 5 كيلومترات أو 5 أميال أو 5 أمتار أو 5 أقدام. لا يستطيع المستخدمون تفسير القيمة دون معرفة الوحدة المُقاسة.

يجب عرض الوحدات بشكل متسق مع القيمة العددية. عندما تكتب "5 كيلومترات"، فإن الوحدة "كيلومترات" هي معلومة أساسية. عندما تكتب "10 أرطال"، فإن الوحدة "أرطال" تحدد القياس كوزن وليس عملة.

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

تنسيق الوحدات باستخدام Intl.NumberFormat

ينشئ المُنشئ Intl.NumberFormat مُنسِّق وحدات عند تمرير style: 'unit' في الخيارات. يجب أيضًا تحديد الوحدة المراد تنسيقها باستخدام خيار unit مع معرّف الوحدة.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer'
});

console.log(formatter.format(5));
// Output: "5 km"

ينشئ هذا مُنسِّقًا للإنجليزية الأمريكية يعرض القيم بالكيلومترات. تحوّل الدالة format() الرقم إلى نص مع اختصار وحدة الكيلومتر.

يقبل خيار unit معرّفات وحدات موحّدة. تستخدم هذه المعرّفات كلمات صغيرة مفصولة بشرطات. تتضمن المعرّفات الشائعة kilometer، meter، mile، pound، kilogram، celsius، fahrenheit، liter، وgallon.

const distanceFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer'
});

const weightFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'pound'
});

console.log(distanceFormatter.format(5));
// Output: "5 km"

console.log(weightFormatter.format(10));
// Output: "10 lb"

يطبّق كل مُنسِّق تلقائيًا اختصار الوحدة المناسب للوحدة المحددة. لا تحتاج إلى معرفة الاختصار المقابل لكل معرّف وحدة.

اللغة المحلية تحدد تنسيق الوحدات

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

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer'
});

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'unit',
  unit: 'kilometer'
});

const frFormatter = new Intl.NumberFormat('fr-FR', {
  style: 'unit',
  unit: 'kilometer'
});

console.log(usFormatter.format(5));
// Output: "5 km"

console.log(deFormatter.format(5));
// Output: "5 km"

console.log(frFormatter.format(5));
// Output: "5 km"

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

التحكم في مستوى تفصيل عرض الوحدات

يتحكم خيار unitDisplay في ظهور الوحدات بشكل مختصر أو كامل أو بحد أدنى. يقبل الخيار ثلاث قيم: "short" للاختصارات، "long" لأسماء الوحدات الكاملة، و"narrow" للعرض بحد أدنى.

const shortFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'short'
});

const longFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'long'
});

const narrowFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'narrow'
});

console.log(shortFormatter.format(5));
// Output: "5 km"

console.log(longFormatter.format(5));
// Output: "5 kilometers"

console.log(narrowFormatter.format(5));
// Output: "5km"

يستخدم تنسيق short اختصارات قياسية مثل "km" أو "lb". يستخدم تنسيق long أسماء وحدات كاملة مثل "كيلومترات" أو "أرطال". يستخدم تنسيق narrow عرضًا بحد أدنى مع مسافات مخفّضة أو بدون مسافات. القيمة الافتراضية هي short عند عدم تحديد unitDisplay.

تؤثر اللغة المحلية على كيفية ظهور الوحدات الطويلة. يتم ترجمة أسماء الوحدات الكاملة وتعديلها وفقًا لقواعد النحو في كل لغة.

const enFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'long'
});

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'long'
});

const esFormatter = new Intl.NumberFormat('es-ES', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'long'
});

console.log(enFormatter.format(5));
// Output: "5 kilometers"

console.log(deFormatter.format(5));
// Output: "5 Kilometer"

console.log(esFormatter.format(5));
// Output: "5 kilómetros"

توفر كل لغة محلية الترجمة المناسبة والشكل النحوي لاسم الوحدة.

تنسيق قياسات الوزن

تستخدم قياسات الوزن معرفات الوحدات مثل pound، kilogram، ounce، وgram. تعمل هذه المعرفات بنفس طريقة وحدات المسافة.

const poundFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'pound'
});

const kilogramFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilogram'
});

console.log(poundFormatter.format(10));
// Output: "10 lb"

console.log(kilogramFormatter.format(10));
// Output: "10 kg"

يمكنك تنسيق الوزن بالشكل الطويل لعرض أسماء الوحدات الكاملة.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'pound',
  unitDisplay: 'long'
});

console.log(formatter.format(1));
// Output: "1 pound"

console.log(formatter.format(10));
// Output: "10 pounds"

يتعامل المنسق تلقائيًا مع الأشكال المفردة والجمع بناءً على القيمة. يستخدم رطل واحد الشكل المفرد بينما تستخدم عشرة أرطال الشكل الجمع.

تنسيق قياسات درجة الحرارة

تستخدم قياسات درجة الحرارة معرفات الوحدات مثل celsius وfahrenheit. يتم تنسيق هذه الوحدات مع رموز الدرجات في الشكل القصير.

const celsiusFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'celsius'
});

const fahrenheitFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'fahrenheit'
});

console.log(celsiusFormatter.format(20));
// Output: "20°C"

console.log(fahrenheitFormatter.format(68));
// Output: "68°F"

يعرض الشكل الطويل أسماء مقاييس درجة الحرارة الكاملة.

const celsiusFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'celsius',
  unitDisplay: 'long'
});

const fahrenheitFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'fahrenheit',
  unitDisplay: 'long'
});

console.log(celsiusFormatter.format(20));
// Output: "20 degrees Celsius"

console.log(fahrenheitFormatter.format(68));
// Output: "68 degrees Fahrenheit"

يتضمن تنسيق درجة الحرارة تلقائيًا المصطلحات المناسبة للدرجات لكل مقياس.

تنسيق قياسات الحجم

تستخدم قياسات الحجم معرفات الوحدات مثل liter، gallon، milliliter، وfluid-ounce. تعمل هذه مثل أنواع الوحدات الأخرى.

const literFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'liter'
});

const gallonFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'gallon'
});

console.log(literFormatter.format(2));
// Output: "2 L"

console.log(gallonFormatter.format(2));
// Output: "2 gal"

تدعم وحدات الحجم أيضًا العرض بالشكل الطويل مع الإملاء الخاص باللغة المحلية.

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'liter',
  unitDisplay: 'long'
});

const gbFormatter = new Intl.NumberFormat('en-GB', {
  style: 'unit',
  unit: 'liter',
  unitDisplay: 'long'
});

console.log(usFormatter.format(2));
// Output: "2 liters"

console.log(gbFormatter.format(2));
// Output: "2 litres"

تستخدم اللغة المحلية الإنجليزية البريطانية "litres" بينما تستخدم الإنجليزية الأمريكية "liters".

تنسيق الوحدات المركبة

تجمع الوحدات المركبة بين وحدتين بسيطتين بعلاقة "لكل". تستخدم قياسات السرعة مثل الأميال في الساعة أو الكيلومترات في الساعة وحدات مركبة. تستخدم قياسات كفاءة الوقود مثل اللترات لكل 100 كيلومتر أيضًا وحدات مركبة.

تجمع معرّفات الوحدات المركّبة بين وحدتين بسيطتين باستخدام -per-. على سبيل المثال، mile-per-hour يجمع بين الأميال والساعات، kilometer-per-hour يجمع بين الكيلومترات والساعات.

const mphFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'mile-per-hour'
});

const kphFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer-per-hour'
});

console.log(mphFormatter.format(60));
// Output: "60 mph"

console.log(kphFormatter.format(100));
// Output: "100 km/h"

تُنسّق كل وحدة مركّبة بالاختصار المناسب الذي يجمع بين جزأي الوحدة.

يعرض الشكل الطويل الوحدات المركّبة بأسماء كاملة وحروف جر مناسبة للغة.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'mile-per-hour',
  unitDisplay: 'long'
});

console.log(formatter.format(60));
// Output: "60 miles per hour"

يُنشئ المُنسّق تلقائياً عبارة الوحدة المركّبة باستخدام القواعد النحوية الصحيحة للغة.

الحصول على معرّفات الوحدات المتاحة

تُرجع الدالة Intl.supportedValuesOf() مصفوفة بجميع معرّفات الوحدات المدعومة في بيئة JavaScript الخاصة بك. تأخذ هذه الدالة السلسلة النصية 'unit' كمعامل لها.

const units = Intl.supportedValuesOf('unit');

console.log(units);
// Output: Array of unit identifiers like:
// ["acre", "bit", "byte", "celsius", "centimeter", "day",
//  "degree", "fahrenheit", "fluid-ounce", "foot", "gallon",
//  "gram", "hectare", "hour", "inch", "kilogram", "kilometer",
//  "liter", "meter", "mile", "millimeter", "ounce", "pound",
//  "second", "stone", "week", "yard", ...]

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

تساعد هذه الدالة عندما تحتاج إلى التحقق مما إذا كانت وحدة معينة مدعومة أو عندما تريد تزويد المستخدمين بقائمة الوحدات المتاحة.

const units = Intl.supportedValuesOf('unit');

const hasKilometer = units.includes('kilometer');
const hasPound = units.includes('pound');

console.log(hasKilometer);
// Output: true

console.log(hasPound);
// Output: true

يمكنك التحقق من وحدات معينة قبل إنشاء المُنسّقات للتعامل مع البيئات ذات مستويات الدعم المختلفة.

الدمج مع خيارات تنسيق الأرقام

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

const formatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  maximumFractionDigits: 2
});

console.log(formatter.format(5.123));
// Output: "5.12 km"

console.log(formatter.format(5.5));
// Output: "5.5 km"

يطبّق المُنسّق قواعد التقريب والمنازل العشرية قبل إضافة الوحدة.

يمكنك تنسيق الأرقام الكبيرة بفواصل الآلاف.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer'
});

console.log(formatter.format(12345.67));
// Output: "12,345.67 km"

تعمل جميع ميزات تنسيق الأرقام القياسية مع تنسيق الوحدات.

تنسيق القياسات للغة المستخدم

بدلاً من تحديد لغة معينة بشكل ثابت، يمكنك استخدام تفضيلات لغة متصفح المستخدم. تُرجع الخاصية navigator.language اللغة المفضلة للمستخدم.

const userLocale = navigator.language;

const formatter = new Intl.NumberFormat(userLocale, {
  style: 'unit',
  unit: 'kilometer'
});

console.log(formatter.format(5));
// Output varies by user's locale

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

عرض القياسات في التطبيقات

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

const distanceFormatter = new Intl.NumberFormat(navigator.language, {
  style: 'unit',
  unit: 'kilometer',
  maximumFractionDigits: 1
});

const distance = 5.234;

document.getElementById('distance').textContent = distanceFormatter.format(distance);
// Displays: "5.2 km" (or locale equivalent)

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

إعادة استخدام منسقات الوحدات

يتضمن إنشاء نسخة جديدة من Intl.NumberFormat تحميل بيانات اللغة المحلية ومعالجة الخيارات. عندما تقوم بتنسيق قياسات متعددة بنفس اللغة المحلية والوحدة، قم بإنشاء المنسق مرة واحدة وأعد استخدامه.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer'
});

const distances = [1.5, 3.2, 5.0, 10.8];

distances.forEach(distance => {
  console.log(formatter.format(distance));
});
// Output:
// "1.5 km"
// "3.2 km"
// "5 km"
// "10.8 km"

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