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

مقدمة

عند تحويل مصفوفة إلى سلسلة نصية قابلة للقراءة، تحتاج إلى فصل العناصر بفواصل أو علامات ترقيم أخرى. تستخدم اللغات المختلفة فواصل مختلفة. تستخدم اللغة الإنجليزية الفواصل والمسافات، وتستخدم اليابانية فاصلة التعداد 、، وتستخدم العربية علامات ترقيم مختلفة وترتيب كلمات مختلف.

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

لماذا تختلف فواصل المصفوفة حسب اللغة المحلية

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

تفصل اللغة الإنجليزية العناصر بفاصلة ومسافة.

// الإنجليزية: "red, green, blue"

تستخدم اليابانية فاصلة التعداد 、 بدون مسافات.

// اليابانية: "赤、緑、青"

تستخدم الصينية نفس حرف فاصلة التعداد 、.

// الصينية: "红、绿、蓝"

تستخدم العربية حرف فاصلة مختلف، وتُقرأ من اليمين إلى اليسار.

// العربية: "أحمر، أخضر، أزرق"

هذه الاختلافات تلقائية في Intl.ListFormat. لا تحتاج إلى معرفة قواعد علامات الترقيم لكل لغة.

المشكلة مع join()

تقوم طريقة Array.prototype.join() بتحويل المصفوفات إلى سلاسل نصية باستخدام فاصل تحدده.

const colors = ["red", "green", "blue"];
console.log(colors.join(", "));
// "red, green, blue"

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

const colors = ["赤", "緑", "青"];
console.log(colors.join(", "));
// "赤, 緑, 青" (خطأ - يجب استخدام 、 بدلاً من ,)

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

استخدام Intl.ListFormat للفواصل المتوافقة مع اللغات المحلية

يقوم منشئ Intl.ListFormat بإنشاء منسق يطبق الفواصل الصحيحة لأي لغة محلية.

const formatter = new Intl.ListFormat("en");
const colors = ["red", "green", "blue"];
console.log(formatter.format(colors));
// "red, green, and blue"

يستخدم المنسق تلقائيًا علامات الترقيم المناسبة للغة المحددة. يمكنك تمرير رمز اللغة المحلية كوسيط أول.

const enFormatter = new Intl.ListFormat("en");
const jaFormatter = new Intl.ListFormat("ja");
const arFormatter = new Intl.ListFormat("ar");

const colors = ["red", "green", "blue"];

console.log(enFormatter.format(colors));
// "red, green, and blue"

console.log(jaFormatter.format(["赤", "緑", "青"]));
// "赤、緑、青"

console.log(arFormatter.format(["أحمر", "أخضر", "أزرق"]));
// "أحمر، أخضر، أزرق"

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

كيف تتغير الفواصل عبر اللغات المختلفة

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

تستخدم اللغة الإنجليزية فاصلة، مسافة، وكلمة "and".

const formatter = new Intl.ListFormat("en");
console.log(formatter.format(["apple", "orange", "banana"]));
// "apple, orange, and banana"

تستخدم اللغة الإسبانية فاصلة، مسافة، وكلمة "y".

const formatter = new Intl.ListFormat("es");
console.log(formatter.format(["manzana", "naranja", "plátano"]));
// "manzana, naranja y plátano"

تستخدم اللغة الفرنسية فاصلة، مسافة، وكلمة "et".

const formatter = new Intl.ListFormat("fr");
console.log(formatter.format(["pomme", "orange", "banane"]));
// "pomme, orange et banane"

تستخدم اللغة الألمانية فاصلة، مسافة، وكلمة "und".

const formatter = new Intl.ListFormat("de");
console.log(formatter.format(["Apfel", "Orange", "Banane"]));
// "Apfel, Orange und Banane"

تستخدم اللغة اليابانية فاصلة التعداد 、 والحرف 、.

const formatter = new Intl.ListFormat("ja");
console.log(formatter.format(["りんご", "オレンジ", "バナナ"]));
// "りんご、オレンジ、バナナ"

