التعبيرات النمطية في TypeScript: دليل شامل للمبتدئين

التعبيرات النمطية في TypeScript: من النظرية إلى التطبيق

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

ما هي التعبيرات النمطية وكيفية إنشائها في TypeScript

التعبير النمطي هو سلسلة من الأحرف تصف نمط البحث. في TypeScript، هناك طريقتان لإنشاء تعبير نمطي:

\n
• الصياغة الحرفية: /النمط/العلامات
\n
• المُنشئ RegExp: new RegExp('النمط', 'العلامات')
\n

الطريقة الأولى مناسبة للأنماط الثابتة، والثانية عندما يتم تشكيل النمط ديناميكيًا.

// الصياغة الحرفية\nconst emailPattern: RegExp = /^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$/;\n\n// المُنشئ RegExp\nconst dynamicPattern: string = "hello";\nconst regexFromString: RegExp = new RegExp(dynamicPattern, "gi");\n\nconsole.log(emailPattern.test("test@example.com")); // true\nconsole.log(regexFromString.test("Hello world")); // true

الطرق الأساسية للعمل مع التعبيرات النمطية

في TypeScript، تتوفر ثلاث طرق رئيسية للعمل مع regex. دعنا نستعرض كل منها مع الأمثلة.

طريقة test() — التحقق من التطابق

تُرجع true أو false. مثالية للتحقق من الصحة.

const hasNumber: RegExp = /\\d+/;\nconsole.log(hasNumber.test("abc123")); // true\nconsole.log(hasNumber.test("abc"));    // false

طريقة exec() — البحث مع التفاصيل

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

const wordPattern: RegExp = /(\\w+)\\s(\\w+)/;\nconst result = wordPattern.exec("Hello TypeScript");\nif (result) {\n    console.log(`التطابق الكامل: ${result[0]}`); // Hello TypeScript\n    console.log(`المجموعة الأولى: ${result[1]}`);      // Hello\n    console.log(`المجموعة الثانية: ${result[2]}`);      // TypeScript\n    console.log(`الفهرس: ${result.index}`);          // 0\n}

طريقة match() — البحث عن جميع التطابقات

تُستدعى على النص وليس على التعبير النمطي. مع العلامة g تُرجع مصفوفة بجميع التطابقات.

const text: string = "السعر: 100 روبل، الخصم: 20 روبل";\nconst prices: RegExp = /\\d+/g;\nconst foundPrices: string[] | null = text.match(prices);\nconsole.log(foundPrices); // ['100', '20', '0']

الصياغة والرموز شائعة الاستخدام

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

\n
• . — أي حرف باستثناء السطر الجديد
\n
• \\d — رقم (مكافئ [0-9])
\n
• \\w — حرف أو رقم أو شرطة سفلية ([a-zA-Z0-9_])
\n
• \\s — أي حرف مسافة بيضاء (مسافة، تبويب، سطر جديد)
\n
• ^ — بداية السطر
\n
• $ — نهاية السطر
\n
• * — 0 أو أكثر من التكرارات
\n
• + — 1 أو أكثر من التكرارات
\n
• ? — 0 أو 1 تكرار (يجعل المُحدد الكمي كسولًا)
\n
• [] — مجموعة من الأحرف (مثل [a-z] — جميع الأحرف الصغيرة)
\n
• () — مجموعة التقاط
\n
• | — أو المنطقي
\n

// أمثلة على استخدام الرموز\nconst phonePattern: RegExp = /^\\+?7?\\d{10}$/;\nconsole.log(phonePattern.test("+79161234567")); // true\n\nconst datePattern: RegExp = /^\\d{2}\\.\\d{2}\\.\\d{4}$/;\nconsole.log(datePattern.test("31.12.2023")); // true\