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

  • Như

    Tác giả

    Như

  • Ngày đăng

    29 thg 11, 2023

  • Số lượt xem

    122 lượt xem


Hướng dẫn về cách sử dụng mẫu chuỗi (template strings) để tạo chuỗi linh hoạt và dễ đọc hơn.

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.

str_templates

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!


Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.