صارت أرقام Pocket دقيقة، لكن لا أحد يريد أن يقرأ 1220. الناس يريدون Lunch: $12.20. النص في JavaScript اسمه string (سلسلة نصية)، ومعظم ما يراه المستخدم من برنامجك هو نصوص بنيتها أنت.
يمكنك كتابة النص بعلامات تنصيص مفردة أو مزدوجة أو بعلامات backtick:
\nconst a = 'Coffee';\nconst b = \"Sam's lunch\";\nconst c = `Bus`;\nconsole.log(a, b, c);العلامات المفردة والمزدوجة تتصرّفان بالطريقة نفسها؛ اختر أسلوبًا والتزم به (هذه الدورة تستخدم العلامات المزدوجة). واستخدم النوع الآخر حين يحتوي نصّك على علامة تنصيص، كما في "Sam's lunch"، أو “اهرب” منها بشرطة مائلة عكسية: 'Sam\\'s lunch'. و\\n داخل النص تعني سطرًا جديدًا.
أما علامات backtick فلها شأن خاص، وستستخدمها أكثر من غيرها. إنها تصنع الـ template literals (القوالب النصية).
\nلصق النصوص باستخدام + يصبح فوضويًا بسرعة: "Lunch: $" + dollars + " (" + category + ")". من السهل أن تنسى مسافة أو علامة تنصيص. أما الـ template literal فيتيح لك كتابة النص مرة واحدة وإسقاط القيم فيه عبر ${ }:
const label = \"Lunch\";\nconst cents = 1220;\nconst category = \"food\";\n\nconst line = `${label}: $${(cents / 100).toFixed(2)} (${category})`;\nconsole.log(line);كل ما داخل ${ } تعبير JavaScript كامل: يُحسب، ثم يُحوَّل إلى نص، ثم يُدرج. هنا تقسم (cents / 100).toFixed(2) لتحصل على 12.2، ثم تحوّلها toFixed(2) إلى النص "12.20" بمنزلتين عشريتين بالضبط. علامة $ الأولى مجرّد علامة دولار عادية؛ فقط $ المتبوعة بـ { هي التي تبدأ الإدراج.
ويمكن للـ template literals أيضًا أن تمتد على عدّة أسطر، وهذا مفيد للرسائل متعدّدة الأسطر:
\nconst report = `Pocket summary\n Spent: $22.00\n Left: $3.00`;\nconsole.log(report);النص سلسلة من الحروف، ولكل حرف موضع يُسمّى الفهرس (index)، يبدأ العدّ فيه من 0. وlength تخبرك بعدد الحروف.
const word = \"Coffee\";\nconsole.log(word.length); // 6\nconsole.log(word[0]); // first character\nconsole.log(word.at(-1)); // last character\nconsole.log(word.slice(0, 3)); // from index 0 up to, not including, 3\nconsole.log(word.slice(3)); // from index 3 to the endword.at(-1) تعدّ من النهاية، وهذا يُغنيك عن كتابة word[word.length - 1].
تأتي النصوص مع methods (دوال مدمجة) جاهزة، وهي دوال تستدعيها بنقطة. هذه التي ستستخدمها أسبوعيًا:
\nconst raw = \" Coffee with Sam \";\nconst clean = raw.trim();\n\nconsole.log(clean); // spaces removed from both ends\nconsole.log(clean.toUpperCase());\nconsole.log(clean.includes(\"Sam\")); // true or false\nconsole.log(clean.startsWith(\"Coffee\"));\nconsole.log(clean.replaceAll(\" \", \"-\"));\nconsole.log(\"7\".padStart(3, \"0\")); // \"007\"\nconsole.log(`[${raw}]`); // the original is untouchedالسطر الأخير هو الفكرة الأساسية: النصوص غير قابلة للتعديل (immutable). لا توجد method تغيّر نصًا أبدًا؛ كل واحدة تُرجع نصًا جديدًا. فإن أردت الاحتفاظ بالناتج، فخزّنه.
\n\nالجمع بين عدّة methods أمر شائع. لتجعل الحرف الأول من تسمية ما حرفًا كبيرًا، خذ الحرف الأول، وحوّله إلى حرف كبير، وأضف إليه الباقي:
\nconst label = \"groceries\";\nconst nice = label[0].toUpperCase() + label.slice(1);\nconsole.log(nice);وهناك دالتان أخريان تجيبان عن سؤال “أين هو؟” بدلًا من “هل هو موجود؟”. indexOf("Sam") تُرجع الفهرس الذي يظهر فيه النص لأول مرة، أو -1 إن لم يكن موجودًا أصلًا. وsplit(" ") تقطّع النص إلى أجزاء أينما وجدت الفاصل، وتُعيد إليك قائمة: ["Coffee", "with", "Sam"]. تُسمّى القوائم مصفوفات (arrays)، ولها درس كامل في القسم 3.
يعبر Pocket الحدود بين النصوص والأرقام باستمرار. المبالغ أرقام حين تحسب، ونصوص حين تعرضها؛ والمدخلات المكتوبة نصوص إلى أن تحوّلها.
\nconst cents = 450;\nconsole.log(String(cents), typeof String(cents)); // number to string\nconsole.log(`${cents}`.length); // a template literal converts too\nconsole.log(Number(\"4.50\") * 100); // string to number\nconsole.log(Number(\" 12 \")); // spaces around digits are ignored\nconsole.log(Number(\"\")); // careful: an empty string becomes 0السطر الأخير فخّ يستحق أن تتذكّره. حقل النص الفارغ يتحوّل إلى 0 لا إلى NaN، فيبدو “المستخدم لم يكتب شيئًا” مطابقًا تمامًا لـ “المستخدم كتب صفرًا”. وحين تتحقّق من النماذج في القسم 4، ستفحص المدخلات الفارغة قبل التحويل.
=== تقارن النصوص حرفًا حرفًا، وهي حسّاسة لحالة الأحرف: "Food" === "food" تساوي false. والمستخدمون يكتبون الفئات كيفما شاؤوا، لذلك وحّد الشكل قبل أن تقارن: احذف المسافات واختر حالة أحرف واحدة.
const typed = \" Food \";\nconsole.log(typed === \"food\"); // false\nconsole.log(typed.trim().toLowerCase() === \"food\"); // trueويمكنك أيضًا استخدام < و> مع النصوص. إنهما تقارنان رموز الحروف موضعًا بموضع، وهذا ينجح مع الكلمات البسيطة ذات الأحرف الصغيرة ("apple" < "banana" صحيحة)، ويفشل سريعًا فيما عدا ذلك: "Zebra" < "apple" صحيحة أيضًا، لأن كل حرف كبير له رمز أصغر من كل حرف صغير. يُريك القسم 3 الطريقة الصحيحة لترتيب النصوص، باستخدام localeCompare، التي تتبع قواعد لغة حقيقية.
يستطيع Pocket الآن أن يحمل المبالغ، ويحسب بها بدقة، ويطبعها بشكل يقرؤه الناس. لكن ما لا يستطيعه بعد هو أن يتفاعل: أن ينبّهك حين تتجاوز ميزانيتك، أو أن يعامل الطعام بشكل مختلف عن الإيجار. في القسم التالي يبدأ برنامجك باتخاذ القرارات.
\n","toc":[{"id":"sec-1","text":"كتابة النصوص","level":2},{"id":"sec-2","text":"الـ Template literals: قيم داخل النص","level":2},{"id":"sec-3","text":"الحروف والمواضع والمقاطع","level":2},{"id":"sec-4","text":"دوال تُرجع نصوصًا جديدة","level":2},{"id":"sec-5","text":"من النصوص إلى الأرقام وبالعكس","level":2},{"id":"sec-6","text":"مقارنة النصوص","level":2}],"takeaways":["يمكن كتابة النصوص بعلامات تنصيص مفردة أو مزدوجة أو بعلامات backtick؛ وعلامات backtick تصنع الـ template literals، التي تستطيع إدراج القيم عبر${} وتمتد على عدّة أسطر.","النصوص غير قابلة للتعديل (immutable)، لذلك تُرجع دوال مثل trim() وtoUpperCase() نصًا جديدًا وتترك الأصلي كما هو.","تُرقَّم الحروف بدءًا من 0، وlength تعدّها، وslice(start, end) تنسخ جزءًا حتى end دون أن تشمله.","نسّق السنتات للعرض باستخدام (cents / 100).toFixed(2) أو Intl.NumberFormat، وأبقِ المبلغ المخزّن رقمًا."],"further":[{"title":"Template literals (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals"},{"title":"String (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"},{"title":"Intl.NumberFormat (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat"}],"quiz":[{"q":"ماذا يطبع هذا الكود؟
\nlet label = \" lunch \";\nlabel.trim();\nconsole.log(`[${label}]`);[lunch]","why":"trim() تُرجع نصًا جديدًا مشذّبًا، لكن لا شيء يخزّنه، فيبقى label بمسافاته."},{"text":"[ lunch ]","why":"صحيح. النصوص غير قابلة للتعديل. اكتب label = label.trim(); لتحتفظ بالناتج."},{"text":"[${label}]","why":"علامات backtick تصنع template literal، فيُستبدل ${label} بقيمة label."}],"answer":1},{"q":"const word = "Pocket"; أيّ تعبير يعطي "Poc"؟
word.slice(1, 3)","why":"الفهارس تبدأ من 0، لذلك يبدأ هذا من “o” ويتوقّف قبل الفهرس 3، فيعطي “oc”."},{"text":"word.slice(0, 2)","why":"فهرس النهاية مستثنى، لذلك يعطي هذا “Po” فقط."},{"text":"word[0, 3]","why":"الأقواس المربّعة تقرأ حرفًا واحدًا. وتعبير الفاصلة ناتجه 3، فيُرجع هذا “k”."},{"text":"word.slice(0, 3)","why":"صحيح. إنه ينسخ الفهارس 0 و1 و2 ويتوقّف قبل 3."}],"answer":3},{"q":"تحتاج إلى عرض 1220 سنتًا على شكل $12.20. أيّ هذه صحيح؟
"$" + (1220 / 100).toFixed(2)","why":"صحيح. القسمة تعطي 12.2، وtoFixed(2) تُرجع النص “12.20” بمنزلتين عشريتين بالضبط."},{"text":""$" + 1220 / 100","why":"هذا يطبع “$12.2”، لأن الأرقام تُسقط الأصفار في آخرها حين تتحوّل إلى نص."},{"text":""$" + 1220.toFixed(2)","why":"هذا ينسّق السنتات لا الدولارات، ثم إن النقطة مباشرة بعد عدد صحيح مكتوب حرفيًا خطأ في الصياغة أصلًا."}],"answer":0}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// An expense as it arrived from a messy form\nconst rawLabel = \" coffee with Sam \";\nconst cents = 450;\nconst category = \"FOOD\";\n\n// Build line so it reads exactly: Coffee with Sam: $4.50 (food)\nconst line = rawLabel + \": \" + cents + \" (\" + category + \")\";\nconsole.log(line);\n"},"solution":{"js":"const rawLabel = \" coffee with Sam \";\nconst cents = 450;\nconst category = \"FOOD\";\n\nconst trimmed = rawLabel.trim();\nconst label = trimmed[0].toUpperCase() + trimmed.slice(1);\nconst price = (cents / 100).toFixed(2);\n\nconst line = `${label}: $${price} (${category.toLowerCase()})`;\nconsole.log(line);\n"},"checks":[{"id":"trimmed","test":"return typeof line === 'string' && line === line.trim() && line.startsWith('C');"},{"id":"price","test":"return typeof line === 'string' && line.includes('$4.50');"},{"id":"exact","test":"return line === 'Coffee with Sam: $4.50 (food)';\n"},{"id":"logged","test":"return logs.some((l) => l === 'Coffee with Sam: $4.50 (food)');\n"}],"title":"نسّق سطر مصروف","prompt":"وصل مصروف من نموذج إدخال بنصّ فوضوي. ابنِ النص line بحيث يكون بالضبط Coffee with Sam: $4.50 (food)، ثم اطبعه. استخدم المتغيّرات المعطاة: شذّب rawLabel واجعل حرفه الأول كبيرًا، واعرض cents بالدولار بمنزلتين عشريتين، وحوّل category إلى أحرف صغيرة. الـ template literal يُبقي هذا مقروءًا.
const trimmed = rawLabel.trim(); كي يكون الحرف الأول هو c لا مسافة.","trimmed[0].toUpperCase() + trimmed.slice(1) تجعل الحرف الأول كبيرًا. و(cents / 100).toFixed(2) تعطي "4.50".","اجمع كل شيء بعلامات backtick: `${label}: $${price} (${category.toLowerCase()})`."],"explanation":"كل method من methods النصوص تُرجع نصًا جديدًا، لذلك يخزّن الحل كل خطوة باسم خاص بها: trimmed، ثم label. ومن المهم أن يأتي التشذيب أولًا، لأن الفهرس 0 في النص الخام مسافة. تحوّل toFixed(2) القيمة 4.5 إلى النص "4.50"، وهو ما يتوقّع الناس رؤيته في المبالغ المالية. ثم يُقرأ الـ template literal كأنه المخرجات نفسها؛ فعلامة $ الأولى في $${price} علامة دولار حرفية، والثانية تبدأ الإدراج.
line يساوي بالضبط “Coffee with Sam: $4.50 (food)”","logged":"يطبع السطر"}},"words":634,"readMinutes":4}