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

مقدمة

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

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

يوفر Intl.NumberFormat في JavaScript خيار 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"

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

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

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 km" بدلاً من "42 kilometers" 5 أحرف لكل قياس، مما يتراكم عبر قيم متعددة.

تحتاج جداول البيانات التي تعرض القياسات في أعمدة إلى عرض ثابت. تحافظ الاختصارات القصيرة مثل "km" و"kg" و"L" على عرض الأعمدة قابلاً للإدارة. تعمل الوحدات الطويلة مثل "kilometers" و"kilograms" و"liters" على توسيع الأعمدة دون داعٍ.

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

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

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

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

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

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

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

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

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

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

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

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

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

يمكن لبلاطات لوحة المعلومات المدمجة التي تعرض مقاييس فردية استخدام العرض الضيق عندما يكون حجم البلاطة في حده الأدنى. تناسب أداة عداد السرعة التي تعرض "60km/h" بنص كبير بشكل أفضل من "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 km"، أو "long" للوحدات المكتوبة بالكامل مثل "5 kilometers"، أو "narrow" للأشكال المدمجة مثل "5km". يتم تعيين الخيار افتراضيًا على "short" إذا تم حذفه.

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

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