Chữ mẫu với thẻ html

Giới thiệu về chữ mẫu JavaScript, chữ mẫu được gắn thẻ và thư viện thẻ nổi tiếng

Ảnh của tác giả

Bạn đã bao giờ viết mã tương tự như thế này chưa?

Thông báo bảng điều khiển hiển thị

"devDependencies": {
  "lit-html": "^1.3.0"
}

3

Đầu ra thì đẹp, nhưng mã để soạn nó thì xấu và khó hiểu [dòng 4]. Hãy làm đẹp nó bằng cách sử dụng chữ mẫu và chữ mẫu được gắn thẻ

chữ mẫu

Theo Tài liệu web MDN

“Chữ mẫu là chữ chuỗi cho phép các biểu thức được nhúng

…

Văn bản mẫu được đặt trong dấu gạch ngược [_______14] ký tự thay vì dấu ngoặc kép hoặc dấu ngoặc đơn. ”

Mẫu chữ cho phép giữ chỗ [

"devDependencies": {
  "lit-html": "^1.3.0"
}

5]. Bất kỳ

"devDependencies": {
  "lit-html": "^1.3.0"
}

6 nào trong

"devDependencies": {
  "lit-html": "^1.3.0"
}

7 sẽ được đánh giá và nội suy vào chuỗi

Ví dụ: mã trước đó có thể được triển khai dưới dạng

Dòng 4 trông ngắn gọn hơn ở định dạng chữ mẫu

Chữ mẫu có thể được lồng vào nhau. Trong một mẫu có dấu gạch ngược, bạn có thể chèn dấu gạch ngược bên trong bên trong một trình giữ chỗ [

"devDependencies": {
  "lit-html": "^1.3.0"
}

5]

Đây là một ví dụ

Dòng 4 là một mẫu thuần túy theo nghĩa đen

Dòng 5 là một mẫu lồng nhau theo nghĩa đen

Cả hai dòng 4 và 5 đều xuất ra

"devDependencies": {
  "lit-html": "^1.3.0"
}

9

Các ký tự dòng mới được chèn vào mã nguồn là một phần của chữ mẫu. Việc sử dụng chữ mẫu để soạn các chuỗi nhiều dòng sẽ dễ dàng hơn

Đoạn mã sau sẽ giữ nguyên hình dạng trên đầu ra của bàn điều khiển

Chữ mẫu được gắn thẻ

Văn bản mẫu được gắn thẻ là một dạng văn bản mẫu nâng cao hơn. Chúng có một chức năng đứng trước chữ mẫu. Hàm này được gọi là hàm thẻ, có thể thực hiện các thao tác trên các ký tự mẫu và trả về các chuỗi được thao tác [hoặc bất kỳ thứ gì]

Đối số đầu tiên của hàm thẻ chứa một mảng các giá trị chuỗi bắt nguồn từ chữ mẫu của nó. Các đối số còn lại là các biểu thức trong mẫu chữ

Chúng ta tạo hàm sau,

"devDependencies": {
  "lit-html": "^1.3.0"
}

0, để trả về các đối số

Sau đây là cách sử dụng với văn bản thuần túy

Đối số đầu tiên là một mảng.

"devDependencies": {
  "lit-html": "^1.3.0"
}

0

Sau đây là cách sử dụng với một mẫu nhiều dòng theo nghĩa đen

Đối số đầu tiên là một mảng.

"devDependencies": {
  "lit-html": "^1.3.0"
}

1. Kết quả bảo toàn các phím enter

Khi chữ mẫu là một chuỗi có nội suy, đối số đầu tiên là một mảng được lấy từ các giá trị của chuỗi không giữ chỗ. Phần còn lại của các đối số là biểu thức giữ chỗ. Nói cách khác, đối số thứ hai là giá trị nội suy thứ nhất [

"devDependencies": {
  "lit-html": "^1.3.0"
}

2], đối số thứ ba là giá trị nội suy thứ hai [

"devDependencies": {
  "lit-html": "^1.3.0"
}

3], v.v.

Đối số đầu tiên là

"devDependencies": {
  "lit-html": "^1.3.0"
}

4, đối số thứ hai là

"devDependencies": {
  "lit-html": "^1.3.0"
}

2 và đối số thứ ba là

"devDependencies": {
  "lit-html": "^1.3.0"
}

3

Dưới đây là các ví dụ khác về chữ mẫu được gắn thẻ và thông báo bảng điều khiển của chúng

Cho đến nay, chúng ta đã sử dụng các khai báo hàm để xác định các hàm thẻ. Hàm thẻ cũng có thể là biểu thức hàm. Bất kể đó là khai báo hàm hay biểu thức hàm, hàm thẻ có thể sử dụng các ký tự mẫu khác và ký tự mẫu được gắn thẻ trong phần thân hàm của nó

Bạn có thể nhận thấy rằng có một thuộc tính

"devDependencies": {
  "lit-html": "^1.3.0"
}

7 trong tham số đầu tiên của chức năng thẻ. Nó tương tự như

"devDependencies": {
  "lit-html": "^1.3.0"
}

8, giữ các chuỗi thô khi chúng được nhập vào mà không xử lý các chuỗi thoát

Dòng 5 cho thấy dòng mới bắt đầu một dòng mới

Dòng 9 hiển thị ký tự dòng mới được giữ nguyên với

"devDependencies": {
  "lit-html": "^1.3.0"
}

8

Dòng 12 sử dụng

"devDependencies": {
  "lit-html": "^1.3.0"
}

8 và nó không ảnh hưởng đến kết quả

Các dòng 17-38 là hàm

"devDependencies": {
  "lit-html": "^1.3.0"
}

31, được sử dụng bởi dòng 39. Ví dụ này cho thấy cách sử dụng các tham số của chức năng thẻ và giá trị thô

