كيفية عرض الوحدات بشكل مختصر أو مطول

مقدمة

عند عرض القياسات في واجهة المستخدم، تشغل الوحدة مساحة إلى جانب الرقم. يمكن أن تظهر مسافة 5 كيلومترات على شكل "5 كم"، "5 كيلومترات"، أو "5كم" اعتمادًا على المساحة المتاحة لديك ومدى الوضوح الذي تحتاجه. كل تنسيق يوازن بين سهولة القراءة والمساحة الأفقية.

تتطلب السياقات المختلفة خيارات تنسيق مختلفة. تستفيد لوحة المعلومات على الهاتف المحمول التي تعرض مقاييس متعددة من الوحدات المختصرة مثل "كم" أو "كغ". بينما يحتاج التطبيق التعليمي الذي يُعلّم الطلاب عن القياسات إلى وحدات واضحة ومكتوبة بالكامل مثل "كيلومترات" أو "كيلوغرامات". أما التصور المكثف للبيانات فيستخدم الشكل الأكثر اختصارًا لتناسب المزيد من المعلومات على الشاشة.

توفر واجهة Intl.NumberFormat في جافا سكريبت خيار unitDisplay للتحكم في هذا الاختيار. يمكنك الاختيار بين العرض القصير مع الاختصارات القياسية، أو العرض الطويل مع الكلمات المكتوبة بالكامل، أو العرض الضيق مع التمثيل الأكثر اختصارًا. يمنحك هذا الخيار تحكمًا دقيقًا في كيفية ظهور الوحدات للمستخدمين.

ما الذي يتحكم به خيار unitDisplay

يعمل خيار unitDisplay عندما تقوم بتعيين style إلى "unit" في Intl.NumberFormat. وهو يقبل ثلاث قيم: "short"، و"long"، و"narrow". كل قيمة تنتج مستوى مختلفًا من الإطناب لجزء الوحدة من المخرجات المنسقة.

تنتج القيمة short وحدات مختصرة قياسية مثل "5 كم" أو "10 رطل". بينما تكتب القيمة long اسم الوحدة بالكامل مثل "5 كيلومترات" أو "10 أرطال". وتنتج القيمة narrow التمثيل الأكثر اختصارًا مثل "5كم" أو "10رطل"، وغالبًا ما تزيل المسافات بين الرقم والوحدة.

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

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

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

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

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

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

يتم تعيين خيار unitDisplay افتراضيًا إلى "short" إذا أغفلته. وهذا يعني أن تنسيق الوحدة يستخدم الاختصارات القياسية ما لم تطلب صراحةً نمط عرض مختلف.

تنسيق الوحدات بعرض مختصر

يستخدم العرض المختصر اختصارات قياسية يعرفها معظم الناس. يوازن هذا التنسيق بين سهولة القراءة وكفاءة المساحة.

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

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

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

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

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

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

const weightFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilogram",
  unitDisplay: "short"
});

const volumeFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "liter",
  unitDisplay: "short"
});

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

console.log(weightFormatter.format(25));
// Output: "25 kg"

console.log(volumeFormatter.format(3.5));
// Output: "3.5 L"

يستخدم كل نوع من الوحدات اختصاره القياسي. تستخدم المسافة km، ويستخدم الوزن kg، ويستخدم الحجم L. هذه الاختصارات معروفة على نطاق واسع وتعمل بشكل جيد في معظم السياقات.

العرض المختصر هو السلوك الافتراضي. إذا حذفت خيار unitDisplay، يستخدم المنسق العرض المختصر تلقائيًا.

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

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

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

تنسيق الوحدات بعرض مطول

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

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

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

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

يتعامل المنسق تلقائيًا مع صيغ المفرد والجمع. تستخدم الوحدة الواحدة صيغة المفرد "kilometer" بينما تستخدم الوحدات المتعددة صيغة الجمع "kilometers". لا تحتاج إلى تحديد الصيغة التي يجب استخدامها يدويًا.

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

const distanceFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "mile",
  unitDisplay: "long"
});

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

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

console.log(distanceFormatter.format(10));
// Output: "10 miles"

console.log(weightFormatter.format(25));
// Output: "25 pounds"

console.log(temperatureFormatter.format(22));
// Output: "22 degrees Celsius"

يجعل العرض المطول القياس واضحًا فورًا دون أن يتطلب من المستخدمين تفسير الاختصارات. تستفيد وحدات درجة الحرارة بشكل خاص من العرض المطول لأن اختصارات مثل C وF يمكن أن تكون غامضة.

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

تنسيق الوحدات بعرض ضيق

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

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

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

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

يزيل المنسق المسافة بين الرقم والوحدة، مما ينشئ مخرجات أكثر تكثيفًا. هذا يوفر مساحة أفقية في التخطيطات المقيدة للغاية.

