Cách sử dụng Template Strings JavaScript

Javascript căn bản | 27/02/2025 by Học Javascript

Trong JavaScript, thao tác với chuỗi là một phần quan trọng trong lập trình, đặc biệt khi cần kết hợp nhiều giá trị động vào một chuỗi. Trước đây, lập trình viên thường phải sử dụng dấu + để nối chuỗi, gây khó khăn trong việc đọc và bảo trì mã nguồn. Template Strings (hay Template Literals) được giới thiệu từ ES6 (ECMAScript 2015) là một cách viết chuỗi hiện đại, giúp việc thao tác với chuỗi trở nên dễ dàng hơn. Thay vì sử dụng dấu nháy đơn (') hoặc nháy đôi ("), Template Strings sử dụng dấu backtick ( ), cho phép nội suy biến bằng cú pháp ${}, hỗ trợ xuống dòng trực tiếp và tích hợp nhiều tính năng mạnh mẽ hơn.

So với cách nối chuỗi truyền thống, Template Strings giúp mã nguồn ngắn gọn, dễ đọc, dễ bảo trì và linh hoạt hơn, đặc biệt hữu ích khi làm việc với HTML, dữ liệu động hoặc các biểu thức phức tạp trong JavaScript. Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về Template Strings và cách ứng dụng nó hiệu quả trong lập trình.

Template Strings là gì?

Template Strings (hay còn gọi là Template Literals) là một cách khai báo chuỗi trong JavaScript, được giới thiệu từ phiên bản ES6 (ECMAScript 2015). Khác với cách khai báo chuỗi truyền thống bằng dấu nháy đơn ('...') hoặc dấu nháy đôi ("..."), Template Strings sử dụng dấu backtick (`...`).

Template Strings mang lại nhiều tính năng mạnh mẽ như:
Nội suy biến trực tiếp bằng cú pháp ${}.
Hỗ trợ xuống dòng dễ dàng mà không cần sử dụng \n.
Có thể chứa biểu thức trong dấu ${} để thực hiện các phép toán hoặc gọi hàm.

Cú pháp cơ bản của Template Strings

Ví dụ 1: Khai báo chuỗi bằng Template Strings

let message = `Chào mừng bạn đến với JavaScript!`;
console.log(message); // Kết quả: Chào mừng bạn đến với JavaScript!

Ở đây, chuỗi message được khai báo bằng backtick ( ) thay vì dấu nháy đơn hoặc nháy đôi, nhưng vẫn hoạt động như một chuỗi thông thường.

Ví dụ 2: Nội suy biến trong Template Strings

let name = "Minh";
let age = 25;
let 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à Minh và tôi 25 tuổi.

Lưu ý:

Biến name và age được chèn trực tiếp vào chuỗi bằng cú pháp ${tên_biến}.
Không cần dùng "+" để nối chuỗi như cách truyền thống.

Ví dụ 3: Hỗ trợ xuống dòng dễ dàng

let multiLineString = `Dòng 1
Dòng 2
Dòng 3`;
console.log(multiLineString);
/*
Kết quả:
Dòng 1
Dòng 2
Dòng 3
*/

Điểm khác biệt so với chuỗi truyền thống:

Nếu sử dụng dấu nháy đơn hoặc nháy đôi ('...' hoặc "..."), bạn phải dùng \n để xuống dòng.
Với Template Strings, bạn chỉ cần nhấn Enter, JavaScript sẽ tự động hiểu xuống dòng.

So sánh Template Strings với cách khai báo chuỗi truyền thống

Tính năng	Chuỗi truyền thống (' hoặc ")	Template Strings ( )
Khai báo chuỗi	`let str = "Hello";`	`let str =` Hello`;`
Nội suy biến (`${}`)	Không hỗ trợ	Hỗ trợ
Xuống dòng dễ dàng	Không hỗ trợ (cần `\n`)	Hỗ trợ
Chứa biểu thức trong chuỗi	Không hỗ trợ	Hỗ trợ

Các tính năng quan trọng của Template Strings trong JavaScript

Template Strings không chỉ đơn thuần là cách khai báo chuỗi mới mà còn mang lại nhiều tính năng mạnh mẽ giúp việc xử lý chuỗi trở nên dễ dàng và linh hoạt hơn. Dưới đây là các tính năng quan trọng của Template Strings kèm theo ví dụ minh họa chi tiết.

Nội suy biến trong chuỗi (Interpolation)

Template Strings cho phép nhúng biến hoặc biểu thức vào trong chuỗi bằng cách sử dụng cú pháp ${}.
Không cần sử dụng dấu "+" để nối chuỗi như cách truyền thống.

Ví dụ 1: Nội suy biến đơn giản

let name = "Alice";
let age = 25;
console.log(`Tên: ${name}, Tuổi: ${age}`); 
// Kết quả: Tên: Alice, Tuổi: 25

Ví dụ 2: Nội suy với mảng và đối tượng

let person = { name: "Bob", age: 30 };
console.log(`Người dùng: ${person.name}, Tuổi: ${person.age}`); 
// Kết quả: Người dùng: Bob, Tuổi: 30

Xuống dòng trong chuỗi một cách dễ dàng

Trước đây, khi sử dụng chuỗi truyền thống ('...' hoặc "..."), chúng ta phải sử dụng \n để xuống dòng.
Với Template Strings, chỉ cần nhấn Enter là chuỗi sẽ tự động xuống dòng.

Ví dụ: Xuống dòng với Template Strings

let paragraph = `Dòng 1
Dòng 2
Dòng 3`;
console.log(paragraph);
/*
Kết quả:
Dòng 1
Dòng 2
Dòng 3
*/

Lưu ý:
Nếu dùng chuỗi truyền thống, bạn phải viết:

let paragraph = "Dòng 1\nDòng 2\nDòng 3";

Điều này làm mã nguồn trở nên khó đọc hơn so với Template Strings.

Thực thi biểu thức trong chuỗi

Bạn có thể thực hiện phép toán, gọi hàm, so sánh trực tiếp bên trong ${} mà không cần xử lý bên ngoài.

Ví dụ 1: Thực hiện phép toán trong chuỗi

let a = 10, b = 20;
console.log(`Tổng của ${a} và ${b} là ${a + b}`); 
// Kết quả: Tổng của 10 và 20 là 30

Ví dụ 2: Gọi hàm trong Template Strings

function getGreeting(name) {
    return `Xin chào, ${name}!`;
}
console.log(`${getGreeting("Minh")}`);
// Kết quả: Xin chào, Minh!

Dùng Template Strings để tạo HTML động

Ứng dụng quan trọng trong lập trình web, giúp tạo giao diện động dễ dàng hơn.
Trước đây, bạn phải sử dụng dấu + để nối HTML, nhưng với Template Strings, bạn chỉ cần viết trực tiếp.

Ví dụ: Chèn dữ liệu vào HTML động

let title = "Sản phẩm mới";
let price = 150000;

let html = `
    <h1>${title}</h1>
    <p>Giá: ${price.toLocaleString()} VND</p>
`;

document.body.innerHTML = html;

Lợi ích:

Dễ đọc, dễ bảo trì.
Không cần sử dụng nhiều dấu "+" để nối chuỗi.
Hỗ trợ trực tiếp các phương thức của JavaScript như toLocaleString() để định dạng số.

Kết hợp với Tagged Templates để xử lý chuỗi nâng cao

Tagged Templates là một tính năng nâng cao của Template Strings.
Cho phép bạn viết một hàm xử lý chuỗi trước khi hiển thị.
Ứng dụng: Kiểm tra dữ liệu đầu vào, highlight từ khóa, xử lý HTML, dịch chuỗi, v.v.

Ví dụ: Tô đậm dữ liệu quan trọng trong chuỗi

function highlight(strings, ...values) {
    return strings.map((str, i) => `${str} <b>${values[i] || ''}</b>`).join('');
}

let user = "John";
let message = highlight`Xin chào, ${user}! Chúc bạn một ngày tốt lành.`;

console.log(message);
// Kết quả: Xin chào, <b>John</b>! Chúc bạn một ngày tốt lành.

Giải thích:

highlight là một hàm tagged template, nó nhận vào mảng các chuỗi tĩnh và các giá trị nội suy.
Hàm này thêm thẻ <b> vào các giá trị nội suy để làm nổi bật chúng.

So sánh Template Strings với cách nối chuỗi truyền thống trong JavaScript

Trong JavaScript, trước khi Template Strings (sử dụng dấu backtick ``) xuất hiện, các lập trình viên phải sử dụng dấu "+" để nối chuỗi. Điều này có thể gây rối và làm mã nguồn trở nên khó đọc. Hãy cùng so sánh Template Strings với cách nối chuỗi truyền thống để hiểu rõ hơn về sự khác biệt.

Nối chuỗi

Cách truyền thống:

Khi nối nhiều biến hoặc chuỗi, phải sử dụng "+" liên tục, làm mã dài dòng và khó quản lý.
Dễ mắc lỗi khi thiếu dấu "+" hoặc dấu nháy không khớp.

Template Strings:

Chỉ cần sử dụng ${} bên trong dấu ``, giúp mã nguồn ngắn gọn và dễ đọc hơn.

Ví dụ so sánh:

// Cách truyền thống
let name = "Alice";
let age = 25;
console.log("Tên: " + name + ", Tuổi: " + age);
// Kết quả: Tên: Alice, Tuổi: 25

// Template Strings
console.log(`Tên: ${name}, Tuổi: ${age}`);
// Kết quả: Tên: Alice, Tuổi: 25

Template Strings giúp mã ngắn gọn hơn và dễ đọc hơn rất nhiều.

Xuống dòng trong chuỗi

Cách truyền thống:

Nếu muốn xuống dòng, bạn bắt buộc phải sử dụng \n.
Khi viết nhiều dòng, dấu + làm mã rối mắt và khó bảo trì.

Template Strings:

Chỉ cần nhấn Enter, chuỗi sẽ tự động xuống dòng.

Ví dụ so sánh:

// Cách truyền thống
let message = "Dòng 1\nDòng 2\nDòng 3";
console.log(message);
/*
Kết quả:
Dòng 1
Dòng 2
Dòng 3
*/

// Template Strings
let message2 = `Dòng 1
Dòng 2
Dòng 3`;
console.log(message2);
/*
Kết quả:
Dòng 1
Dòng 2
Dòng 3
*/

Template Strings giúp mã rõ ràng hơn khi làm việc với chuỗi nhiều dòng.

Biểu thức trong chuỗi

Cách truyền thống:

Không hỗ trợ nội suy biến hoặc biểu thức trực tiếp.
Phải viết bên ngoài và nối bằng "+".

Template Strings:

Có thể thực hiện phép toán, gọi hàm hoặc logic điều kiện trực tiếp bên trong chuỗi.

Ví dụ so sánh:

let a = 10, b = 5;

// Cách truyền thống
console.log("Tổng của " + a + " và " + b + " là " + (a + b));
// Kết quả: Tổng của 10 và 5 là 15

// Template Strings
console.log(`Tổng của ${a} và ${b} là ${a + b}`);
// Kết quả: Tổng của 10 và 5 là 15

Nhận xét:
Template Strings giúp viết mã nhanh hơn, ngắn gọn hơn và dễ hiểu hơn.

Dễ đọc, dễ bảo trì

Cách truyền thống:

Khi có nhiều biến hoặc chuỗi dài, việc nối chuỗi bằng + dễ gây lỗi và khó đọc.
Khó khăn khi thay đổi hoặc chỉnh sửa nội dung chuỗi.

Template Strings:

Gọn gàng hơn, dễ nhìn hơn, chỉ cần chỉnh sửa trực tiếp trong chuỗi mà không cần thêm dấu "+".
Giúp lập trình viên bảo trì mã dễ dàng hơn.

Ví dụ so sánh:

let product = "Laptop";
let price = 20000000;

// Cách truyền thống
let description = "Sản phẩm: " + product + "\nGiá: " + price.toLocaleString() + " VND";
console.log(description);
/*
Kết quả:
Sản phẩm: Laptop
Giá: 20,000,000 VND
*/

// Template Strings
let description2 = `Sản phẩm: ${product}
Giá: ${price.toLocaleString()} VND`;
console.log(description2);
/*
Kết quả:
Sản phẩm: Laptop
Giá: 20,000,000 VND
*/

Template Strings giúp tăng khả năng đọc hiểu và dễ bảo trì hơn khi làm việc với chuỗi dài.

So sánh tổng hợp

Đặc điểm	Cách truyền thống (+)	Template Strings (``)
Nối chuỗi	Phải dùng `+`	Dùng `${}` đơn giản hơn
Xuống dòng	Dùng `\n`	Hỗ trợ xuống dòng trực tiếp
Biểu thức trong chuỗi	Không hỗ trợ	Hỗ trợ `${}` cho phép toán, gọi hàm, điều kiện
Dễ đọc, dễ bảo trì	Khó hơn, dễ mắc lỗi	Dễ hơn, gọn gàng hơn

Ứng dụng thực tế của Template Strings trong JavaScript

Template Strings không chỉ giúp viết mã dễ đọc hơn mà còn mang lại nhiều lợi ích thực tế trong lập trình JavaScript. Dưới đây là một số ứng dụng quan trọng của Template Strings trong thực tế.

Hiển thị nội dung động trên trang web

Khi xây dựng ứng dụng web, chúng ta thường phải hiển thị dữ liệu động như tên người dùng, số đơn hàng, trạng thái sản phẩm... Sử dụng Template Strings giúp hiển thị thông tin một cách linh hoạt và dễ dàng hơn.

Ví dụ:

let userName = "Nguyễn Văn A";
let orderCount = 5;

let message = `Xin chào ${userName}, bạn có ${orderCount} đơn hàng mới!`;
console.log(message);  
// Kết quả: Xin chào Nguyễn Văn A, bạn có 5 đơn hàng mới!

Lợi ích:

Dễ dàng nhúng dữ liệu vào chuỗi mà không cần dùng dấu +.
Đơn giản hóa việc hiển thị thông tin người dùng trên giao diện.

Tạo HTML/CSS động trong JavaScript

Template Strings giúp tạo HTML động một cách trực quan, thường được sử dụng khi cập nhật nội dung trang web mà không cần viết nhiều dòng mã nối chuỗi phức tạp.

Ví dụ:

let product = "Laptop Gaming";
let price = 25000000;
let description = "Hiệu năng mạnh mẽ, màn hình 144Hz, RTX 3060.";

// Tạo HTML động
let html = `
    <div class="product">
        <h2>${product}</h2>
        <p>${description}</p>
        <p><strong>Giá:</strong> ${price.toLocaleString()} VND</p>
    </div>
`;

document.body.innerHTML = html;

Lợi ích:

Dễ dàng tạo HTML động mà không cần ghép nối nhiều chuỗi phức tạp.
Trực quan hơn khi viết các template UI trong JavaScript.

Viết SQL hoặc API Query linh hoạt hơn

Trong các ứng dụng web, chúng ta thường cần tạo câu lệnh SQL động hoặc gọi API với tham số linh hoạt. Template Strings giúp giảm thiểu lỗi cú pháp và tăng tính đọc hiểu của mã.

Ví dụ 1: Viết câu lệnh SQL động

let table = "users";
let column = "email";
let value = "[email protected]";

// Tạo câu SQL động
let query = `SELECT * FROM ${table} WHERE ${column} = '${value}'`;
console.log(query);
// Kết quả: SELECT * FROM users WHERE email = '[email protected]'

Lợi ích:

Tạo câu lệnh SQL dễ dàng mà không cần dấu +.
Giảm nguy cơ lỗi cú pháp khi ghép chuỗi.

Kết bài

Template Strings là một tính năng mạnh mẽ trong JavaScript giúp viết mã dễ đọc, dễ bảo trì và linh hoạt hơn so với cách nối chuỗi truyền thống. Với khả năng nội suy biến, hỗ trợ xuống dòng trực tiếp, thực thi biểu thức trong chuỗi và tạo HTML động, Template Strings đã trở thành một phần không thể thiếu trong lập trình hiện đại.

Nhờ những ưu điểm vượt trội, Template Strings được sử dụng rộng rãi trong hiển thị nội dung động trên web, tạo truy vấn SQL/API linh hoạt, định dạng email/tin nhắn tự động và nhiều ứng dụng thực tế khác.