Mẫu chuỗi trong Javascript - JavaScript String Templates

Trong lập trình JavaScript, Template Literals (hay còn gọi là Template Strings, String Templates, hoặc Back-Tics Syntax) là một tính năng mạnh mẽ giúp bạn tạo chuỗi một cách linh hoạt và thuận tiện hơn. Trong bài viết này, chúng ta sẽ khám phá cách sử dụng Template Literals cũng như những lợi ích mà chúng mang lại.

Cú Pháp Back-Tics

Template Literals sử dụng dấu back-ticks (``) thay vì dấu ngoặc kép ("") để định nghĩa một chuỗi. Điều này giúp làm cho cú pháp trở nên sáng tạo và dễ đọc hơn.

let text = `Hello World!`;

Sử Dụng Các Dấu Ngoặc Trong Chuỗi

Với Template Literals, bạn có thể sử dụng cả dấu ngoặc đơn và ngoặc kép bên trong một chuỗi một cách dễ dàng.

let text = `He's often called "Johnny"`;

Chuỗi Đa Dòng

Template Literals cho phép bạn tạo chuỗi đa dòng một cách tự nhiên, làm cho việc viết mã trở nên thoải mái hơn.

let text =

`The quick

brown fox

jumps over

the lazy dog`;

Tích Hợp Biến vào Chuỗi

Template Literals cung cấp một cách dễ dàng để tích hợp biến và biểu thức vào chuỗi, được gọi là string interpolation.

let firstName = "John";

let lastName = "Doe";

let text = `Welcome ${firstName}, ${lastName}!`;

Thay Thế Biểu Thức vào Chuỗi

Ngoài việc thay thế biến, Template Literals cũng cho phép bạn thực hiện string interpolation với các biểu thức.

let price = 10;

let VAT = 0.25;

let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

HTML Templates

Template Literals cực kỳ hữu ích khi bạn làm việc với HTML, giúp tạo ra các mẫu HTML một cách dễ dàng và đẹp mắt.

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>`;

Hỗ Trợ Trình Duyệt

Template Literals là một tính năng của ES6 (JavaScript 2015) và được hỗ trợ trên tất cả các trình duyệt hiện đại như Chrome, Edge, Firefox, Safari, và Opera. Tuy nhiên, lưu ý rằng Template Literals không được hỗ trợ trên Internet Explorer.

Tổng Kết

Trong bài viết này, chúng ta đã khám phá sức mạnh của Template Literals trong JavaScript. Sự linh hoạt, độ đọc hiểu cao, và khả năng tích hợp các biến và biểu thức làm cho Template Literals trở thành một công cụ quan trọng trong việc xử lý chuỗi. Hãy tích hợp chúng vào dự án của bạn để tận dụng những lợi ích mà chúng mang lại. Chúc các bạn học tốt!