Thư viện thẻ nổi tiếng

Mẫu chữ được gắn thẻ đã có sẵn kể từ ES2015. Nó đã được áp dụng cho một số thư viện

Nguồn. xu hướng npm

• "devDependencies": {
    "lit-html": "^1.3.0"
  }

  32 sử dụng các ký tự mẫu được gắn thẻ để cho phép viết CSS bằng JavaScript. Nó được mô tả chi tiết trong một bài báo khác

• "devDependencies": {
    "lit-html": "^1.3.0"
  }

  33 sử dụng chữ mẫu được gắn thẻ để cho phép xử lý thời gian biên dịch

• "devDependencies": {
    "lit-html": "^1.3.0"
  }

  34 là các thẻ chữ mẫu để xử lý các chuỗi trong ES2015+

• "devDependencies": {
    "lit-html": "^1.3.0"
  }

  35 là thư viện tạo khuôn mẫu HTML hiệu quả, biểu cảm, có thể mở rộng cho JavaScript

ví dụ thẻ chung

"devDependencies": {
  "lit-html": "^1.3.0"
}

36 xuất một loạt các thẻ mẫu nấu sẵn hữu ích để sử dụng. Tạo Ứng dụng React bao gồm gói theo mặc định. Các chức năng thẻ này có thể rất tiện dụng

Thẻ

"devDependencies": {
  "lit-html": "^1.3.0"
}

37 thụt lề mảng cũng như ký tự xuống dòng đúng cách khi thay thế chuỗi

Dòng 9 in ra chuỗi kết quả không có thẻ

"devDependencies": {
  "lit-html": "^1.3.0"
}

37. Kết quả là trong bình luận [dòng 10-13]. Có thêm một dòng mới trên dòng 10 và căn chỉnh trên dòng 12 không chính xác

Dòng 20 in ra chuỗi kết quả có thẻ

"devDependencies": {
  "lit-html": "^1.3.0"
}

37. Kết quả là trong bình luận [dòng 21-25]. Sự liên kết và thụt đầu dòng là chính xác

Thẻ

"devDependencies": {
  "lit-html": "^1.3.0"
}

40 tương tự như

"devDependencies": {
  "lit-html": "^1.3.0"
}

37. Ngoài ra, nó thực hiện thoát HTML an toàn cho các chuỗi đến từ sự thay thế

Dòng 15 sử dụng thẻ

"devDependencies": {
  "lit-html": "^1.3.0"
}

40. Thoát HTML an toàn được áp dụng cho mã được tạo động [dòng 22-24] được hiển thị trong nhận xét [dòng 21-25]

Thẻ

"devDependencies": {
  "lit-html": "^1.3.0"
}

43 nội tuyến một thay thế mảng dưới dạng danh sách được phân tách bằng dấu phẩy, cuối cùng được đặt trước từ

"devDependencies": {
  "lit-html": "^1.3.0"
}

44. Ngoài ra, chuỗi được hiển thị trên một dòng

Dòng 4 sử dụng thẻ

"devDependencies": {
  "lit-html": "^1.3.0"
}

43. Sẽ rất hiệu quả khi kết hợp các chuỗi nếu chúng không quan tâm đến i18n

Có nhiều thẻ thú vị trong

"devDependencies": {
  "lit-html": "^1.3.0"
}

36. Thật thú vị khi thử chúng

"devDependencies": {
  "lit-html": "^1.3.0"
}

36 cũng hiển thị một giao diện để tạo các thẻ mẫu của riêng bạn. Thậm chí còn thú vị hơn khi chơi với việc tạo các thẻ mẫu

ví dụ lit-html

"devDependencies": {
  "lit-html": "^1.3.0"
}

48 cung cấp chức năng viết các mẫu HTML bằng cách sử dụng các mẫu chữ. Nó cung cấp hai mặt hàng xuất khẩu chính

• "devDependencies": {
    "lit-html": "^1.3.0"
  }

  37. Thẻ mẫu được sử dụng để tạo

  "devDependencies": {
    "lit-html": "^1.3.0"
  }

  50

• "devDependencies": {
    "lit-html": "^1.3.0"
  }

  51. Một chức năng kết xuất một

  "devDependencies": {
    "lit-html": "^1.3.0"
  }

  50 thành một bộ chứa DOM

Nó cần cài đặt gói

"devDependencies": {
  "lit-html": "^1.3.0"
}

1

Chúng ta có thể thấy gói mới trong

"devDependencies": {
  "lit-html": "^1.3.0"
}

53 của

"devDependencies": {
  "lit-html": "^1.3.0"
}

54

"devDependencies": {
  "lit-html": "^1.3.0"
}

Dưới đây là ví dụ hiển thị thông báo lời chào tới phần tử có ID

"devDependencies": {
  "lit-html": "^1.3.0"
}

55

Phần kết luận

Trong bài viết này, chúng tôi đã khám phá các ký tự mẫu JavaScript, ký tự mẫu được gắn thẻ và các thư viện thẻ nổi tiếng. Chúng có hiệu quả để thao tác chuỗi và hơn thế nữa

Tuy nhiên, cũng có những lý do để cân nhắc việc tránh các chữ mẫu được gắn thẻ. Người ta nói rằng viết mã theo chuỗi là trái với quy luật cơ bản của công nghệ phần mềm vì nó mang lại những thách thức cho việc kiểm tra kiểu, linting, định dạng, i18n, tối ưu hóa, biên dịch, v.v.

Làm cách nào để sử dụng HTML trong mẫu chữ?

Tôi có thể sử dụng ${} trong HTML không?

Chữ HTML là gì?

Mẫu được gắn thẻ theo nghĩa đen là gì?