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

مقدمة

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

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

توفر جافا سكريبت واجهة برمجة التطبيقات 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));
// الناتج: "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));
// الناتج: "5 km"

console.log(weightFormatter.format(10));
// الناتج: "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));
// الناتج: "5 km"

console.log(deFormatter.format(5));
// الناتج: "5 km"

console.log(frFormatter.format(5));
// الناتج: "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 أسماء وحدات كاملة مثل "kilometers" أو "pounds". يستخدم تنسيق 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() بإرجاع مصفوفة تحتوي على جميع معرفات الوحدات المدعومة في بيئة جافا سكريبت الخاصة بك. تأخذ هذه الطريقة السلسلة النصية 'unit' كوسيط لها.

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

console.log(units);
// الناتج: مصفوفة من معرفات الوحدات مثل:
// ["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);
// الناتج: true

console.log(hasPound);
// الناتج: true

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

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

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

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

console.log(formatter.format(5.123));
// الناتج: "5.12 km"

console.log(formatter.format(5.5));
// الناتج: "5.5 km"

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

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

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

console.log(formatter.format(12345.67));
// الناتج: "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));
// تختلف المخرجات حسب لغة المستخدم

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

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

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

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

const distance = 5.234;

document.getElementById('distance').textContent = distanceFormatter.format(distance);
// يعرض: "5.2 km" (أو ما يعادلها باللغة المحلية)

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

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

يتضمن إنشاء نسخة جديدة من 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));
});
// المخرجات:
// "1.5 km"
// "3.2 km"
// "5 km"
// "10.8 km"

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