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

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

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

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

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

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

const firstName = "ג'ון";
const שם משפחה = "צְבִיָה";
לתת stringVal;
stringVal = firstName.concat("", שם משפחה);
לְנַחֵם.log (stringVal);

כאן, concat מצטרף לארגומנטים של המחרוזת (רווח ריק ו-lastName) למחרוזת הקוראת (firstName). לאחר מכן הקוד מאחסן את המחרוזת החדשה שנוצרה במשתנה (stringVal) ו

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

const firstName = "ג'ון";
const middleName = "מִיקרוֹפוֹן";
const שם משפחה = "צְבִיָה";
לתת stringVal;
stringVal = firstName + "" + שם אמצעי + "" + שם משפחה;
לְנַחֵם.log (stringVal);

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

גישה שלישית לשרשרת מחרוזות JavaScript שלך דורשת שימוש בסימן פלוס ושוויון. שיטה זו מאפשרת לך להוסיף מחרוזת חדשה לקצה של מחרוזת קיימת.

const firstName = "ג'ון";
const שם משפחה = "צְבִיָה";
לתת stringVal;
stringVal = firstName;
stringVal += "";
stringVal += lastName;
לְנַחֵם.log (stringVal);

קוד זה מוסיף רווח ריק ואת הערך של המשתנה lastName למשתנה firstName, ומייצר את הפלט הבא:

תבנית מילולית

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

לתת html;
html = `<ul>
<לי> שם: ג'ון דו </li>
<לי> גיל: 24 </li>
<לי> תפקיד: מהנדס תוכנה </li>
</ul>`;
מסמך.body.innerHTML = html;

קוד JavaScript לעיל משתמש HTML כדי להדפיס רשימה של שלושה פריטים בדפדפן:

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

לתת html;
html = "<ul><לי>שם: ג'ון דו</li><לי>גיל: 24</li><לי>תפקיד: מהנדס תוכנה</li></ul>";
מסמך.body.innerHTML = html;

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

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

תן שם משתמש = "ג'יין דו";
לתת גיל = 21;
תן לעבוד = "מפתח אינטרנט";
לתת ניסיון = 3;
לתת html;
html = `<ul>
<לי> שם: ${userName} </li>
<לי> גיל: ${age} </li>
<לי> שם המשרה: ${job} </li>
<לי> שנות ניסיון: ${experience} </li>
<לי> רמת מפתח: ${experience < 5? "ג'וניור עד בינוני": "בָּכִיר"} </li>
</ul>`;
מסמך.body.innerHTML = html;

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

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

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

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

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