Thoát-html github

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tagFunction`string text ${expression} string text`

`\${1}` === "${1}"; // true

Văn bản chuỗi sẽ trở thành một phần của mẫu chữ. Hầu như tất cả các ký tự được cho phép theo nghĩa đen, bao gồm và khác. Tuy nhiên, các chuỗi thoát không hợp lệ sẽ gây ra lỗi cú pháp, trừ khi a được sử dụng

`\${1}` === "${1}"; // true

Một biểu thức được chèn vào vị trí hiện tại, có giá trị được chuyển đổi thành một chuỗi hoặc được chuyển đến

`\${1}` === "${1}"; // true

`\${1}` === "${1}"; // true

Nếu được chỉ định, nó sẽ được gọi với mảng chuỗi mẫu và biểu thức thay thế, và giá trị trả về trở thành giá trị của chữ mẫu. Nhìn thấy

Văn bản mẫu được bao quanh bởi các ký tự backtick (_______0_______4) thay vì dấu ngoặc kép hoặc dấu ngoặc đơn

Cùng với việc có các chuỗi bình thường, các mẫu chữ cũng có thể chứa các phần khác được gọi là trình giữ chỗ, là các biểu thức nhúng được phân tách bằng ký hiệu đô la và dấu ngoặc nhọn.

console.log("string text line 1\n" + "string text line 2");
// "string text line 1
// string text line 2"

Để cung cấp một chức năng của riêng bạn, hãy đặt trước mẫu chữ một tên chức năng; . Trong trường hợp đó, chữ mẫu được chuyển đến chức năng thẻ của bạn, sau đó bạn có thể thực hiện bất kỳ thao tác nào bạn muốn trên các phần khác nhau của chữ mẫu

