💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!

Cập nhật: 31 tháng 5 năm 2026

Template Literal | Hướng dẫn và bài tập

📌

Kết luận

Dùng Template Literal để nhúng biến vào chuỗi một cách tự nhiên

Bằng cách bao quanh chuỗi bằng dấu backtick (), bạn có thể dùng cú pháp ${biến} để chèn giá trị.
📝 Mã thực tế tại đây
const name = 'An';
console.log(`Chào bạn, ${name}!`);

So sánh với cách viết cũ

Phương phápCách viết
Dùng dấu +'Chào bạn, ' + name + '!'
Template Literal\Chào bạn, ${name}!\
Template Literal giúp mã nguồn sạch sẽ, dễ đọc và dễ bảo trì hơn, đặc biệt là khi chuỗi văn bản dài và có nhiều biến.

Tổng kết

- Dùng dấu backtick + ${}` để nhúng biến - Dễ đọc hơn nhiều so với việc nối chuỗi bằng dấu +

Hãy thử trong phần bài tập

Hãy tạo một câu chào bằng Template Literal nhé.

🧪 Thử nghiệm tại đây

Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.

Thử ngay

■ Bài tập thực hành

Sử dụng biến name ('An') để xuất chuỗi 'Chào bạn, An' dùng template literal.

Gợi ý khi gặp khó khăn

Sử dụng dấu backtick ` và ${name}.

15pt

Template Literal

Sử dụng biến name ('An') để xuất chuỗi 'Chào bạn, An' dùng template literal.

Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.

Lộ trình học · Toàn bộ bài giảng

Đi sâu bài tập này

"Template Literal" là bài JavaScript mức 入門. Sử dụng biến name ('An') để xuất chuỗi 'Chào bạn, An' dùng template literal. Chạy ngay trên trình duyệt với kiểm tra tự động.

Template literal giúp nhúng biến vào chuỗi một cách dễ dàng và dễ đọc hơn. Mẫu tương tự xuất hiện trong review code và UI thực tế.

Kết hợp với lộ trình js-basic. Bài #46 củng cố kỹ năng js-basic.

Quy trình từng bước

  1. Đọc bài giải thích và nắm mục tiêu "Template Literal"
  2. Kiểm tra cột JavaScript và bắt đầu từ mã mẫu
  3. Mở gợi ý nếu bí, so sánh với lời giải
  4. Bấm Chạy để xem preview/console
  5. Hệ thống kiểm tra có chứa: こんにちは, 太郎.
  6. Sau khi đúng, làm bài trước/sau trong cùng danh mục

Cách đọc mã giải

JavaScript dùng: console.log. Kiểm tra typo và await. Giải thích: Template literal giúp nhúng biến vào chuỗi một cách dễ dàng và dễ đọc hơn. Gợi ý: Sử dụng dấu backtick ` và ${name}.

Ứng dụng thực tế & nghề nghiệp

JS cơ bản trước React/Vue/Node. Biến, hàm, mảng xuất hiện hàng ngày trong review.

Lỗi thường gặp

  • Bỏ qua gợi ý: Sử dụng dấu backtick ` và ${name}.
  • Gõ sai console.log
  • So sánh == giữa chuỗi và số
  • Gán lại const
  • Thiếu dấu chấm phẩy

Xử lý sự cố

Preview không đổi sau khi chạy
Kiểm tra bạn sửa đúng cột JavaScript và đã bấm Chạy.
Đúng nhưng không pass
Hệ thống kiểm tra có chứa: こんにちは, 太郎. Kiểm tra typo và thẻ đóng.
Lỗi trên console
Mở DevTools Console, kiểm tra ngoặc và dấu ngoặc kép.
Khó gõ trên điện thoại
Dùng màn ngang hoặc mở cùng URL trên PC.

