איך מעצבים מחרוזת ב-JavaScript?

ב-JavaScript, מחרוזת היא קבוצה של תווים המוקפת בזוג מרכאות בודדות או כפולות. ישנן דרכים רבות לעצב מחרוזות ב-JavaScript.

כיצד להריץ תוכנות mac בחלונות

אתה יכול להשתמש בשיטות או אופרטורים ספציפיים כדי לשלב מחרוזות. אתה יכול אפילו לבצע פעולות ספציפיות כדי להחליט איזו מחרוזת תופיע איפה ומתי.

---

---

איפור של סרטון היום

למד כיצד לעצב את מחרוזות ה-JavaScript שלך באמצעות שיטות שרשור ותבניות מילוליות.

שרשור מחרוזות

JavaScript מאפשר לך לשרשר מחרוזות באמצעות מספר גישות. גישה שימושית היא concat() שיטה. שיטה זו משתמשת בשתי מחרוזות או יותר. הוא משתמש במחרוזת קורא בודדת ולוקח מחרוזת אחת או יותר כארגומנטים.

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

כאן, concat מצטרף לארגומנטים של המחרוזת (רווח ריק ו-lastName) למחרוזת הקוראת (firstName). לאחר מכן הקוד מאחסן את המחרוזת החדשה שנוצרה במשתנה (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. תבנית מילולית משתמשת בזוג סימנים לאחור (`) כדי להציג מחרוזות. שיטה זו של עיצוב מחרוזת מאפשרת לך להציג מחרוזות מרובות שורות נקיות יותר ב-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 לעיל משתמש HTML כדי להדפיס רשימה של שלושה פריטים בדפדפן:

כדי להשיג את אותו פלט ללא מילות תבנית (או לפני מילות תבנית), תצטרך להשתמש במרכאות. עם זאת, לא תוכל להרחיב את הקוד על פני מספר שורות כפי שאתה יכול עם מילות תבנית.

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

אינטרפולציה מחרוזת

מילות תבנית מאפשרות לך להשתמש בביטויים במחרוזות JavaScript שלך באמצעות תהליך שנקרא אינטרפולציה. עם אינטרפולציה של מחרוזות אתה יכול להטמיע ביטויים או משתנים במחרוזות שלך באמצעות ${expression} מציין מיקום. זה המקום שבו הערך של מילוליות תבנית 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; 

הקוד למעלה מייצר את הפלט הבא במסוף:

ארבעת הטיעונים הראשונים של ה ${expression} מציין מיקום הם משתני מחרוזת, אבל החמישי הוא ביטוי מותנה. הביטוי מסתמך על הערך של אחד המשתנים (ניסיון), כדי להכתיב מה עליו להציג בדפדפן.

עיצוב אלמנטים בדף האינטרנט שלך עם JavaScript

מלבד הקשר הפונקציונלי שלו לפיתוח דפי אינטרנט, JavaScript עובד עם HTML כדי להשפיע על העיצוב והפריסה של דף אינטרנט. זה יכול לתפעל את הטקסט שמופיע בדף אינטרנט, כפי שקורה עם מילות תבנית.

זה יכול אפילו להמיר HTML לתמונות ולהציג אותן בדף אינטרנט.