تنتج الوحدات المختلفة تمثيلات ضيقة مختلفة بناءً على الاتفاقيات القياسية.

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

const speedFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer-per-hour",
  unitDisplay: "narrow"
});

const weightFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilogram",
  unitDisplay: "narrow"
});

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

console.log(speedFormatter.format(60));
// Output: "60km/h"

console.log(weightFormatter.format(25));
// Output: "25kg"

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

مقارنة العرض القصير والطويل والضيق

تصبح الاختلافات بين خيارات العرض الثلاثة واضحة عند تنسيق نفس القياسات بكل خيار.

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"
});

const distances = [1, 5, 10, 42];

distances.forEach(distance => {
  console.log(`${distance}:`);
  console.log(`  Short:  ${shortFormatter.format(distance)}`);
  console.log(`  Long:   ${longFormatter.format(distance)}`);
  console.log(`  Narrow: ${narrowFormatter.format(distance)}`);
});

// Output:
// 1:
//   Short:  1 km
//   Long:   1 kilometer
//   Narrow: 1km
// 5:
//   Short:  5 km
//   Long:   5 kilometers
//   Narrow: 5km
// 10:
//   Short:  10 km
//   Long:   10 kilometers
//   Narrow: 10km
// 42:
//   Short:  42 km
//   Long:   42 kilometers
//   Narrow: 42km

يستخدم العرض القصير 4-5 أحرف لجزء الوحدة. يستخدم العرض الطويل 9-10 أحرف بما في ذلك صيغ الجمع. يستخدم العرض الضيق حرفين ويزيل المسافة. تُظهر هذه التدرجات المفاضلة بين الوضوح وكفاءة المساحة.

يمكنك مقارنة أنواع وحدات مختلفة لمعرفة كيفية تعامل كل خيار عرض مع القياسات المختلفة.

const units = [
  { unit: "mile", value: 10 },
  { unit: "pound", value: 25 },
  { unit: "gallon", value: 5 },
  { unit: "fahrenheit", value: 72 }
];

units.forEach(({ unit, value }) => {
  const short = new Intl.NumberFormat("en-US", {
    style: "unit",
    unit: unit,
    unitDisplay: "short"
  }).format(value);

  const long = new Intl.NumberFormat("en-US", {
    style: "unit",
    unit: unit,
    unitDisplay: "long"
  }).format(value);

  const narrow = new Intl.NumberFormat("en-US", {
    style: "unit",
    unit: unit,
    unitDisplay: "narrow"
  }).format(value);

  console.log(`${unit}:`);
  console.log(`  Short:  ${short}`);
  console.log(`  Long:   ${long}`);
  console.log(`  Narrow: ${narrow}`);
});

// Output:
// mile:
//   Short:  10 mi
//   Long:   10 miles
//   Narrow: 10mi
// pound:
//   Short:  25 lb
//   Long:   25 pounds
//   Narrow: 25lb
// gallon:
//   Short:  5 gal
//   Long:   5 gallons
//   Narrow: 5gal
// fahrenheit:
//   Short:  72°F
//   Long:   72 degrees Fahrenheit
//   Narrow: 72°F

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

كيف تختلف طريقة عرض الوحدات عبر اللغات المختلفة

تتكيف خيارات العرض الثلاثة مع اللغة المحلية التي تحددها. تستخدم اللغات المختلفة اختصارات وأسماء وحدات وقواعد مسافات مختلفة.

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

