Nội suy chuỗi là một kỹ thuật cho phép bạn chèn các giá trị của biến hoặc biểu thức vào trong chuỗi một cách trực quan và dễ đọc. TypeScript, dựa trên JavaScript, hỗ trợ việc nội suy chuỗi thông qua template literals. Bài viết này sẽ hướng dẫn bạn cách thực hiện nội suy chuỗi trong TypeScript, cùng với các ví dụ và trường hợp sử dụng phổ biến.
Template literals là một cú pháp đặc biệt trong JavaScript và TypeScript, cho phép bạn tạo chuỗi với nhiều tính năng mạnh mẽ, bao gồm nội suy chuỗi, định dạng nhiều dòng, và nhiều hơn nữa. Template literals được xác định bằng cách sử dụng dấu backtick (`) thay vì dấu nháy đơn hoặc nháy kép.
Bạn có thể sử dụng ${expression} bên trong template literals để chèn giá trị của biến hoặc kết quả của biểu thức vào chuỗi.
const name: string = "Alice";
const age: number = 30;
const greeting: string = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting);
// Đầu ra: Hello, my name is Alice and I am 30 years old.Dưới đây là một số trường hợp sử dụng thực tế cho việc nội suy chuỗi trong TypeScript.
Template literals cho phép bạn dễ dàng kết hợp nhiều biến trong một chuỗi mà không cần phải sử dụng phép nối (+).
const firstName: string = "John";
const lastName: string = "Doe";
const fullName: string = `Full name: ${firstName} ${lastName}`;
console.log(fullName);
// Đầu ra: Full name: John DoeBạn có thể chèn bất kỳ biểu thức nào bên trong ${}, không chỉ là biến. Điều này rất hữu ích cho các phép toán hoặc logic.
const a: number = 5;
const b: number = 10;
const sum: string = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(sum);
// Đầu ra: The sum of 5 and 10 is 15.Một trong những lợi ích lớn của template literals là khả năng định dạng nhiều dòng một cách dễ dàng. Bạn không cần phải sử dụng ký tự đặc biệt để bắt đầu và kết thúc dòng.
const message: string = `This is a message
that spans multiple lines
for better readability.`;
console.log(message);
/* Đầu ra:
This is a message
that spans multiple lines
for better readability.
*/Bạn có thể thực hiện các phép toán phức tạp hoặc logic trong biểu thức nội suy để tạo ra các chuỗi động.
const items: number = 5;
const pricePerItem: number = 20;
const total: string = `The total price for ${items} items is $${items * pricePerItem}.`;
console.log(total);
// Đầu ra: The total price for 5 items is $100.Nội suy chuỗi trong TypeScript thông qua template literals giúp cho việc xây dựng chuỗi trở nên dễ dàng và trực quan hơn. Bằng cách sử dụng ${expression} trong dấu backtick, bạn có thể chèn biến, biểu thức và thậm chí định dạng nhiều dòng một cách linh hoạt. Việc nắm vững cách sử dụng template literals không chỉ làm cho mã của bạn trở nên sạch sẽ và dễ đọc hơn mà còn giúp giảm thiểu lỗi trong quá trình phát triển.
