Tại sao backticks được sử dụng trong javascript?
|
Từ bài học này, bạn cần hiểu cú pháp const name = 'Gerardo';2 là gì. Nó hoạt động như thế nào và nó được sử dụng như thế nào? Show Câu trả lờiĐôi khi được gọi là mẫu chữ hoặc chuỗi mẫu, định dạng này là một cách khác để nhập một chuỗi bằng cách sử dụng `` (được gọi là dấu gạch ngược hoặc dấu gạch chéo). Nó có thể được sử dụng dễ dàng như một sự thay thế Đây là tất cả các chuỗi hợp lệ, tuy nhiên, nó bổ sung thêm một số tính năng bổ sung khiến nó rất hữu ích. Đầu tiên bằng cách sử dụng backticks, các từ có dấu nháy đơn có thể dễ dàng được kết hợp vào chuỗi mà không cần sử dụng ký tự thoát \. (lưu ý rằng trong ví dụ, dòng thứ hai là hợp lệ) Thứ hai, nó cho phép đưa vào một biến mà không cần nối (bạn sẽ sử dụng nó trong bài học này). Điều này được thực hiện bằng cách sử dụng const name = 'Gerardo';3 để thêm chuỗi biến trong dòng vào chuỗi hiện tại của bạn Điều này đặc biệt hữu ích nếu bạn muốn in ra các câu lệnh phức tạp so sánh các biến khác nhau chẳng hạn Hy vọng điều này sẽ giúp, xin vui lòng thảo luận dưới đây. Khái niệm này được giới thiệu trong Giới thiệu về Javascript - Nội suy chuỗi Tôi nghĩ sẽ hữu ích hơn rất nhiều cho những người đang cố gắng học JS thông qua những bài học này để giới thiệu các khái niệm mới thay vì chỉ ném chúng vào mọi người và hy vọng rằng họ sẽ lên diễn đàn để điều tra. Các ký tự mẫu hoặc thực tế là trình vòng lặp 'for...in' trả về một chuỗi không được giải thích trong bài học này hoặc các bài học trước, điều này đã tạo ra nhiều nhầm lẫn không cần thiết Điều chỉnh. Họ có đề cập rằng các phím là các chuỗi trong Bài học 2 của Mô-đun và giới thiệu các mẫu chữ ngay từ đầu khóa học, tuy nhiên, sẽ tốt hơn nếu lặp lại điều đó trong phần 'Đừng quên rằng các phím là các chuỗi'. ’ hình thức mà một số cuốn sách giáo dục sử dụng bên lề. Có vẻ như một số người không thực sự hiểu hoặc nắm bắt được kiểu dữ liệu là gì ngoài sự phân biệt trực quan bề ngoài về việc nó nằm trong dấu ngoặc kép. Có lẽ một lời giải thích bổ sung sẽ tốt khi giới thiệu chúng Đồng thời, tôi nghĩ sẽ tốt hơn nếu thêm rằng vòng lặp for…in chỉ lặp qua các khóa của một đối tượng và nó không biết gì về đối tượng đó. Điều này sẽ làm sáng tỏ giả định của mọi người rằng nếu bạn có thể lặp lại các khóa của một đối tượng thì bạn phải có khả năng làm những việc khác với nó Cái hay của backticks là chúng dành cho tất cả các ý định chỉ là một dạng trích dẫn khác mà JS nhận ra và coi như một đối tượng chuỗi. Thêm vào phép nội suy và nó là một cải tiến tốt nhất so với phép nối ES5 Điều này có nghĩa là chúng ta có thể đặt dấu ngoặc kép thông thường sang một bên trừ khi chúng ta sử dụng chúng làm ký tự in được. Nó không phải là một mệnh lệnh. Tất cả các trích dẫn đều hợp lệ và được công nhận là phân định chuỗi ký tự. Những cái này chỉ có pizzazz Bản chất của nội suy là hợp nhất các tham chiếu dữ liệu động với văn bản hoặc văn xuôi đúc sẵn. Chúng tôi chỉ cần viết một biểu thức mẫu (______42) trong chuỗi của mình và chèn dữ liệu hoặc biểu thức của nó vào bên trong. Voila nó trở thành một phần của chuỗi Có thể bạn đã thấy cả dấu ngoặc đơn và dấu ngoặc kép được sử dụng trong JavaScript. Tôi tự hỏi khi nào thì tôi nên sử dụng dấu ngoặc đơn ‘’ so với dấu ngoặc kép “” và dấu gạch ngược `` trong mã của mình và muốn chia sẻ thông tin đó với những người thắc mắc khác ngoài kia Dấu ngoặc đơn và dấu ngoặc kép hoạt động giống hệt nhau trong JavaScript Điều quan trọng nhất là nhất quán với việc bạn sử dụng dấu ngoặc đơn và dấu ngoặc kép Nếu bạn là người tuân theo quy ước, tôi sẽ đọc và làm theo Backticks hay còn gọi là “mẫu chữ” hay còn gọi là “chuỗi mẫu” hay còn gọi là “chuỗi ưa thích” đã được giới thiệu trong thông số kỹ thuật ES2015. MDN tuyên bố “Chữ mẫu là chữ chuỗi cho phép các biểu thức được nhúng. Bạn có thể sử dụng các tính năng nội suy chuỗi và chuỗi nhiều dòng với chúng. Chúng được gọi là “chuỗi mẫu” trong các phiên bản trước của đặc tả ES2015” Backticks thường được sử dụng cho các chuỗi nhiều dòng hoặc khi bạn muốn nội suy một biểu thức trong chuỗi của mình Tuy nhiên, với đặc điểm kỹ thuật ES2015, có thể tạo ra cái được gọi là mẫu chữ hoặc chuỗi mẫu đủ để đóng gói văn bản trong backticks `some text`Điều này sẽ mang lại cho chúng tôi một số lợi thế so với hai phương pháp chính mà tôi sẽ mô tả trong suốt bài viết này. Hãy xem chúng Nối và nội suy chuỗi Đây có lẽ là một trong những cách sử dụng backticks phổ biến và rộng rãi nhất vì nó sẽ cho phép chúng ta nối và nội suy các chuỗi để mã của chúng ta sạch hơn nhiều Chúng ta sẽ xem xét một vài ví dụ so sánh cú pháp cũ với cú pháp do backticks cung cấp const name = 'Gerardo'; Như bạn có thể thấy, nhờ các mẫu chữ, chúng tôi có được mã dễ đọc hơn nhiều, tiết kiệm cho chúng tôi việc nối nhiều chuỗi thông qua toán tử const user = getUserFromApi();// "Old syntax"const userInfo = 'User info: ' + user.getName() + ' ' + user.getEmail();// "New syntax"const userInfo = `User info: ${user.getName()} ${user.getEmail()}`;1 Tất nhiên, chúng ta cũng có thể thực thi mã trong chuỗi mẫu const user = getUserFromApi();// "Old syntax"const userInfo = 'User info: ' + user.getName() + ' ' + user.getEmail();// "New syntax"const userInfo = `User info: ${user.getName()} ${user.getEmail()}`; Không cần thiết phải thoát khỏi các ký tự “ và ‘ Sử dụng \ Một ưu điểm khác của việc sử dụng backticks ( const user = getUserFromApi();// "Old syntax"const userInfo = 'User info: ' + user.getName() + ' ' + user.getEmail();// "New syntax"const userInfo = `User info: ${user.getName()} ${user.getEmail()}`;2 ) là không còn cần phải thoát khỏi dấu nháy kép ( const user = getUserFromApi();// "Old syntax"const userInfo = 'User info: ' + user.getName() + ' ' + user.getEmail();// "New syntax"const userInfo = `User info: ${user.getName()} ${user.getEmail()}`;0 ) hoặc dấu nháy đơn ( const name = 'Gerardo';9 ), điều mà chúng ta thường buộc phải thực hiện khi làm việc với các ngôn ngữ như tiếng Anh Hoặc ví dụ Vì vậy, một lần nữa, chúng tôi nhận được nhiều mã dễ đọc hơn Chuỗi trong một số dòng Trong JavaScript, không thể khai báo chuỗi trên nhiều dòng. Ví dụ: nếu chúng tôi thử như sau Chúng tôi nhận được lỗi sau Điều này khá khó xử, đặc biệt là khi chúng tôi đang tạo HTML. Giải pháp thay thế mà chúng tôi có cho đến ECMA2015 là sử dụng ký tự dòng mới ( const user = getUserFromApi();// "Old syntax"const userInfo = 'User info: ' + user.getName() + ' ' + user.getEmail();// "New syntax"const userInfo = `User info: ${user.getName()} ${user.getEmail()}`;5 ) Nhưng điều đó dù sao cũng mang lại vấn đề tại thời điểm biên dịch
Một tùy chọn khác là sử dụng toán tử const user = getUserFromApi();// "Old syntax"const userInfo = 'User info: ' + user.getName() + ' ' + user.getEmail();// "New syntax"const userInfo = `User info: ${user.getName()} ${user.getEmail()}`;1 Tuy nhiên, với backticks chúng ta có thể viết như sau Vì vậy, mã chúng tôi nhận được thực sự rõ ràng Tất nhiên, điều quan trọng cần nhớ là các khoảng trắng không bị xóa, vì vậy nếu chúng ta tạo một chuỗi như sau… const name = 'Gerardo';0 … những gì chúng ta sẽ nhận được sẽ như sau const name = 'Gerardo';1 Vì vậy, chúng tôi sẽ phải sử dụng phương pháp const user = getUserFromApi();// "Old syntax"const userInfo = 'User info: ' + user.getName() + ' ' + user.getEmail();// "New syntax"const userInfo = `User info: ${user.getName()} ${user.getEmail()}`;7 để tránh thêm khoảng trắng Mẫu được gắn thẻ Một tính năng khác do backticks cung cấp là khả năng tạo cái được gọi là mẫu được gắn thẻ (còn được gọi là chức năng thẻ), thứ được sử dụng bởi các thư viện phổ biến như Apollo hoặc Thành phần theo kiểu const name = 'Gerardo';2 Cả const user = getUserFromApi();// "Old syntax"const userInfo = 'User info: ' + user.getName() + ' ' + user.getEmail();// "New syntax"const userInfo = `User info: ${user.getName()} ${user.getEmail()}`;8 và const user = getUserFromApi();// "Old syntax"const userInfo = 'User info: ' + user.getName() + ' ' + user.getEmail();// "New syntax"const userInfo = `User info: ${user.getName()} ${user.getEmail()}`;9 đều thực sự là các hàm (hàm thẻ) trích xuất các đối số của chúng từ một mẫu theo nghĩa đen (nghĩa là gói văn bản trong dấu gạch ngược) Ví dụ, trong trường hợp của thành phần được tạo kiểu const name = 'Gerardo';3 Để hiểu cách thức hoạt động của các loại hàm này, giả sử chúng ta có hàm const name = 'Gerardo';4 Nếu bây giờ chúng ta gọi nó như thể nó là một thẻ chức năng const name = 'Gerardo';5 Những gì chúng ta sẽ nhận được trên bảng điều khiển sẽ là const name = 'Gerardo';6 Tức là thẻ hàm đang nhận ba đối số
Tận dụng toán tử trải rộng, chúng ta có thể viết lại hàm const name = 'Gerardo';7 Theo cách này, độ dài của mảng Kể từ thời điểm này trở đi, các khả năng được cung cấp bởi các chức năng thẻ rất đa dạng, như được minh họa bởi các thư viện Apollo và Thành phần theo kiểu hoặc, ví dụ, ví dụ sau, nơi chúng ta có thể thấy các loại chức năng này được sử dụng như thế nào để dịch văn bản từ ứng dụng của chúng tôi const name = 'Gerardo';8 Suy nghĩ cuối cùng Như bạn có thể thấy, mặc dù lúc đầu, nó có thể là một tính năng JavaScript không được chú ý, nhưng các ký tự mẫu được gắn thẻ mang lại cho chúng ta rất nhiều tính linh hoạt khi viết mã và ngày càng trở nên phổ biến nhờ các thư viện như Apollo và Các thành phần được tạo kiểu Hi vọng bài viết này đã giúp các bạn có những bước đầu tiếp cận với chúng hoặc củng cố thêm các khái niệm như hàm tag Backticks được sử dụng để làm gì?Dấu lùi ` là một dấu đánh máy được sử dụng chủ yếu trong điện toán . Nó còn được gọi là backquote, Grave, hoặc Grave Accent. Ký tự này được thiết kế cho máy đánh chữ để thêm dấu trọng âm vào một chữ cái gốc (viết thường), bằng cách gõ đè lên trên chữ cái đó.
Phím backtick trong JavaScript là gì?Chữ mẫu được đặt trong các ký tự dấu gạch ngược ( ` ) thay vì dấu nháy kép hoặc nháy đơ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. ${biểu thức}.
Backtick trong mã hóa là gì?Tick ngược nghĩa là gì? . ” a “shell” form of command structure that some call a “double operator.” Về cơ bản, việc sử dụng backticks cho phép đánh giá một chuỗi như một phần của lệnh chung. Nó có thể được sử dụng trong các ngôn ngữ điện toán như Perl hoặc các loại mã khác.
Backticks có chậm hơn các chuỗi khác trong JavaScript không?Tốc độ của chuỗi ký tự trong JavaScript
. Nói cách khác, phép nội suy biến mà chúng ta muốn từ các ký tự backtick là gót chân Achilles — việc xử lý các ký tự mẫu làm chậm hiệu suất. backtick literals are less performant (in other words, slower) because they need to processed. In other words, the variable interpolation that we want from backtick literals are an Achilles' heel — processing the template literals slows performance. |