Để thoát dấu gạch ngược trong mẫu chữ, hãy đặt dấu gạch chéo ngược (

console.log("string text line 1\n" + "string text line 2");
// "string text line 1
// string text line 2"

`\`` === "`"; // true

Dấu hiệu đô la cũng có thể được thoát để ngăn nội suy

`\${1}` === "${1}"; // true

Bất kỳ ký tự dòng mới nào được chèn vào nguồn đều là một phần của mẫu chữ

Sử dụng các chuỗi bình thường, bạn sẽ phải sử dụng cú pháp sau để có được các chuỗi nhiều dòng

console.log("string text line 1\n" + "string text line 2");
// "string text line 1
// string text line 2"

Sử dụng chữ mẫu, bạn có thể làm tương tự với điều này

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

Nếu không có mẫu chữ, khi bạn muốn kết hợp đầu ra từ biểu thức với chuỗi, bạn sẽ sử dụng toán tử cộng

console.log("string text line 1\n" + "string text line 2");
// "string text line 1
// string text line 2"

const a = 5;
const b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."

Điều đó có thể khó đọc – đặc biệt là khi bạn có nhiều biểu thức

Với mẫu chữ, bạn có thể tránh toán tử nối — và cải thiện khả năng đọc mã của bạn — bằng cách sử dụng trình giữ chỗ có dạng

console.log("string text line 1\n" + "string text line 2");
// "string text line 1
// string text line 2"

const a = 5;
const b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

Lưu ý rằng có một sự khác biệt nhỏ giữa hai cú pháp. Mẫu chữ , trong khi phép cộng buộc toán hạng của nó thành nguyên hàm trước. Để biết thêm thông tin, hãy xem trang tham khảo cho toán tử

console.log("string text line 1\n" + "string text line 2");
// "string text line 1
// string text line 2"

Trong một số trường hợp nhất định, lồng mẫu là cách dễ nhất (và có lẽ dễ đọc hơn) để có các chuỗi có thể định cấu hình. Trong mẫu được phân cách bằng dấu gạch ngược, thật đơn giản để cho phép dấu gạch ngược bên trong bằng cách sử dụng chúng bên trong trình giữ chỗ

console.log("string text line 1\n" + "string text line 2");
// "string text line 1
// string text line 2"

Ví dụ: không có mẫu chữ, nếu bạn muốn trả về một giá trị nhất định dựa trên một điều kiện cụ thể, bạn có thể làm điều gì đó như sau

let classes = "header";
classes += isLargeScreen()
  ? ""
  : item.isCollapsed
  ? " icon-expander"
  : " icon-collapser";

Với một mẫu chữ nhưng không lồng nhau, bạn có thể làm điều này

const classes = `header ${
  isLargeScreen() ? "" : item.isCollapsed ? "icon-expander" : "icon-collapser"
}`;

Với việc lồng các chữ mẫu, bạn có thể làm điều này

const classes = `header ${
  isLargeScreen() ? "" : `icon-${item.isCollapsed ? "expander" : "collapser"}`
}`;

Một dạng văn bản mẫu nâng cao hơn là các mẫu được gắn thẻ

Các thẻ cho phép bạn phân tích các chữ mẫu bằng một hàm. Đối số đầu tiên của hàm thẻ chứa một mảng các giá trị chuỗi. Các đối số còn lại có liên quan đến các biểu thức

Sau đó, hàm thẻ có thể thực hiện bất kỳ thao tác nào trên các đối số này mà bạn muốn và trả về chuỗi đã thao tác. (Ngoài ra, nó có thể trả về một cái gì đó hoàn toàn khác, như được mô tả trong một trong các ví dụ sau. )

Tên của chức năng được sử dụng cho thẻ có thể là bất cứ điều gì bạn muốn

`\`` === "`"; // true

Thẻ không nhất thiết phải là một mã định danh đơn giản. Bạn có thể sử dụng bất kỳ biểu thức nào lớn hơn 16, bao gồm quyền truy cập thuộc tính, lệnh gọi hàm, biểu thức mới hoặc thậm chí một ký tự mẫu được gắn thẻ khác

`\`` === "`"; // true

Mặc dù cú pháp cho phép về mặt kỹ thuật, các mẫu chữ không được gắn thẻ là các chuỗi và sẽ tạo ra một

console.log("string text line 1\n" + "string text line 2");
// "string text line 1
// string text line 2"

`\`` === "`"; // true

Ngoại lệ duy nhất là chuỗi tùy chọn, sẽ gây ra lỗi cú pháp

`\`` === "`"; // true

Lưu ý rằng hai biểu thức này vẫn có thể phân tích cú pháp. Điều này có nghĩa là chúng sẽ không phải tuân theo , điều này sẽ chỉ chèn dấu chấm phẩy để sửa mã mà nếu không thì không thể phân tích cú pháp

`\`` === "`"; // true

Các hàm thẻ thậm chí không cần trả về một chuỗi

`\`` === "`"; // true

Đối số đầu tiên mà hàm thẻ nhận được là một mảng các chuỗi. Đối với bất kỳ mẫu chữ nào, độ dài của nó bằng số lần thay thế (lần xuất hiện của

console.log("string text line 1\n" + "string text line 2");
// "string text line 1
// string text line 2"

Đối với bất kỳ biểu thức chữ cái mẫu được gắn thẻ cụ thể nào, hàm thẻ sẽ luôn được gọi với cùng một mảng chữ chính xác, bất kể chữ đó được đánh giá bao nhiêu lần

`\`` === "`"; // true

Điều này cho phép thẻ lưu trữ kết quả dựa trên danh tính của đối số đầu tiên của nó. Để đảm bảo hơn nữa tính ổn định của giá trị mảng, cả đối số đầu tiên và đối số của nó đều bị đóng băng, vì vậy bạn không thể thay đổi chúng theo bất kỳ cách nào

Thuộc tính đặc biệt

console.log("string text line 1\n" + "string text line 2");
// "string text line 1
// string text line 2"

`\`` === "`"; // true

Ngoài ra, tồn tại phương thức

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

`\`` === "`"; // true

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

`\`` === "`"; // true

Điều này hữu ích cho nhiều công cụ xử lý đặc biệt các chữ được gắn thẻ theo một tên cụ thể

`\${1}` === "${1}"; // true

Trong mẫu chữ bình thường, tất cả đều được phép. Bất kỳ chuỗi thoát không đúng định dạng nào khác đều là lỗi cú pháp. Điêu nay bao gôm

• console.log("string text line 1\n" + "string text line 2");
  // "string text line 1
  // string text line 2"
  

  1 theo sau bởi bất kỳ chữ số thập phân nào ngoài

  console.log(`string text line 1
  string text line 2`);
  // "string text line 1
  // string text line 2"
  

  4, hoặc

  console.log(`string text line 1
  string text line 2`);
  // "string text line 1
  // string text line 2"
  

  5 theo sau bởi một chữ số thập phân;

• console.log(`string text line 1
  string text line 2`);
  // "string text line 1
  // string text line 2"
  

  8 theo sau bởi ít hơn hai chữ số hex (kể cả không);

• const a = 5;
  const b = 10;
  console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
  // "Fifteen is 15 and
  // not 20."
  

  0 không theo sau bởi

  const a = 5;
  const b = 10;
  console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
  // "Fifteen is 15 and
  // not 20."
  

  1 và theo sau bởi ít hơn bốn chữ số hex (bao gồm cả số không);

• const a = 5;
  const b = 10;
  console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
  // "Fifteen is 15 and
  // not 20."
  

  3 kèm theo một điểm mã Unicode không hợp lệ — nó chứa một chữ số không phải hệ thập lục phân hoặc giá trị của nó lớn hơn

  const a = 5;
  const b = 10;
  console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
  // "Fifteen is 15 and
  // not 20."
  

  4;

Ghi chú.

console.log("string text line 1\n" + "string text line 2");
// "string text line 1
// string text line 2"

Tuy nhiên, đây là vấn đề đối với các mẫu được gắn thẻ, ngoài chữ "đã nấu", còn có quyền truy cập vào các chữ thô (các chuỗi thoát được giữ nguyên như hiện trạng)

Các mẫu được gắn thẻ sẽ cho phép nhúng các ngôn ngữ (ví dụ: DSL hoặc LaTeX), trong đó các chuỗi thoát khác là phổ biến. Do đó, hạn chế cú pháp của các chuỗi thoát đúng định dạng sẽ bị xóa khỏi các mẫu được gắn thẻ

`\${1}` === "${1}"; // true

Tuy nhiên, các chuỗi thoát bất hợp pháp vẫn phải được biểu diễn trong biểu diễn "nấu chín". Chúng sẽ hiển thị dưới dạng phần tử

const a = 5;
const b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."

`\${1}` === "${1}"; // true

Lưu ý rằng hạn chế chuỗi thoát chỉ bị loại bỏ khỏi các mẫu được gắn thẻ chứ không phải từ các mẫu chữ không được gắn thẻ