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
+.
العربية
طريقة أنظف لبناء السلاسل النصية
- غلف سلسلة نصية بـ علامات الجذر
`ويمكنك إدراج القيم مباشرة عبر${...}. - هذا مستند نصي قالب (template literal) — أنظف بكثير من الربط باستخدام الكثير من
+.
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 ${ }. · استخدم سلسلة قالبية لأخرج Total: 10، بحساب 10 كـ 5 * 2 داخل ${ }.
Click Run to see the output here. · اضغط تشغيل لرؤية المخرجات هنا.