تستخدم اللغة الصينية فاصلة التعداد 、 وكلمة 和.

const formatter = new Intl.ListFormat("zh");
console.log(formatter.format(["苹果", "橙子", "香蕉"]));
// "苹果、橙子和香蕉"

تستخدم اللغة الكورية فاصلة وأداة 및.

const formatter = new Intl.ListFormat("ko");
console.log(formatter.format(["사과", "오렌지", "바나나"]));
// "사과, 오렌지 및 바나나"

يتعامل المنسق مع كل هذه الاختلافات تلقائيًا. يمكنك كتابة نفس الكود لكل لغة.

استخدام اللغة المحلية للمستخدم

يمكنك اكتشاف اللغة المحلية المفضلة للمستخدم من إعدادات المتصفح واستخدامها لتنسيق القوائم.

const userLocale = navigator.language;
const formatter = new Intl.ListFormat(userLocale);
const items = ["first", "second", "third"];
console.log(formatter.format(items));

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

تنسيق المصفوفات بدون أدوات الربط

السلوك الافتراضي لـ Intl.ListFormat يضيف أداة ربط مثل "و" قبل العنصر الأخير. يمكنك تعطيل هذا باستخدام نوع الوحدة.

const formatter = new Intl.ListFormat("en", { type: "unit" });
console.log(formatter.format(["5 km", "12 minutes", "100 calories"]));
// "5 km, 12 minutes, 100 calories"

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

const enFormatter = new Intl.ListFormat("en", { type: "unit" });
const jaFormatter = new Intl.ListFormat("ja", { type: "unit" });

console.log(enFormatter.format(["Item A", "Item B", "Item C"]));
// "Item A, Item B, Item C"

console.log(jaFormatter.format(["項目A", "項目B", "項目C"]));
// "項目A、項目B、項目C"

حتى بدون أدوات الربط، فإن علامات الترقيم الفاصلة لا تزال تتبع قواعد اللغة المحلية.

إنشاء منسقات قابلة لإعادة الاستخدام

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

const formatter = new Intl.ListFormat("en");

console.log(formatter.format(["red", "green"]));
// "red and green"

console.log(formatter.format(["a", "b", "c", "d"]));
// "a, b, c, and d"

console.log(formatter.format(["one"]));
// "one"

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

التعامل مع المصفوفات الفارغة

عند تنسيق مصفوفة فارغة، يُرجع المنسق سلسلة نصية فارغة.

const formatter = new Intl.ListFormat("en");
console.log(formatter.format([]));
// ""

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

function formatList(items, locale) {
  if (items.length === 0) {
    return "No items";
  }
  const formatter = new Intl.ListFormat(locale);
  return formatter.format(items);
}

console.log(formatList([], "en"));
// "No items"

console.log(formatList(["apple"], "en"));
// "apple"

هذا يمنحك التحكم في كيفية ظهور المصفوفات الفارغة للمستخدمين.

دعم المتصفح

واجهة برمجة التطبيقات Intl.ListFormat متاحة في جميع المتصفحات الحديثة. وقد تم دعمها منذ أبريل 2021 عبر متصفحات Chrome وFirefox وSafari وEdge.

يمكنك التحقق مما إذا كانت واجهة برمجة التطبيقات موجودة قبل استخدامها.

if (typeof Intl.ListFormat !== "undefined") {
  const formatter = new Intl.ListFormat("en");
  console.log(formatter.format(["a", "b", "c"]));
} else {
  console.log("Intl.ListFormat is not supported");
}

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

function formatList(items, locale) {
  if (typeof Intl.ListFormat !== "undefined") {
    const formatter = new Intl.ListFormat(locale);
    return formatter.format(items);
  }
  return items.join(", ");
}

console.log(formatList(["red", "green", "blue"], "en"));
// "red, green, and blue" (أو "red, green, blue" في المتصفحات القديمة)

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