ES6 Template String là gì? bạn đã biết chưa?

Xin chào các bạn lại là mình đây 😀, như vậy là chúng ta cũng đi được khá khá các nội dung của học JavaScript cơ bản rồi đấy. Ở bài viết trước, chúng ta đã cùng tìm hiểu về Arrow Function JavaScript có gì hay?. Trong bài viết này, homiedev sẽ giới thiệu đến các bạn khái niệm template string trong ES6 JavaScript nhé!

Các bài viết về học JavaScript cơ bản bạn có thể theo dõi tại: 👨‍🏫 Cùng học JavaScript ✍

JavaScript Template String (Template Literal)

ES6 Template String (Template Literal) giúp chúng ta sử dụng kết hợp các biến hoặc các biểu thức với một chuỗi một cách dễ dàng hơn. Các xử lý khi sử dụng template literal phải được đặt trong dấu backtick ``.

Ví dụ:

const blogName = 'Homiedev';
console.log(`Hello ${blogName}!`); // Hello Homiedev!

Template literal đã được giới thiệu vào năm 2015 (còn gọi là ECMAScript 6 hoặc ES6 hoặc ECMAScript 2015). Tuy nhiên, một số trình duyệt có thể không hỗ trợ việc sử dụng template literal.

Sử dụng Template Literals cho chuỗi

Trong các bản JavaScript trước đó, chúng ta sẽ phải sử dụng cặp dấu nháy đơn ' ' hoặc dấu nháy kép " " cho các chuỗi.

Ví dụ:

const str1 = 'Đây là blog homiedev';

const str2 = 'Đây là blog "homiedev" 🥳';  // hợp lệ
const str3 = 'Đây là blog 'homiedev' 😐';  // lỗi

const str4 = "blog 'homiedev' làm về chủ đề gì? "; // hợp lệ
const str5 = "blog "homiedev" có gì hay?"; // lỗi

Như ở ví dụ trên, chúng ta sẽ không thể sử dụng cùng kí tự dấu nháy trong một chuỗi. Nếu bạn muốn tạo một trích dẫn trong chuỗi bạn có thể sử dụng một số cách sau:

1. Sử dụng escape character \.

// escape characters \
const str3 = 'Đây là blog \'homiedev\' 😐';  // ok
const str5 = "blog \"homiedev\" có gì hay?"; // ok

2. Sử dụng template literals

const str1 = `học JavaScript cơ bản`;
const str2 = `Đây là một 'chuỗi'`;
const str3 = `Đây cũng là một "chuỗi"`;

Như bạn có thể thấy ở trên, sử dụng template literal không chỉ giúp chúng ta dễ dàng đưa các `"trích dẫn"` vào chuỗi mà còn làm code của chúng ta trông dễ nhìn hơn đúng không 😁.

Multiline String

Sử dụng template literal giúp chúng ta có thể dễ dàng viết các chuỗi ở nhiều dòng.

Ví dụ:

Thay vì chúng ta phải viết thế này:

// + operator
const lyrics = 
"Bố anh thì đi lại còn mẹ anh gọi điện thoại đến từng nhà\n" +
"Nhiều ngày rồi mình không về, không liên lạc được gì cả\n" +
"Chỉ vỏn vẹn mảnh giấy \"đừng lo, đêm nay con đi chơi xa\""

console.log(lyrics); // dua nhau di tron - Den 🤨

Chúng ta có thể tiết kiệm thời gian bằng cách sử dụng template literal:

const lyrics = 
`Bố anh thì đi lại còn mẹ anh gọi điện thoại đến từng nhà
Nhiều ngày rồi mình không về, không liên lạc được gì cả
Chỉ vỏn vẹn mảnh giấy "đừng lo, đêm nay con đi chơi xa"`

console.log(lyrics);

Kết quả là giống nhau ở hai cách làm trên:

