JavaScript nối thêm mẫu chữ

Tôi muốn bắt đầu chương này bằng cách chỉ ra rằng các thư viện tạo khuôn mẫu là một thứ thực sự tốt mà bạn nên sử dụng. Chuyển sang một hệ thống tạo khuôn mẫu thực sự, như ICanHaz hoặc Dot, thay vì xây dựng các chuỗi thông qua jQuery và nối thủ công, là một trong những thay đổi mô hình lớn nhất trong sự nghiệp ban đầu của tôi. Và mặc dù đây là một cuốn sách về cách viết mã nhỏ hơn, lấy trình duyệt làm trung tâm, nhưng có rất nhiều thư viện vi mô tạo khuôn mẫu có sẵn cho bạn và bạn nên sử dụng chúng

Không còn cách nào khác, hãy vui vẻ nào

Khái niệm cơ bản về mẫu chữ

Được giới thiệu trong ES2015, chuỗi mẫu là một loại chuỗi JavaScript mới. Thay vì sử dụng dấu ngoặc đơn hoặc dấu ngoặc kép, chúng được bao bọc trong dấu nháy ngược. Không giống như các loại chuỗi trước đây, chúng được phép trải rộng trên nhiều dòng, điều này khiến chúng trở nên tuyệt vời khi viết các đoạn HTML nhỏ

Nếu đó là tất cả những gì chúng ta thoát khỏi một kiểu chuỗi mới, thì nó sẽ khá tốt. Nhưng mẫu chữ cũng có một thủ thuật mới. chúng có thể được nội suy, nghĩa là chúng ta có thể đưa các giá trị vào chuỗi mà không cần phải nối chúng ở hai bên. Để làm như vậy, bạn sử dụng dấu phân cách ${ }, với giá trị dự định của bạn bên trong dấu ngoặc nhọn. Các biểu thức đó ngay lập tức được đánh giá và đặt vào chuỗi khi nó được xác định, điều đó có nghĩa là bạn cần có quyền truy cập vào biến (bạn sẽ có thể điều khiển. đăng nhập () nó)

Bạn không thể viết bất cứ điều gì không phải là một biểu thức đơn giản bên trong một mẫu chữ, do đó, không có câu lệnh hoặc vòng lặp if. Tuy nhiên, bạn có thể sử dụng các biểu thức bậc ba nếu bạn cần đưa ra lựa chọn

Do đó, các chuỗi mẫu rất lý tưởng cho đồ họa khi bạn chỉ cần kết xuất một số giá trị vào một chuỗi và hiển thị nó cho người dùng. Cá nhân tôi thích sử dụng chúng cho cửa sổ bật lên trên bản đồ Tờ rơi, nơi tôi sẽ hiển thị cho người dùng một số dữ liệu về điểm đánh dấu hoặc khu vực mà họ đã nhấp vào, ngay từ thuộc tính GeoJSON của tôi

Chúng cũng tuyệt vời để xây dựng bộ chọn, đây là cách yêu thích của tôi để sử dụng chuỗi mẫu, nếu không vì lý do nào khác ngoài thực tế là nó giúp việc chèn dấu ngoặc kép (bắt buộc đối với nhiều bộ chọn thuộc tính) trở nên dễ dàng hơn

Thêm với bản đồ

Lưu ý rằng mặc dù tôi đã nói rằng bạn không thể viết các vòng lặp theo mẫu chữ, nhưng điều đó chỉ đúng với cú pháp vòng lặp for. Tuy nhiên, bạn có thể gọi các hàm lặp như một phần của biểu thức và nếu hàm đó trả về một giá trị, nó sẽ được thêm vào chuỗi. Hàm lặp nào với các giá trị trả về thường có sẵn cho chúng ta? . bản đồ()

Vì vậy, chắc chắn, có thể thực hiện nhiều khuôn mẫu HTML cơ bản bằng cách sử dụng các loại chuỗi mới này. Nếu bạn đang cố gắng hoàn thành công việc một cách nhanh chóng, thì chúng là một công cụ tạo mẫu tuyệt vời. Nhưng nó không thực sự tiện dụng, đặc biệt là so với các loại biểu thức thân thiện với người dùng có sẵn trong Vue, React, Handlebars hoặc (cá nhân tôi yêu thích) Dot. Ngay khi nội dung trở nên dài hơn một vài dòng, bạn nên chuyển nội dung đó vào tệp riêng và nhập nội dung đó bằng quy trình xây dựng của bạn hoặc công cụ khác

