نصوص جافاسكريبت

Q: ما الفرق بين indexOf و includes ؟

indexOf يُرجع موضع بداية النص الفرعي (أو -1 إذا لم يُعثر عليه)، بينما includes يُرجع قيمة منطقية. إذا كنت تهتم فقط بوجود نص فرعي، includes أكثر بديهية; إذا كنت تحتاج الموضع الدقيق، استخدم indexOf .

Q: لماذا replace يستبدل فقط أول تطابق؟

replace يستبدل فقط أول تطابق افتراضيًا. لاستبدال جميع التطابقات، استخدم replaceAll ، أو استخدم تعبيرًا نمطيًا بعلامة g : str.replace(/abc/g, 'xyz') .

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

إنشاء النصوص

توفر جافاسكريبت ثلاث طرق لإنشاء النصوص: علامات اقتباس مفردة، وعلامات اقتباس مزدوجة، وعلامات اقتباس عكسية.

HTML

<script>
let a = 'مرحبا';     // علامات اقتباس مفردة
let b = "عالم";     // علامات اقتباس مزدوجة
let c = `مرحبا`;     // علامات اقتباس عكسية
</script>

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

💡 في مشاريع الفريق، التزم بأسلوب علامات اقتباس واحد (مفردة أو doubles) في جميع أنحاء قاعدة الكود للاتساق.

النصوص غير قابلة للتغيير

هذا فخ يصطدم به العديد من المطورين: بمجرد إنشاء النص، لا يمكن تغيير محتواه. كل أسلوب تستدعيه يُرجع نصًا جديدًا دون تعديل الأصلي.

HTML

<script>
let str = 'مرحبا';
str[0] = 'M';       // يفشل بصمت — str لا يزال 'مرحبا'
str.toUpperCase();   // يُرجع 'مرحبا'، لكن str نفسه لم يتغير
let upper = str.toUpperCase(); // صحيح — احفظ القيمة المُرجعة في متغير
</script>

تذكر: أساليب النصوص لا تُعدّل الأصل أبدًا. يجب أن تعيّن القيمة المُرجعة إلى متغير جديد.

الأساليب الشائعة

تحتوي جافاسكريبت على العديد من أساليب النصوص، لكن هذه هي التي ستستخدمها يوميًا:

الأسلوب	الغرض	مثال
`length`	الحصول على الطول	`'abc'.length` → `3`
`indexOf()`	إيجاد موضع النص الفرعي	`'hello'.indexOf('ll')` → `2`
`slice()`	استخراج نص فرعي	`'hello'.slice(1,3)` → `'el'`
`replace()`	استبدال المحتوى	`'قط'.replace('ق','ب')` → `'بت'`
`toUpperCase()`	تحويل إلى أحرف كبيرة	`'hi'.toUpperCase()` → `'HI'`
`toLowerCase()`	تحويل إلى أحرف صغيرة	`'HI'.toLowerCase()` → `'hi'`
`trim()`	إزالة المسافات البادئة/اللاحقة	`' hi '.trim()` → `'hi'`
`split()`	تقسيم إلى مصفوفة بفاصل	`'a,b'.split(',')` → `['a','b']`
`includes()`	التحقق من وجود نص فرعي	`'hello'.includes('ell')` → `true`
`startsWith()`	التحقق من بداية النص بـ	`'hello'.startsWith('he')` → `true`
`endsWith()`	التحقق من نهاية النص بـ	`'hello'.endsWith('lo')` → `true`

مثال: أساليب النصوص الشائعة

HTML

<!DOCTYPE html>
<html>
<body>
  <h2>أساليب النصوص الشائعة</h2>
  <p id="output"></p>
  <script>
    let str = '  مرحبا، جافاسكريبت!  ';
    let result = '';
    result += 'الأصلي: "' + str + '"<br>';
    result += 'length: ' + str.length + '<br>';
    result += 'trim: "' + str.trim() + '"<br>';
    result += 'indexOf("Java"): ' + str.indexOf('Java') + '<br>';
    result += 'slice(2,7): "' + str.slice(2, 7) + '"<br>';
    result += 'includes("Script"): ' + str.includes('Script') + '<br>';
    result += 'startsWith("  M"): ' + str.startsWith('  M') + '<br>';
    result += 'toUpperCase: ' + str.toUpperCase() + '<br>';
    result += 'replace("جافاسكريبت","عالم"): ' + str.replace('جافاسكريبت', 'عالم') + '<br>';
    document.getElementById('output').innerHTML = result;
  </script>
