Hướng dẫn template string javascript - chuỗi mẫu javascript

Cú pháp

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tagFunction`string text ${expression} string text`

Thông số

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

Văn bản chuỗi sẽ trở thành một phần của mẫu theo nghĩa đen. Hầu như tất cả các nhân vật đều được phép theo nghĩa đen, bao gồm các lỗi phá vỡ dòng và các ký tự khoảng trắng 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 chức năng thẻ được sử dụng.

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

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 sang

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

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

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 mẫu theo nghĩa đen. Xem các mẫu được gắn thẻ.

Sự mô tả

Các chữ cái được đặt trong các ký tự Backtick (

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

Cùng với việc có các chuỗi bình thường, các chữ cái cũng có thể chứa các phần khác được gọi là người giữ chỗ, được các biểu thức nhúng được phân định bằng dấu hiệu đô la và niềng răng xoă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, đi trước mẫu theo nghĩa đen với một tên hàm; Kết quả được gọi là một mẫu được gắn thẻ. Trong trường hợp đó, theo nghĩa đen của mẫu được chuyển đến chức năng thẻ của bạn, nơi sau đó bạn có thể thực hiện bất kỳ hoạt động nào bạn muốn trên các phần khác nhau của mẫu theo nghĩa đen.tagged template. In that case, the template literal is passed to your tag function, where you can then perform whatever operations you want on the different parts of the template literal.

Để thoát khỏi một backtick trong một mẫu theo nghĩa đen, đặt một dấu gạch chéo ngược (

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

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

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

Chuỗi đa dòng

Bất kỳ ký tự mới nào được chèn vào nguồn là một phần của mẫu theo nghĩa đen.

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 theo nghĩa đen, bạn có thể làm điều 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"

Chuỗi nội suy

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

console.log(`string text line 1
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 các 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ủa mẫu

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ữ viết tắt biểu thức của chúng trực tiếp vào các chuỗi, trong khi bổ sung ép buộc các toán hạng của nó cho các nguyên thủy trước tiên. Để biết thêm thông tin, hãy xem trang tham chiếu cho toán tử

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

Mẫu làm tổ

Trong một số trường hợp nhất định, việc làm tổ một mẫu là cách dễ nhất (và có lẽ dễ đọc hơn) để có các chuỗi có thể cấu hình. Trong một mẫu được phân loại lại, rất đơn giản để cho phép Backticks 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ó nghĩa đen, 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 một cái gì đó như sau:

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

Với một mẫu theo nghĩa đen nhưng không làm tổ, 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àm tổ của các mẫu chữ, bạn có thể làm điều này:

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

Mẫu được gắn thẻ

Một hình thức nâng cao hơn của các mẫu chữ được gắn thẻ.

Tags cho phép bạn phân tích chữ cái theo nghĩa đen với một chức năng. Đố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.

Hàm thẻ sau đó có thể thực hiện bất kỳ hoạt động nào trên các đối số này bạn muốn và trả về chuỗi được 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 hàm được sử dụng cho thẻ có thể là bất cứ điều gì bạn muốn.

const person = "Mike";
const age = 28;

function myTag(strings, personExp, ageExp) {
  const str0 = strings[0]; // "That "
  const str1 = strings[1]; // " is a "
  const str2 = strings[2]; // "."

  const ageStr = ageExp > 99 ? "centenarian" : "youngster";

  // We can even return a string built using a template literal
  return `${str0}${personExp}${str1}${ageStr}${str2}`;
}

const output = myTag`That ${person} is a ${age}.`;

console.log(output);
// That Mike is a youngster.

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

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

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

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

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

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

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

Lưu ý rằng hai biểu thức này vẫn có thể phân tích được. Điều này có nghĩa là họ sẽ không phải chịu sự chèn dấu chấm phẩy tự động, điều này sẽ chỉ chèn các dấu chấm phẩy để sửa mã không thể thay đổi.

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

Các chức năng thẻ thậm chí không cần phải trả về một chuỗi!

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

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

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

Đối với bất kỳ biểu thức 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 theo nghĩa đen chính xác, bất kể được đánh giá bao nhiêu lần theo nghĩa đen.

`\${1}` === "${1}"; // 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 sự ổn định của giá trị mảng, đối số đầu tiên và thuộc tính ____37 của nó đều bị đóng băng, vì vậy bạn không thể biến đổi chúng theo bất kỳ cách nào.

Dây thô

Thuộc tính

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

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

Ngoài ra, phương thức

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

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

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

Điều này rất hữu ích cho nhiều công cụ cung cấp điều trị đặc biệt cho các chữ được gắn thẻ bởi một tên cụ thể.

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

Các mẫu được gắn thẻ và trình tự thoát

Trong các mẫu mẫu bình thường, các chuỗi lối thoát trong các chữ viết đều được cho phép. Bất kỳ trình tự thoát không hình dạng khác là lỗi cú pháp. Điêu nay bao gôm:

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

  0 theo sau là bất kỳ chữ số thập phân nào khác ngoài

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

  3, hoặc

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

  4 theo sau là một chữ số thập phân; Ví dụ:

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

  5 và

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

  6 (là cú pháp không dùng nữa)

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

  7 theo sau là ít hơn hai chữ số hex (bao gồm không có); Ví dụ

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

  8

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

  9 không theo sau là

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

  0 và theo sau là ít hơn bốn chữ số hex (bao gồm không có); Ví dụ

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

  1

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

  2 Bao quanh một điểm mã Unicode không hợp lệ-nó chứa một chữ số không phải là Hex hoặc giá trị của nó lớn hơn

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

  3; Ví dụ

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

  4 và

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

  5

Lưu ý:

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"

Tuy nhiên, điều này là vấn đề đối với các mẫu được gắn thẻ, ngoài nghĩa đen "nấu chín", còn có quyền truy cập vào các chữ cái thô (trình tự thoát được bảo tồn AS-IS).

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 ra khác là phổ biến. Do đó, hạn chế cú pháp của các chuỗi thoát được hình thành tốt được xóa khỏi các mẫu được gắn thẻ.

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

Tuy nhiên, các chuỗi thoát bất hợp pháp vẫn phải được thể hiệ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
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

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

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

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

Xem thêm