Template literals · מחרוזות תבנית
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · עמוד זה דורש דפדפן עדכני (תומך ב-SharedArrayBuffer). אנא עדכן את Chrome, Edge, Firefox או Safari לגרסה העדכנית ביותר.
English
A cleaner way to build strings
- Wrap a string in backticks
`and you can drop values straight in with${...}. - This is a template literal — much tidier than joining with lots of
+.
עברית
דרך נקייה יותר לבניית מחרוזות
- עטוף מחרוזת ב-סימני קריפה
`ותוכל להכניס ערכים ישירות באמצעות${...}. - זוהי מחרוזת תבנית — הרבה נקייה יותר מאשר חיבור עם הרבה
+.
let name = "Ada";
let age = 15;
console.log(`${name} is ${age}`); // → Ada is 15
English
Any expression fits inside ${ }
- Whatever you write inside
${...}is worked out first, then dropped into the string.
עברית
כל ביטוי מתאים לתוך ${ }
- מה שכתוב בתוך
${...}מוערך תחילה, ואז מוכנס למחרוזת.
let a = 3;
let b = 4;
console.log(`${a} + ${b} = ${a + b}`); // → 3 + 4 = 7
English
Same string, two ways
+and a template literal can build exactly the same text.- In backticks, spaces and punctuation stay where you type them, so a missing space is easy to see.
עברית
אותו טקסט, בשתי דרכים
+ומחרוזת תבנית יכולים ליצור בדיוק את אותו טקסט.- בקריפות, רווחים וסימני פיסוק נשארים שם שכתבת אותם, כך שקלות לראות רווח חסר.
let item = "pen";
let price = 3;
console.log("A " + item + " costs " + price + " yuan."); // → A pen costs 3 yuan.
console.log(`A ${item} costs ${price} yuan.`); // → A pen costs 3 yuan.
English
Watch out
- Backticks
`are not the same as quotes'or".${...}only works inside backticks. - Bonus: a backtick string can span several lines — handy for longer messages.
עברית
שימו לב
- קריפות
`אינן זהות לתווים הפנייה'או".${...}עובד רק בתוך קריפות. - בונוס: מחרוזת בקריפות יכולה להשתרע על מספר שורות — נוח הודעות ארוכות.
English
Common mistakes
- Template literals use backticks and
${...}:`Hi ${name}`, not quotes. - Inside
${...}you can put any expression.
עברית
טעויות נפוצות
- מחרוזות תבנית משתמשות בקריפות ו-
${...}:`Hi ${name}`, ולא תווים פנייה. - בתוך
${...}ניתן להכניס כל ביטוי.
English
Now you try
- Use backticks and
${...}. - Press Check answer to test it.
עברית
כעת תנסו בעצמכם
- השתמש בקריפות ו-
${...}. - לחץ על בדיקת תשובה כדי לבדוק אותה.
let name = "Sam". Use a template literal (backticks) to log Hello, Sam!. · let name = "Sam". השתמש במחרוזת תבנית (סימני גרסה) כדי להוציא פלט ל-Hello, Sam!.
Click Run to see the output here. · לחץ על הרץ כדי לראות את התוצא כאן.
a is 3 and b is 4. Use a template literal to log 3 + 4 = 7 (put a + b inside ${ }). · a הוא 3 ו-b הוא 4. השתמש במחרוזת תבנית כדי להוציא פלט ל-3 + 4 = 7 (הנח את a + b בתוך ${ }).
Click Run to see the output here. · לחץ על הרץ כדי לראות את התוצא כאן.
Use a template literal to log Total: 10, working out the 10 as 5 * 2 inside ${ }. · השתמש ב-literal טמפלייט כדי להדפיס Total: 10, תוך חישוב ה-10 כ-5 * 2 בתוך ${ }.
Click Run to see the output here. · לחץ על הרץ כדי לראות את התוצא כאן.