كيف أقوم بتنسيق المصفوفات باستخدام فواصل خاصة باللغة في JavaScript؟

استخدم Intl.ListFormat لتطبيق الفواصل والمسافات وعلامات الترقيم الصحيحة تلقائيًا لأي لغة.

مقدمة

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

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

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

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

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

// English: "red, green, blue"

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

// Japanese: "赤、緑、青"

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

// Chinese: "红、绿、蓝"

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

// Arabic: "أحمر، أخضر، أزرق"

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

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

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

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

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

const colors = ["赤", "緑", "青"];
console.log(colors.join(", "));
// "赤, 緑, 青" (wrong - should use 、 instead of ,)

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

استخدام 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" (or "red, green, blue" in older browsers)

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