Điều quan trọng nữa là chuyển văn bản sang một tệp khác nếu đó là ngôn ngữ thực tế có ngữ pháp, chẳng hạn như trình đổ bóng HTML hoặc WebGL. Đối với một điều, bạn không nhận được đánh dấu cú pháp và kiểm tra lỗi bên trong các chuỗi mẫu trong hầu hết các trình soạn thảo văn bản và bạn sẽ muốn điều đó khi mã ngày càng lớn hơn và phức tạp hơn

Đưa nó đi quá xa với các chuỗi được gắn thẻ

Chữ mẫu có một tính năng thú vị hơn. bạn có thể "gắn thẻ" chúng bằng cách dán một chức năng lên phía trước. Sau đó, trình duyệt gọi hàm đó và chuyển vào chuỗi được gắn thẻ dưới dạng sắp xếp các đối số kỳ lạ. đầu tiên, một mảng chứa tất cả các phần của chuỗi không được nội suy và sau đó, bạn lấy từng biểu thức được đánh giá bên trong các thẻ nội suy dưới dạng các giá trị riêng lẻ. Nó trông hơi giống thế này

Đây là một lựa chọn cú pháp kỳ lạ. Chẳng hạn, có chuỗi rỗng mà bạn nhận được sau phép nội suy cuối cùng. Và tại sao chuyển tất cả các giá trị dưới dạng đối số, thay vì dưới dạng mảng thứ hai? . Ví dụ: bạn có thể tạo chức năng tìm kiếm DOM trông quen thuộc sử dụng các thẻ để lưu một vài ký tự

Một cách sử dụng thú vị khác cho các chức năng thẻ là xây dựng và đưa ra các truy vấn cơ sở dữ liệu trong Node, vì chức năng thẻ có thể thoát khỏi các giá trị được nội suy và kiểm tra các cuộc tấn công tiêm nhiễm trước khi chèn chúng vào chuỗi SQL. Tuy nhiên, đối với hầu hết các phần, các mẫu chữ được gắn thẻ hiếm khi được sử dụng và không cung cấp nhiều thứ mà một lệnh gọi hàm đơn giản sẽ không cung cấp

Nhưng nếu bạn muốn thực hiện một số lựa chọn cuộc sống rất nghèo nàn, chúng ta có thể sử dụng nó để mô phỏng một hệ thống mẫu thực. Bạn biết đấy, vì mục đích giáo dục

Chúng ta sẽ bắt đầu với một chức năng thẻ, HTML(), chỉ nối các đầu vào của nó lại với nhau

Sau đó, chúng ta có thể tăng cường chức năng đó bằng các phương thức bổ sung, mỗi phương thức mô phỏng một loại chức năng mẫu tiêu chuẩn. Các phương thức đặc biệt này sẽ lấy các hàm làm đối số, bởi vì theo cách đó chúng ta có thể đánh giá chúng một cách có điều kiện (i. e. , nếu câu lệnh "nếu" không thành công, thì dù sao thì nó cũng không nên chạy mã đề phòng trường hợp nó có tác dụng phụ)

Đặt những thứ này lại với nhau, và bây giờ chúng ta có một ngôn ngữ tạo khuôn mẫu đang hoạt động — nếu gớm ghiếc — được xây dựng từ các nguyên mẫu mới của ES2015

Kết quả trong

Ý tưởng tốt? . Giống như nhiều API JavaScript hiện đại, mục tiêu của các chức năng thẻ là cung cấp cho người dùng các công cụ cấp thấp để họ có thể xây dựng các bản tóm tắt đơn giản hơn, dễ chịu hơn trên chúng. Nhưng nếu bạn cần thực hiện một số khuôn mẫu và kích thước mã là ưu tiên hàng đầu của bạn, thì đây có thể là chức năng nhỏ nhất có thể. Và thật tốt khi biết cách các thẻ hoạt động, trong những trường hợp đó (như thoát SQL hoặc biên dịch trình đổ bóng WebGL) mà cú pháp "độc nhất" của chúng có thể hữu ích

Làm cách nào để nối chuỗi mẫu trong JavaScript?

Bạn có thể nối chữ mẫu không?

Làm cách nào để sử dụng ${} trong JavaScript?

Mẫu chữ trong JavaScript là gì?