locales.forEach(locale => {
  const shortFormatter = new Intl.NumberFormat(locale, {
    style: "unit",
    unit: "kilometer",
    unitDisplay: "short"
  });

  const longFormatter = new Intl.NumberFormat(locale, {
    style: "unit",
    unit: "kilometer",
    unitDisplay: "long"
  });

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(5)}`);
  console.log(`  Long:  ${longFormatter.format(5)}`);
});

// Output:
// en-US:
//   Short: 5 km
//   Long:  5 kilometers
// de-DE:
//   Short: 5 km
//   Long:  5 Kilometer
// fr-FR:
//   Short: 5 km
//   Long:  5 kilomètres
// ja-JP:
//   Short: 5 km
//   Long:  5キロメートル

يظل العرض القصير متسقًا عبر اللغات المحلية لأن "km" هو اختصار معترف به دوليًا. يختلف العرض الطويل لأن كل لغة لها كلمتها الخاصة للكيلومتر. تستخدم الألمانية "Kilometer"، وتستخدم الفرنسية "kilomètres"، وتستخدم اليابانية "キロメートル".

يتعامل المنسق مع الاختلافات النحوية تلقائيًا. اللغة الألمانية لا تجمع كلمة "Kilometer" بنفس طريقة جمع الإنجليزية لكلمة "kilometers". تضيف الفرنسية علامة تشكيل للكلمة. تستخدم اليابانية نظام كتابة مختلف تمامًا. تدير واجهة برمجة التطبيقات الدولية (Intl API) هذه الاختلافات بناءً على اللغة المحلية.

تتعامل بعض اللغات المحلية مع العرض الضيق بشكل مختلف عن غيرها.

const locales = ["en-US", "de-DE", "fr-FR"];

locales.forEach(locale => {
  const narrowFormatter = new Intl.NumberFormat(locale, {
    style: "unit",
    unit: "kilometer-per-hour",
    unitDisplay: "narrow"
  });

  console.log(`${locale}: ${narrowFormatter.format(60)}`);
});

// Output:
// en-US: 60km/h
// de-DE: 60 km/h
// fr-FR: 60 km/h

تزيل اللغة الإنجليزية المسافة في العرض الضيق، منتجة "60km/h". بينما تحتفظ الألمانية والفرنسية بالمسافة، منتجة "60 km/h". تعكس هذه الاتفاقيات الخاصة باللغة المحلية كيفية كتابة كل ثقافة للقياسات في شكل مختصر.

متى تستخدم العرض المختصر

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

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

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

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

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

يحقق العرض المختصر توازنًا بين الوضوح والكفاءة. يتعرف معظم المستخدمين على الاختصارات القياسية مثل كم، ميل، كغ، رطل، ل، وغالون دون ارتباك.

متى تستخدم العرض الطويل

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

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

تستفيد واجهات التركيز على إمكانية الوصول من العرض الطويل لأن قارئات الشاشة تنطق الكلمات المكتوبة بالكامل بشكل أكثر طبيعية. إعلان قارئ الشاشة "5 كيلومترات" يبدو أكثر طبيعية من "5 كم"، والتي قد تُقرأ كـ "5 ك م" أو "5 كاي إم".

تستخدم المستندات والتقارير الرسمية العرض الطويل للحفاظ على نبرة احترافية. تقارير الأعمال والأوراق العلمية والوثائق الرسمية عادة ما تكتب القياسات بالكامل بدلاً من اختصارها.

يستفيد الجمهور الدولي من العرض الطويل عندما تختلف أنظمة القياس. يجد المستخدمون غير المألوفين بالوحدات المترية أو الإمبراطورية أسماء مكتوبة بالكامل مثل "كيلومترات" أو "أميال" أسهل للفهم من الاختصارات.

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

متى تستخدم العرض الضيق

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

تستفيد تصورات البيانات ذات المعلومات الكثيفة من العرض الضيق. تحتاج تسميات الرسوم البيانية وتعليقات الرسوم البيانية وتراكبات البيانات إلى نص بالحد الأدنى لتجنب حجب المحتوى المرئي الأساسي. استخدام "60كم/س" بدلاً من "60 كم/س" يوفر حرفًا واحدًا مع الحفاظ على قابلية القراءة للمستخدمين الذين يفهمون السياق.

يمكن أن تستخدم بلاط لوحة المعلومات المدمجة التي تعرض مقاييس فردية العرض الضيق عندما يكون حجم البلاط في الحد الأدنى. تناسب أداة عداد السرعة التي تعرض "60كم/س" بنص كبير بشكل أفضل من "60 كيلومتر في الساعة".

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

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

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

دمج عرض الوحدة مع خيارات التنسيق الأخرى

يعمل خيار unitDisplay مع جميع خيارات تنسيق الأرقام الأخرى. يمكنك التحكم في المنازل العشرية والتجميع وخيارات التنسيق الأخرى أثناء اختيار نمط عرض الوحدة.

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

console.log(formatter.format(42.7856));
// Output: "42.79 kilometers"

console.log(formatter.format(5.1));
// Output: "5.1 kilometers"

يتحكم خيار maximumFractionDigits في الدقة العشرية بينما يتحكم unitDisplay في تنسيق الوحدة. تعمل هذه الخيارات معًا لإنتاج التنسيق الدقيق الذي تحتاجه.

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

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "meter",
  unitDisplay: "long",
  notation: "compact"
});

console.log(formatter.format(1500));
// Output: "1.5K meters"

console.log(formatter.format(2400000));
// Output: "2.4M meters"

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

يمكنك دمج عرض الوحدة مع عرض الإشارة لإظهار التغييرات أو الاختلافات في القياسات.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilogram",
  unitDisplay: "long",
  signDisplay: "always"
});

console.log(formatter.format(2.5));
// Output: "+2.5 kilograms"

console.log(formatter.format(-1.8));
// Output: "-1.8 kilograms"

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

ما يجب تذكره

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

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

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