Hướng dẫn missing letters javascript - thiếu các chữ cái 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ố

`\`` === "`"; // --> true

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.

`\`` === "`"; // --> 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 sang

`\`` === "`"; // --> true

`\`` === "`"; // --> 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 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 (

`\`` === "`"; // --> true

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:

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

Để 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 (

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

`\`` === "`"; // --> true

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

`\${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."

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

Với các chữ cái mẫu, 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

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

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ử

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

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ỗ

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

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:

alphabetSlice.map((e, i) => {
    if (e !== array[i]) {
        return e;
    }
}); // for your example will create array 

Với việc làm tổ của các mẫu chữ, bạn có thể làm điều này:

alphabetSlice.map((e, i) => {
    if (e !== array[i]) {
        return e;
    }
}); // for your example will create array 

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.

alphabetSlice.map((e, i) => {
    if (e !== array[i]) {
        return e;
    }
}); // for your example will create array 

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.

alphabetSlice.map((e, i) => {
    if (e !== array[i]) {
        return e;
    }
}); // for your example will create array 

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

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

alphabetSlice.map((e, i) => {
    if (e !== array[i]) {
        return e;
    }
}); // for your example will create array 

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

alphabetSlice.map((e, i) => {
    if (e !== array[i]) {
        return e;
    }
}); // for your example will create array 

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.

alphabetSlice.map((e, i) => {
    if (e !== array[i]) {
        return e;
    }
}); // for your example will create array 

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

alphabetSlice.map((e, i) => {
    if (e !== array[i]) {
        return e;
    }
}); // for your example will create array 

Đố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

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

Đố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.

alphabetSlice.map((e, i) => {
    if (e !== array[i]) {
        return e;
    }
}); // for your example will create array 

Đ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

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

Dây thô

Thuộc tính

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

alphabetSlice.map((e, i) => {
    if (e !== array[i]) {
        return e;
    }
}); // for your example will create array 

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

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

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tagFunction`string text ${expression} string text`

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"

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tagFunction`string text ${expression} string text`

Đ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ể.

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tagFunction`string text ${expression} string text`

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:

• `\${1}` === "${1}"; // --> true
  

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

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

  5, hoặc

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

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

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

  7 và

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

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

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

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

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

  0

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

  1 không theo sau là

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

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

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

  3

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

  4 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

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

  5; Ví dụ

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

  6 và

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

  7

Lưu ý:

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

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

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ẻ.

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tagFunction`string text ${expression} string text`

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ử

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tagFunction`string text ${expression} string text`

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tagFunction`string text ${expression} string text`

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ẻ:

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tagFunction`string text ${expression} string text`

Xem thêm