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

آخر تحديث: 2026-10-13

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

دوال النصوص ذات صلة：toLowerCase() toUpperCase() startsWith() includes() replaceAll endsWith() indexOf() replace() slice() split() trim()

1. إنشاء النصوص

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

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>

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

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

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

الأسلوب	الغرض	مثال
`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`

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

▶ جرّب الكود

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

3. النصوص القوالب

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

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

HTML

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<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>

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

▶ جرّب الكود

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

4. أحرف الهروب

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

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

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

▶ جرّب الكود

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

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

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

HTML

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

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

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

▶ جرّب الكود

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

دوال النصوص ذات صلة：toLowerCase() toUpperCase() startsWith() includes() replaceAll endsWith() indexOf() replace() slice() split() trim()

❓ أسئلة شائعة

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

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

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

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

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

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

📖 ملخص

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

📝 تمارين

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

فريق Web-Tutorial التقني

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

من نحن