1. Tổng quan.
JavaScript Template Literals, hay còn gọi là template strings, là một tính năng trong JavaScript cho phép bạn tạo chuỗi một cách linh hoạt hơn bằng cách kết hợp các biểu thức JavaScript và các phần tử chuỗi vào cùng một chuỗi. Template Literals được bao quanh bởi cặp dấu backticks (`) thay vì dấu ngoặc kép hoặc nháy đơn.
Dưới đây là những điểm quan trọng về JavaScript Template Literals:
- Sử dụng dấu Backticks (`): Để tạo một Template Literal, bạn sử dụng dấu backticks (`) để bao quanh chuỗi.
- Kết hợp Biểu thức JavaScript: Bạn có thể kết hợp các biểu thức JavaScript vào chuỗi bằng cách sử dụng
${}. Ví dụ:${expression}. - Chèn Biểu thức JavaScript: Mọi biểu thức JavaScript nằm trong
${}sẽ được tính toán và chèn vào chuỗi kết quả.
const name = "Alice";
const age = 30;
// Sử dụng Template Literals
const greeting = `Xin chào, tôi là ${name} và tôi ${age} tuổi.`;
console.log(greeting);
// Kết quả: Xin chào, tôi là Alice và tôi 30 tuổi.Lợi ích của JavaScript Template Literals:
- Tạo chuỗi dễ đọc hơn và dễ hiểu hơn bởi vì bạn có thể kết hợp các phần tử chuỗi và biểu thức trong cùng một chuỗi.
- Loại bỏ sự cần thiết của các phép nối chuỗi (
+) trong code, làm cho code trở nên ngắn gọn và dễ bảo trì hơn. - Hỗ trợ xuống dòng và thụ động thụ động trình bày code chuỗi một cách dễ dàng hơn.
Template Literals là một tính năng mạnh mẽ trong JavaScript, giúp tạo ra code chuỗi linh hoạt và dễ đọc hơn trong ứng dụng web của bạn.
2. Các khái niệm quan trọng.
Các thuật ngữ này đều liên quan đến cùng một tính năng trong JavaScript, cho phép tạo và sử dụng chuỗi một cách linh hoạt hơn bằng cách sử dụng dấu backticks và chèn biểu thức JavaScript vào trong chuỗi.
- Template Literals: Đây là thuật ngữ chính thống để chỉ ra tính năng trong JavaScript cho phép bạn tạo chuỗi bằng cách sử dụng dấu backticks và chèn biểu thức JavaScript bên trong.
- Template Strings: “Template Strings” là một cách gọi thông dụng khác để mô tả cùng một tính năng, nói đến chuỗi được tạo bởi template literals.
- String Templates: “String Templates” cũng là một thuật ngữ sử dụng để chỉ ra cùng một ý tưởng, nó đề cập đến việc tạo chuỗi linh hoạt bằng cách kết hợp các phần tử chuỗi và biểu thức.
- Back-Ticks Syntax: “Back-Ticks Syntax” đề cập đến việc sử dụng dấu backticks (`) để bao quanh chuỗi trong template literals, một phần quan trọng của cú pháp cho tính năng này.
3. Back-Tics Syntax.
Cú pháp “Back-Ticks” (dấu nháy ngược) là cách sử dụng dấu back-ticks (`) thay vì dấu ngoặc kép (“”) để định nghĩa một chuỗi:
<html>
<body>
<p id="demo"></p>
<script>
let text = `Hello world!`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>Bằng cách sử dụng dấu back-ticks, bạn có thể dễ dàng tạo ra chuỗi có tính linh hoạt hơn, đặc biệt là khi bạn cần bao gồm biến hoặc biểu thức trong chuỗi.
Hello world!4. Quotes Inside Strings.
Với template literals trong JavaScript, bạn có thể sử dụng cả dấu nháy đơn (”) và dấu nháy kép (“”) bên trong một chuỗi một cách dễ dàng:
<html>
<body>
<p id="demo"></p>
<script>
let text = `He's often called "Johnny"`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>Ví dụ trên cho thấy rằng bạn có thể sử dụng cả dấu nháy đơn và dấu nháy kép bên trong chuỗi được định nghĩa bằng template literals.
He's often called "Johnny"5. Multiline Strings.
Template literals trong JavaScript cho phép bạn tạo chuỗi trên nhiều dòng một cách dễ dàng, mà không cần sử dụng các ký tự thoát hoặc các dấu ngoặc kép kết hợp:
<html>
<body>
<p id="demo"></p>
<script>
let text =
`The quick
brown fox
jumps over
the lazy dog`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>Khi sử dụng template literals, bạn có thể tạo các chuỗi đa dòng một cách rõ ràng và dễ đọc hơn, đặc biệt là khi bạn muốn bao gồm nhiều dòng văn bản trong một chuỗi.
The quick brown fox jumps over the lazy dog6. Interpolation.
String interpolation là một tính năng quan trọng của template literals trong JavaScript, cho phép bạn chèn biến và biểu thức vào chuỗi một cách dễ dàng và rõ ràng. Cú pháp sử dụng là ${...}.
let name = "Alice";
let age = 30;
let greeting = `Xin chào, tôi là ${name} và tôi ${age} tuổi.`;Trong ví dụ này, biến name và age được chèn vào chuỗi bằng cách sử dụng string interpolation, giúp tạo ra chuỗi kết quả với giá trị của biến và biểu thức được tính toán. String interpolation là một cách tiện lợi để tạo các chuỗi động trong JavaScript.
7. Variable Substitutions.
Template literals cho phép bạn sử dụng biến trong chuỗi một cách dễ dàng, và chúng sẽ được thay thế bằng giá trị của biến tương ứng. Điều này giúp tạo ra các chuỗi có sự linh hoạt cao, đặc biệt là khi bạn muốn kết hợp nhiều biến trong chuỗi.
<html>
<body>
<p id="demo"></p>
<script>
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>Khi bạn sử dụng template literals và string interpolation, các biến được đặt trong ${} sẽ được thay thế bằng giá trị tương ứng của biến đó.
Welcome John, Doe!8. Expression Substitution.
Trong template literals của JavaScript, bạn có thể sử dụng biểu thức (expressions) bên trong chuỗi để tính toán giá trị và kết hợp chúng với chuỗi. Biểu thức này nằm trong ${} và sẽ được tính toán và chèn vào chuỗi kết quả.
<html>
<body>
<p id="demo"></p>
<script>
let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
document.getElementById("demo").innerHTML = total;
</script>
</body>
</html>Trong ví dụ này, biểu thức price * (1 + VAT) được tính toán và kết quả của nó được chèn vào chuỗi total, cho phép bạn tạo ra một chuỗi hiển thị tổng giá trị với độ chính xác tới hai chữ số thập phân.
Total: 12.509. HTML Templates.
Bạn có thể sử dụng template literals để tạo các mẫu HTML một cách dễ dàng và đọc hiểu hơn. Trong ví dụ này đã sử dụng template literals để tạo một mẫu HTML chứa một tiêu đề và danh sách các thẻ. Trong ví dụ này, bạn đã sử dụng biểu thức ${} để nội suy (interpolate) các biến header và tags vào chuỗi HTML.
<html>
<body>
<p id="demo"></p>
<script>
let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
html += `<li>${x}</li>`;
}
html += `</ul>`;
document.getElementById("demo").innerHTML = html;
</script>
</body>
</html>Ví dụ này tạo ra một chuỗi HTML với tiêu đề (<h2>) và một danh sách không thứ tự (<ul>) của các thẻ (<li>) được tạo ra từ mảng tags. Điều này giúp bạn dễ dàng tạo ra HTML động trong code JavaScript của mình mà không cần phải sử dụng các phép nối chuỗi phức tạp.