Bố anh thì đi lại còn mẹ anh gọi điện thoại đến từng nhà
Nhiều ngày rồi mình không về, không liên lạc được gì cả
Chỉ vỏn vẹn mảnh giấy "đừng lo, đêm nay con đi chơi xa"

Nối biến, biểu thức với một chuỗi

Trước JavaScript ES6, chúng ta sẽ phải sử dụng toán tử + để nối các biến và biểu thức khi kết hợp với một chuỗi.

Ví dụ:

const name = 'Hà';
console.log('Hello ' + name); // Hello Hà

Với template literal, việc đưa các biến và biểu thức vào trong một chuỗi sẽ dễ dàng hơn. Để làm được điều đó, chúng ta sẽ sử dụng cú pháp ${truyền biến hoặc biểu thức ở đây}.

const name = 'Hà';
console.log(`Hello ${name}`); 

const result = 5 + 3;

console.log(`Kết quả là: ${result}`);

console.log(`${result < 4 ? 'học lại': 'qua môn'}`)

Kết quả chúng ta được:

Hello Hà
Kết quả là: 8
qua môn

Như bạn thấy chúng ta có thể dễ dàng kết hợp biểu thức, hay biến vào một chuỗi khi sử dụng template literal đúng không 😚.

Tagged Template

Thông thường, chúng ta sẽ sử dụng một hàm để truyền các đối số.

Ví dụ:

function example(strings) {
    return strings;
}

const result = example('blog Homiedev');

console.log(result);

Chúng ta có thể sử dụng cách khác đó là Tagged Template hoạt động giống như một hàm.

Tagged Template được viết giống như một định nghĩa hàm. Tuy nhiên, chúng ta không cần sử dụng dấu ngoặc đơn () khi gọi hàm.

Ví dụ:

function displayName(name) {
    return name;
}

// tạo tagged template
const result = displayName`homiedev`;

console.log(result);

Kết quả ở trên:

["homiedev"]

Đối số đầu tiên của tagged template là mảng các giá trị chuỗi. Các đối số còn lại liên quan đến các biểu thức mà bạn đã truyền vào. Tên của tagged template có thể là bất kỳ tên nào bạn muốn.

Sử dụng tagged template chúng ta có thể return về một chuỗi đã được xử lý, bạn có thể xem ví dụ bên dưới để hiểu rõ hơn ^^.

const person = "Trang";
const age = 17;

function myTag(strings, name, age) {
  const str0 = strings[0]; // "Đây là "
  const str1 = strings[1]; // ", "
  const str2 = strings[2]; // "."

  const ageStr = age > 50 ? "đã lớn tuổi 🧓" : "còn trẻ 👧";

  return `${str0}${name}${str1}${ageStr}${str2}`;
}

const output = myTag`Đây là ${person}, ${age}.`;

console.log(output);
// Đây là Trang, còn trẻ 👧.

Bạn thấy cách sử dụng `` có quen không? Nếu bạn nào dùng các thư viện css styles (CSS-in-JS) như Emotion, styled-components thì chúng ta có thể đã viết một tagged template đấy ^^.

Ví dụ như khi chúng ta style một button sử dụng thư viện Emotion.

import styled from '@emotion/styled'

const Button = styled.button`
  padding: 32px;
  font-size: 24px;
  border-radius: 4px;
  color: black;
  font-weight: bold;
  &:hover {
    color: white;
  }
`

render(<Button>Login homiedev.com</Button>)

Hi vọng sau bài viết này, các bạn có thể hiểu rõ cách sử dụng template literals trong JavaScript. Chúng ta sẽ gặp lại nhau trong các bài viết sắp tới nhé 👨.

Nếu có thắc mắc gì chúng ta có thể thảo luận bên dưới phần bình luận 👇 nha.

Bài viết hay nên đọc:

1. Một số JavaScript Shorthand giúp code ngắn gọn, clear hơn
2. JavaScript at() method có gì hay? Tìm hiểu về method at() trong Javascript