كيف تقوم بتنسيق سلسلة في JavaScript؟

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

يمكنك استخدام طرق أو عوامل محددة لدمج السلاسل. يمكنك حتى إجراء عمليات محددة لتحديد السلسلة التي تظهر وأين ومتى.

---

---

اجعل فيديو اليوم

تعرف على كيفية تنسيق سلاسل JavaScript باستخدام طرق التسلسل والقوالب الحرفية.

تسلسل السلسلة

يسمح لك JavaScript بتسلسل السلاسل باستخدام عدة طرق. نهج مفيد هو concat () طريقة. تستخدم هذه الطريقة سلسلتين أو أكثر. يستخدم سلسلة استدعاء واحدة ويأخذ سلسلة أو أكثر كوسيطات.

const firstName = "John"; 
const lastName = "Doe"; 
  
let stringVal; 
  
stringVal = firstName.concat(" ", lastName); 
console.log(stringVal); 

هنا ، ينضم concat إلى وسيطات السلسلة (مسافة فارغة و lastName) إلى سلسلة الاستدعاء (الاسم الأول). ثم يخزن الكود السلسلة الجديدة الناتجة في متغير (stringVal) و يطبع القيمة الجديدة إلى وحدة تحكم المتصفح :

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

const firstName = "John"; 
const middleName = "Mike"; 
const lastName = "Doe"; 
  
let stringVal; 
  
stringVal = firstName + " " + middleName + " " + lastName; 
console.log(stringVal); 

يطبع الكود أعلاه الإخراج التالي إلى وحدة التحكم:

---

---

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

كيفية استعادة خطك

const firstName = "John"; 
const lastName = "Doe"; 
  
let stringVal; 
  
stringVal = firstName; 
stringVal += " "; 
stringVal += lastName; 
  
console.log(stringVal); 

تقوم هذه الشفرة بإلحاق مساحة فارغة وقيمة متغير lastName بمتغير firstName ، مما ينتج عنه الإخراج التالي:

---

---

قالب حرفي

القوالب الحرفية هي ميزة ES6 تتيح لك تنسيق سلاسل JavaScript. يستخدم القالب الحرفي زوجًا من backticks (`) لعرض السلاسل. تسمح لك طريقة تنسيق السلسلة هذه بعرض سلاسل متعددة الأسطر أنظف في JavaScript.

let html; 
  
html = `<ul> 
       <li> Name: John Doe </li> 
       <li> Age: 24 </li> 
       <li> Job: Software Engineer </li> 
       </ul>`; 
  
document.body.innerHTML = html; 

يستخدم كود JavaScript أعلاه لغة البرمجة لطباعة قائمة من ثلاثة عناصر في المتصفح:

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

let html; 
  
html = "<ul><li>Name: John Doe</li><li>Age: 24</li><li>Job: Software Engineer</li></ul>"; 
  
document.body.innerHTML = html; 

سلسلة الاستيفاء

تتيح لك القوالب الحرفية استخدام التعبيرات في سلاسل JavaScript الخاصة بك من خلال عملية تسمى الاستيفاء. باستخدام استيفاء السلسلة ، يمكنك تضمين تعبيرات أو متغيرات في السلاسل الخاصة بك باستخدام $ {تعبير} نائب. هذا هو المكان الذي تصبح فيه قيمة حرفية قالب جافا سكريبت واضحة حقًا.

let userName = "Jane Doe"; 
let age = 21; 
let job = "Web Developer"; 
let experience = 3; 
  
let html; 
  
html = `<ul> 
       <li> Name: ${userName} </li> 
       <li> Age: ${age} </li> 
       <li> Job Title: ${job} </li> 
       <li> Years of Experience: ${experience} </li> 
       <li> Developer Level: ${experience < 5 ? "Junior to Intermediate" : "Senior"} </li> 
       </ul>`; 
  
document.body.innerHTML = html; 

ينتج الكود أعلاه الإخراج التالي في وحدة التحكم:

الحجج الأربع الأولى من $ {تعبير} العنصر النائب عبارة عن متغيرات سلسلة ، لكن العنصر الخامس عبارة عن تعبير شرطي. يعتمد التعبير على قيمة أحد المتغيرات (التجربة) ، لإملاء ما يجب أن يعرضه في المتصفح.

هل من الآمن حذف ملفات إعداد الويندوز

تنسيق العناصر على صفحة الويب الخاصة بك باستخدام JavaScript

بصرف النظر عن ارتباطها الوظيفي بتطوير صفحات الويب ، تعمل JavaScript مع HTML للتأثير على تصميم وتخطيط صفحة الويب. يمكنه معالجة النص الذي يظهر على صفحة ويب ، كما هو الحال مع القوالب الحرفية.

يمكنه حتى تحويل HTML إلى صور وعرضها على صفحة ويب.