Mẹo phỏng vấn & portfolio

  • Giải thích kỹ thuật trong "Template Literal" bằng lời của bạn trong 30 giây
  • Luyện mô tả từng dòng mã giải trên bảng trắng
  • Chuẩn bị một phương án thay thế và lý do chọn cách hiện tại

Thuật ngữ

const
Biến không gán lại.
function
Khối mã tái sử dụng.
console.log
In ra console devtools.

Từ khóa trên trang này

Trang này là bài tập miễn phí về Template Literal cho từ khóa: Template Literal, js-basic, 入門, console.log, template literal.

Công cụ liên quan

Lộ trình học

Lộ trình học →

Bài tập liên quan

Câu hỏi thường gặp (FAQ)

Template Literal có miễn phí không?

Bài tập này hoàn toàn miễn phí và chạy ngay trên trình duyệt. Không cần đăng ký hay thẻ tín dụng.

Độ khó và thời gian?

"Template Literal" ở mức "入門". Đọc hướng dẫn trước; người mới thường hoàn thành trong 30 phút. Mỗi bài khoảng 5–15 phút. Dùng gợi ý, sau đó xem lời giải nếu bí.

Sau khi đúng làm gì?

Sau khi đúng, dùng liên kết bài tiếp theo. Hoàn thành danh mục rồi sang lộ trình học.

Làm trên điện thoại được không?

Chạy trên trình duyệt di động, nhưng gõ mã trên máy tính tiện hơn.

Bài tập khác ở đâu?

Danh sách bài tập: /vi/learn/ có bộ lọc danh mục.

Điểm cần nhớ trong "Template Literal"?

Template literal giúp nhúng biến vào chuỗi một cách dễ dàng và dễ đọc hơn. Gợi ý: Sử dụng dấu backtick ` và ${name}.

Vị trí danh mục js-basic?

JS cơ bản trước React/Vue/Node. Biến, hàm, mảng xuất hiện hàng ngày trong review.

Các bước cụ thể cho "Template Literal"?

1. Đọc bài giải thích và nắm mục tiêu "Template Literal"
2. Kiểm tra cột JavaScript và bắt đầu từ mã mẫu
3. Mở gợi ý nếu bí, so sánh với lời giải
4. Bấm Chạy để xem preview/console
5. Hệ thống kiểm tra có chứa: こんにちは, 太郎.
6. Sau khi đúng, làm bài trước/sau trong cùng danh mục

Cách đọc mã giải?

JavaScript dùng: console.log. Kiểm tra typo và await.

Giải thích: Template literal giúp nhúng biến vào chuỗi một cách dễ dàng và dễ đọc hơn.

Gợi ý: Sử dụng dấu backtick ` và ${name}.

Khi gặp sự cố?

Preview không đổi sau khi chạy → Kiểm tra bạn sửa đúng cột JavaScript và đã bấm Chạy.
Đúng nhưng không pass → Hệ thống kiểm tra có chứa: こんにちは, 太郎. Kiểm tra typo và thẻ đóng.
Lỗi trên console → Mở DevTools Console, kiểm tra ngoặc và dấu ngoặc kép.
Khó gõ trên điện thoại → Dùng màn ngang hoặc mở cùng URL trên PC.

Liên quan nghề nghiệp?

Giải thích kỹ thuật trong "Template Literal" bằng lời của bạn trong 30 giây Luyện mô tả từng dòng mã giải trên bảng trắng Chuẩn bị một phương án thay thế và lý do chọn cách hiện tại

🛠️ Công cụ đề xuất

Nén ảnh & WebP

Làm nhẹ hình ảnh an toàn với xử lý local. Tăng tốc độ web tối đa.

Dùng thử →

Định dạng & Kiểm tra JSON

Định dạng JSON dễ đọc trong tích tắc. Kiểm tra lỗi cú pháp nhanh chóng.

Dùng thử →

Giải mã & Xác minh JWT

Phân tích nội dung token an toàn. Kiểm tra thời hạn và các xác nhận.

Dùng thử →