سلاسل متعددة الأسطر في JavaScript: 3 طرق لتبسيط حياتك

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

كيفية تعيين سلسلة نصية متعددة الأسطر لمتغير في JavaScript: شرح للمبتدئين

\n\n

هل سبق لك أن كتبت نصًا طويلاً في الكود وفكرت: "ألا يمكنني ببساطة الضغط على Enter والاستمرار في سطر جديد؟" إذا كنت مبتدئًا في JavaScript، فمن المحتمل أنك واجهت هذا بالفعل. تحاول حفظ نص متعدد الأسطر في متغير، وتحصل على خطأ نحوي. هل هذا مألوف؟

\n\n

السؤال "How can I assign a multiline string literal to a variable?" هو أحد أكثر الأسئلة شيوعًا على Stack Overflow. آلاف المطورين يبحثون عن إجابة له. وليس من المستغرب: العمل مع السلاسل متعددة الأسطر هو أساس يجب على كل من يكتب بلغة JavaScript إتقانه.

\n\n

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

\n\n

لماذا لا تحب JavaScript فواصل الأسطر داخل علامات الاقتباس؟

\n\n

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

\n\n

let message = "مرحبًا!\nكيف حالك؟\nكل شيء على ما يرام؟";\nconsole.log(message);

\n\n

…ستحصل على خطأ SyntaxError: unterminated string literal. لماذا؟ لأنه في السلاسل العادية (بين علامتي اقتباس مزدوجة أو مفردة)، تعتبر JavaScript أن السلسلة تنتهي في نفس السطر الذي بدأت فيه. فاصل السطر المادي يقطع السلسلة.

\n\n

لكن لا تتعجل في الإحباط. لدينا على الأقل ثلاث طرق لتجاوز هذا القيد. وأولها هو الأحدث والأكثر راحة.

\n\n

الطريقة 1: القوالب النصية (Template Literals) — صديقك الجديد المفضل

\n\n

بدءًا من ES6 (ECMAScript 2015)، ظهرت في JavaScript القوالب النصية. وهي سلاسل تُكتب بين علامتي تنصيص عكسيتين (` `). وهي تحل مشكلة تعدد الأسطر بشكل نهائي.

\n\n

انظر كم هذا بسيط:

\n\n

let multilineString = `هذا هو السطر الأول.\nهذا هو السطر الثاني.\nوهذا هو السطر الثالث.`;\n\nconsole.log(multilineString);\n// الإخراج:\n// هذا هو السطر الأول.\n// هذا هو السطر الثاني.\n// وهذا هو السطر الثالث.

\n\n

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

\n\n

لماذا هذا هو الخيار الأفضل للمبتدئين؟

قابلية القراءة: يبدو الكود كما تريد تمامًا.
دعم التداخل: يمكنك إدراج المتغيرات مباشرة في السلسلة عبر ${...}.
المعيار: جميع المتصفحات الحديثة و Node.js تدعم القوالب النصية.

\n\n

مثال مع التداخل:

\n\n

let name = "آنا";\nlet greeting = `مرحبًا، ${name}!\nأهلاً بك في PythonLib.\nاليوم يوم رائع لتعلم البرمجة.`;\n\nconsole.log(greeting);\n// الإخراج:\n// مرحبًا، آنا!\n// أهلاً بك في PythonLib.\n// اليوم يوم رائع لتعلم البرمجة.

\n\n

هذه الطريقة مريحة جدًا لدرجة أنها تُستخدم في 90% من الحالات في التطوير الحديث. إذا كنت مبتدئًا، فتذكرها تحديدًا.

\n\n

الطريقة 2: ربط السلاسل (طريقة قديمة لكنها موثوقة)

\n\n

قبل ظهور القوالب النصية، كان المطورون يستخدمون الربط — وهو لصق السلاسل باستخدام عامل +. هذه الطريقة لا تزال صالحة، خاصة إذا كنت تعمل مع كود قديم جدًا أو لا تستطيع استخدام ES6 لأي سبب.

\n\n

كيف يبدو ذلك:

\n\n

let multilineString = "هذا هو السطر الأول.\\n" +\n                     "هذا هو السطر الثاني.\\n" +\n                     "وهذا هو السطر الثالث.";\n\nconsole.log(multilineString);\n// الإخراج:\n// هذا هو السطر الأول.\n// هذا هو السطر الثاني.\n// وهذا هو السطر الثالث.

\n\n

لاحظ \\n — هذا هو تسلسل الهروب