Lời nói đầu

Xin chào! Tôi là Brandon. Tôi là người đã tạo ra codeburt.io và tôi cũng viết các hướng dẫn và các bài viết về Javascript nhằm giúp đỡ những người mới bắt đầu hiểu rõ hơn về các hoạt động bên trong của phát triển Web. Nếu như bạn có bất kỳ câu hỏi nào về bài viết, hãy để lại nhận xét và tôi sẽ liên hệ lại sớm với bạn hoặc hãy tìm tôi trên twitter @brandonmorelli. Điều cuối tôi muốn nói đó là khi bạn đã thực sự sẵn sàng để đi sâu vào phát triển Web, hãy kiểm nghiệm về các khóa học phát triển web full stack tốt nhất.

Tôi ghét các tiêu đề câu kéo người dùng click vào nhiều như bất cứ ai khác, nhưng tôi sẽ nghiêm túc khi sử dụng tiêu đề này " Một mẹo đơn giản giúp cải thiện khả năng đọc code của bạn ngay lập tức".

Dấu back-tick chính là người bạn của bạn.

Cú pháp sử dụng kèm theo dấu back-tick (`) thay cho dấu ngoặc đơn (') hay dấu ngoặc kép (").

BOOM. Bây giờ bạn có thể viết một cú pháp.

console.log(`Hello World`);
// "Hello World"

Được thôi, đó không phải là một ví dụ thú vị. Hãy thêm vào một biến với ${}

var name = 'World';
console.log(`Hello ${name}`);
// "Hello World"

Tốt hơn chút, nhưng hãy lùi lại một giây:

Chính xác thì cú pháp mẫu là gì? Vâng, một mẫu là chính là một "định dạng đã được thiết lập sẵn" và một cú pháp được hiểu nghĩa là "một giá trị được viết chính xác". Trong ngôn ngữ Javascript, một cú pháp mẫu là một cách thức để kết nối các chuỗi trong khi cho phép các biểu thức được nhúng và khả năng đọc được nâng cao.

Khả năng đọc và code sạch

Hãy xem xét một kịch bản như thế này, tại vị trí mà bạn muốn đăng xuất tên và nickname của một người. Sử dụng cú pháp mẫu có nghĩa là không phải chỉ code ít hơn, mà còn giúp chúng ta dễ đọc hơn nhiều:

var p = {
  name: 'Jackson',
  nn: 'Jak',
};
// STRING CONCATENATION
console.log('Hi, I\'m ' + p.name + '! Call me "' + p.nn + '".');
// TEMPLATE LITERALS
console.log(`Hi, I'm ${p.name}! Call me "${p.nn}".`);
// "Hi, I'm Jackson! Call me 'Jak'."

Trong ví dụ này, có hai phép nối chuỗi đặc biệt khó chịu mà tôi dễ dàng nhận thấy. Thoát khỏi dấu ' với dấu \ , và cố gắng hình dung ra chuyện gì đang xảy ra ở cuối chuỗi với dấu " và dấu '. Tất cả sự lo lắng này này đều được giảm bớt bởi các cú pháp mẫu, và tôi đã để lại một đoạn code sạch hơn nhiều.

Ngắt dòng cũng là một lĩnh vực giúp cú pháp mẫu tỏa sáng:

// STRING CONCATENATION
console.log("Dear Mom,\n" + 
"Hope you are well.\n" + 
"\tLove, your son")
// TEMPLATE LITERALS
console.log(`Dear Mom,
Hope you are well.
    Love, your son`);
// Dear Mom,
// Hope you are well.
//     Love, your son

Với các cú pháp mẫu, bất kể là dòng ký tự mới, các tab, các khoảng trắng, v.v...đều được đưa vào nguồn để trở thành một phần của chuỗi. Điều này có thể là một sự may mắn và cũng có thể là tai họa, nhưng những giới hạn về khả năng đọc chắc chắn sẽ được nới rộng.

Một ví dụ dễ đọc hơn. Xem xét việc thêm các biểu thức vào một chuỗi:

// STRING CONCATENATION
console.log('Three plus six is ' + (3 + 6) + '.');
// TEMPLATE LITERALS
console.log(`Three plus six is ${3 + 6}.`);
// "Three plus six is 9."

Các mẫu được gắn thẻ

Các mẫu được gắn thẻ là một trường hợp áp dụng khác cho các cú pháp mẫu. Một mẫu được gắn thẻ là gọi một hàm sử dụng cú pháp mẫu để từ đó nhận các đối số của nó.

// TYPICAL FUNCTION
function greet(){};
// TAG FUNCTION
greet`I'm ${name}. I'm ${age} years old.`

Như bạn có thể thấy, một hàm tag chỉ đơn giản là tên hàm được theo sau bởi một cú pháp mẫu. Nhưng chức năng của thẻ hoàn toàn là cú pháp đặc biệt. Việc sử dụng chức năng thẻ ở trên cũng giống thế này:

// TAG FUNCTION
greet`I'm ${name}. I'm ${age} years old.`
// EQUIVALENT FUNCTION
greet(["I'm ", ". I'm ", " years old."], name, age)

Như bạn có thể thấy, sử dụng một hàm tag là cách dễ dàng để truyền một cú pháp mẫu vào một hàm làm đối số của nó. Hàm tag phân tích các cú pháp mẫu thành một mảng các đối số. Đối số đầu tiên sẽ trở thành một mảng các giá trị của chuỗi. Các đối số bổ sung sẽ là các biến theo thứ tự mà chúng gặp phải. Dưới đây là một ví dụ đầy đủ để thực hiện ý tưởng này.

var name = 'Brandon';
var age = 26;
 
function greet(){
  console.log(arguments[0]);
  // ["I'm ", ". I'm ", " years old."]
 
  console.log(arguments[1]);
  // Brandon
 
  console.log(arguments[2]);
  // 26
}
greet`I'm ${name}. I'm ${age} years old.`;

Như bạn thấy, hàm tag sử dụng và phân tích cú pháp mẫu của chúng ta. Nhưng rõ ràng rằng vi dụ này không phải là hữu ích nhất. Hãy nhìn xuống dưới:

var name = 'Brandon';
var age = 26;
function greet(arr, nameArg, ageArg) {
  console.log(arr[0] + nameArg + arr[1] + ageArg + arr[2]);
}
greet`Woah, ${name} is ${age}?`;
// "Woah, Brandon is 26?"

Khá tuyệt đúng không nào? Khi chúng ta gọi hàm greet, chúng ta truyền vào cú pháp mẫu như là một đối số duy nhất. Hàm tag phân tích cú pháp mẫu của chúng ta thành ba đối số riêng biệt. Đối số đầu tiên là một mảng văn bản thuần túy. Các đối số còn lại là các biểu thức cú pháp mẫu theo thứ tự chúng xuất hiện. Sau đó chúng ta có thể truy cập và sắp xếp tất cả các đối số này để tạo ra chuỗi mong muốn! Trong trường hợp này, chúng ta đặt các đối số vào giữa mảng và viola - chúng ta sẽ nhận được đoạn văn bản viết ra những gì chúng ta muốn nói!