Template literals
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Trang này cần trình duyệt gần đây (hỗ trợ SharedArrayBuffer). Vui lòng cập nhật Chrome, Edge, Firefox hoặc Safari lên phiên bản mới nhất.
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
+.
Tiếng Việt
Cách gọn gàng hơn để xây dựng chuỗi
- Bọc chuỗi trong dấu backtick
`và bạn có thể chèn giá trị trực tiếp qua${...}. - Đây là chuỗi mẫu — gọn gàng hơn nhiều so với việc nối bằng nhiều
+.
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.
Tiếng Việt
Bất kỳ biểu thức nào cũng phù hợp bên trong ${ }
- Những gì bạn viết bên trong
${...}sẽ được tính toán trước, sau đó chèn vào chuỗi.
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.
Tiếng Việt
Cùng một chuỗi, hai cách khác nhau
+và chuỗi mẫu có thể tạo ra chính xác cùng một đoạn văn bản.- Trong dấu backtick, khoảng trắng và dấu câu giữ nguyên vị trí bạn gõ, nên thiếu khoảng trắng rất dễ nhận thấy.
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.
Tiếng Việt
Lưu ý
- Dấu backtick
`không giống như dấu ngoặc kép'hay".${...}chỉ hoạt động bên trong dấu backtick. - Bonus: chuỗi backtick có thể trải dài nhiều dòng — hữu ích cho tin nhắn dài.
English
Common mistakes
- Template literals use backticks and
${...}:`Hi ${name}`, not quotes. - Inside
${...}you can put any expression.
Tiếng Việt
Lỗi thường gặp
- Chuỗi mẫu sử dụng dấu backtick và
${...}:`Hi ${name}`, không dùng dấu ngoặc kép. - Bên trong
${...}, bạn có thể đặt bất kỳ biểu thức nào.
English
Now you try
- Use backticks and
${...}. - Press Check answer to test it.
Tiếng Việt
Bây giờ bạn thử
- Sử dụng dấu backtick và
${...}. - Nhấn Kiểm tra đáp án để thử nghiệm.
let name = "Sam". Use a template literal (backticks) to log Hello, Sam!. · let name = "Sam". Dùng một template literal (backticks) để log Hello, Sam!.
Click Run to see the output here. · Nhấn Chạy để xem kết quả ở đây.
a is 3 and b is 4. Use a template literal to log 3 + 4 = 7 (put a + b inside ${ }). · a là 3 và b là 4. Dùng template literal để log 3 + 4 = 7 (đặt a + b bên trong ${ }).
Click Run to see the output here. · Nhấn Chạy để xem kết quả ở đây.
Use a template literal to log Total: 10, working out the 10 as 5 * 2 inside ${ }. · Dùng template literal để log Total: 10, tính toán 10 là 5 * 2 bên trong ${ }.
Click Run to see the output here. · Nhấn Chạy để xem kết quả ở đây.