Ninja IT

Template strings

Template strings

Template strings là cú pháp tạo string dùng ký tự ` thay vì sử dụng dấu nháy đơn hoặc nháy kép. Template strings được sử dụng để nhúng các biểu thức ở trong nó và viết một string nhiều dòng.

Cú pháp như sau:

1
2
3
4

`đây là string template`;
var song = 'bella ciao';
`Bài hát của chúng ta là ${song}`;
`Kết quả của 20 * 11 là ${20 * 11}`;

Các ký tự đặt biệt sẽ bắt đầu bằng dấu \

1
2

`Đây là ký tự bắt đầu template string \``;
`Viết trên hai \ndòng`;

Viết trên nhiều dòng sử dụng template string.

1
2
3
4

`Đây là
nhiều dòng
sử dụng
template string`

Tagged templates

Tagged templates là một kiểu template string nâng cao. Tagged templates cho phép phân tích string template trong hàm.
Tham số đầu tiên của hàm là một mảng các ký tự của string templates, các tham số còn lại là các biểu thức.

Ví dụ như sau:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

let person = 'Mike';
let age = 28;

function myTag(strings, personExp, ageExp) {
  console.log(strings[0]); // 'Tôi là '
  console.log(strings[1]); // ', '
  console.log(strings[2]); // ' tuổi.'

  console.log(personExp); // 'Mike'
  console.log(ageExp); // 28

  if (ageExp < 30) {
    return `Bạn ${personExp} vẫn còn trẻ`;
  }
  return 'Bạn đã trưởng thành';
}

// Tagged templates gọi hàm myTag với tham số là string template đã parse
let output = myTag`Tôi là ${ person }, ${ age } tuổi.`;

console.log(output); // Bạn Mike vẫn còn trẻ

String raw trong Tagged templates

Có hai giá trị là giá trị đã parse (sau khi chuyển đổi các ký tự đặt biệt) và giá trị gốc (raw).

1
2
3
4
5
6
7
8

function myTag(strings) {
  console.log(strings[0]);
  // -> It's Mike
  // How are you?

  console.log(strings.raw[0]); // It\'s Mike.\nHow are you?
}
myTag`It\'s Mike.\nHow are you?`;

Hàm static String.raw

Hàm tag template String.raw sẽ trả lại giá trị gốc của String.

1
2
3
4
5

var path = String.raw`C:\Development\profile\aboutme.html`;
console.log(path); // C:\Development\profile\aboutme.html

let name = 'Bob';
console.log(String.raw`Hi\n${name}!`); // Hi\nBob