</body>
</html>

▶ جرّب الكود

لاحظ أن slice(start, end) يُستخرج من start وحتى دون تضمين end. هذا متسق مع معظم اللغات — ستعتاد عليها.

النصوص القوالب

النصوص المنشأة بعلامات الاقتباس العكسية (`) تسمى النصوص القوالب. لديها ميزتان قاتلتان:

دعم multi-line — لا حاجة لـ \n; فقط اضغط Enter
الاستبدال — أدرج المتغيرات أو التعبيرات بـ ${variable}

HTML

<!DOCTYPE html>
<html lang="ar">
<head><meta charset="UTF-8"><title>النصوص القوالب</title></head>
<body>
<div id="output"></div>
<script>
let name = 'سارة';
let age = 20;

// الطريقة القديمة: ربط، سهل أن تفوتك علامة زائد
let msg1 = 'اسمي ' + name + '، عمري ' + age + ' سنة.';

// الطريقة الجديدة: النصوص القوالب، أنظف بكثير
let msg2 = `اسمي ${name}، عمري ${age} سنة.`;

document.getElementById('output').innerHTML =
  '<strong>الربط:</strong>' + msg1 + '<br>' +
  '<strong>النص القالب:</strong>' + msg2;
</script>
</body>
</html>

مثال: النصوص القوالب مقابل الربط

HTML

<!DOCTYPE html>
<html>
<body>
  <h2>مقارنة النصوص القوالب</h2>
  <p id="output"></p>
  <script>
    let name = 'أحمد';
    let city = 'القاهرة';
    let hobby = 'الرسم';

    let old = 'اسمي ' + name + '، أعيش في ' + city + '، وأستمتع بـ ' + hobby + '.';
    let modern = `اسمي ${name}، أعيش في ${city}، وأستمتع بـ ${hobby}.`;

    let html = '<strong>الربط:</strong>' + old + '<br><br>';
    html += '<strong>النص القالب:</strong>' + modern + '<br><br>';

    let a = 5, b = 3;
    html += `<strong>التعابير تعمل أيضًا:</strong>${a} + ${b} = ${a + b}<br>`;
    html += `<strong>استدعاءات الأساليب أيضًا:</strong>${name.toUpperCase()}`;

    document.getElementById('output').innerHTML = html;
  </script>
</body>
</html>

▶ جرّب الكود

💡 عندما يكون لديك العديد من المتغيرات، النصوص القوالب أكثر قراءة بعشر مرات من الربط. لا تتردد — فضّل علامات الاقتباس العكسية في كودك اليومي.

أحرف الهروب

بعض الأحرف لها معنى خاص داخل النصوص. لإخراجها حرفياً، استخدم الشرطة المائلة العكسية \ للهروب:

حرف الهروب	المعنى
`\n`	سطر جديد
`\t`	tab
`\\`	الشرطة المائلة العكسية نفسها
`\"`	علامة اقتباس مزدوجة
`\'`	علامة اقتباس مفردة

مثال: أحرف الهروب

HTML

<!DOCTYPE html>
<html>
<body>
  <h2>عرض أحرف الهروب</h2>
  <p id="output"></p>
  <script>
    let s1 = 'سطر أول\nسطر ثاني';
    let s2 = 'اسم\tعمر\tمدينة';
    let s3 = 'المسار: C:\\Users\\Admin';
    let s4 = 'قال: "مرحبا!"';
    let s5 = 'إنه يوم جميل';

    let html = '';
    html += '<strong>\\n سطر جديد:</strong><pre>' + s1 + '</pre>';
    html += '<strong>\\t tab:</strong><pre>' + s2 + '</pre>';
    html += '<strong>\\\\ شرطة مائلة عكسية:</strong>' + s3 + '<br>';
    html += '<strong>\\" علامة اقتباس مزدوجة:</strong>' + s4 + '<br>';
    html += "<strong>\\' علامة اقتباس مفردة:</strong>" + s5 + '<br>';

    document.getElementById('output').innerHTML = html;
  </script>
</body>
</html>

▶ جرّب الكود

⚠️ الشرطة المائلة العكسية نفسها يجب هروبها. عند كتابة مسارات Windows مثل C:\Users، تحتاج C:\\Users — نسيان الهروب هو مصدر شائع للأخطاء.

ربط النصوص مقابل النصوص القوالب

كلا الأسلوبين يعملان للحالات البسيطة، لكن الريع يصبح مؤلمًا بسرعة مع زيادة عدد المتغيرات:

HTML

<script>
// ربط: سهل أن تفوتك أو تضاعف علامات الزائد
let html = '<div class="' + cls + '">' + title + '</div>';

// نص قالب: واضح من النظرة الأولى
let html = `<div class="${cls}">${title}</div>`;
</script>

مثال: إنشاء محتوى HTML

HTML

<!DOCTYPE html>
<html>
<body>
  <h2>إنشاء محتوى بالنصوص القوالب</h2>
  <div id="output"></div>
  <script>
    let products = [
      { name: 'لابتوب', price: 999 },
      { name: 'ماوس', price: 29 },
      { name: 'كيبورد', price: 79 }
    ];

    let html = '<ul>';
    for (let p of products) {
      html += `<li>${p.name} - $${p.price.toFixed(2)}</li>`;
    }
    html += '</ul>';

    document.getElementById('output').innerHTML = html;
  </script>
</body>
</html>

▶ جرّب الكود

استخدام النصوص القوالب داخل الحلقات لإنشاء HTML شائع للغاية في التطوير الحقيقي وأكثر متعة من الربط.

📖 ملخص

يمكن إنشاء النصوص بعلامات اقتباس مفردة، أو doubles، أو عكسية — فضّل العكسية
النصوص غير قابلة للتغيير; جميع الأساليب تُرجع نصوصًا جديدة دون تعديل الأصلي
slice(start, end) يتضمن start لكن يستثني end; indexOf يُرجع -1 إذا لم يُعثر عليه
النصوص القوالب تستخدم ${} للاستبدال وتدعم التعبيرات واستدعاءات الأساليب
أحرف الهروب تبدأ بـ \ — \n لسطر جديد، \\ لشرطة مائلة عكسية حرفية
trim() مفيد بشكل خاص لمعالجة مدخلات المستخدم — لا تنسَ استخدامه

❓ أسئلة شائعة

س ما الفرق بين indexOf وincludes؟

ج indexOf يُرجع موضع بداية النص الفرعي (أو -1 إذا لم يُعثر عليه)، بينما includes يُرجع قيمة منطقية. إذا كنت تهتم فقط بوجود نص فرعي، includes أكثر بديهية; إذا كنت تحتاج الموضع الدقيق، استخدم indexOf.

س لماذا replace يستبدل فقط أول تطابق؟

ج replace يستبدل فقط أول تطابق افتراضيًا. لاستبدال جميع التطابقات، استخدم replaceAll، أو استخدم تعبيرًا نمطيًا بعلامة g: str.replace(/abc/g, 'xyz').

س أيهما يجب استخدامه — علامات اقتباس مفردة أم doubles؟

ج هما متطابقتان وظيفيًا. فقط كن متسقًا داخل فريقك. معظم المشاريع تستخدم علامات الاقتباس المفردة افتراضيًا وتنتقل إلى doubles عندما يحتوي النص نفسه على علامات اقتباس مفردة.

📝 تمارين

اكتب برنامجًا يأخذ جملة كمدخل ويُخرج عدد الكلمات (تلميح: استخدم split بالمسافات، ثم length).
اكتب برنامجًا يحول النص " Hello World " إلى أحرف صغيرة بالكامل، مقصوصة "hello world" باستخدام trim وtoLowerCase.
استخدم نصًا قالبًا لإنشاء مقتطف HTML تعريف يحتوي اسمك وعمرك وهواياتك (باستخدام المتغيرات)، واعرضه على الصفحة.

404 Not Found

نصوص جافاسكريبت

إنشاء النصوص

النصوص غير قابلة للتغيير

الأساليب الشائعة

مثال: أساليب النصوص الشائعة

النصوص القوالب

مثال: النصوص القوالب مقابل الربط

أحرف الهروب

مثال: أحرف الهروب

ربط النصوص مقابل النصوص القوالب

مثال: إنشاء محتوى HTML

📖 ملخص

❓ أسئلة شائعة

📝 تمارين