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

Trong bài này chúng ta sẽ tìm hiểu về cú pháp cũng như làm một số ví dụ về Template String trong ES6.Template String trong ES6.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức.

Trong Laravel có Blade template, trong Phalcon có Volt template, vậy trong Javascript có template nào hay không? Tính từ ES5 trở về trước thì chưa xuất hiện khái niệm template string mà nó chỉ vừa mới thêm vào trong phiên bản ES6, nên đa số các lập trình viên không sử dụng.

1. HTML Template String trong ES6

Template String sẽ thay thế cách nối chuỗi thông thường.

Cấu trúc

Template String được bao bọc bởi cặp dấu

var domains = [
    'freetuts.net',
    'facebook.com',
    'google.com'
];

// Loop
domains.map[function[domain, key]{
    console.log[`
${domain}
`];
}];

8.

Bài viết này được đăng tại [free tuts .net]

let temp = `
    Chào mừng bạn đến với freetuts.net
`;

Khai báo tham số

Để khai báo tham số trong chuỗi Template String thì bạn sử dụng cú pháp ${ten_bien} và đặt vào vị trí muốn hiển thị.

let temp = `
    Chào mừng bạn đến với ${website}
`;

Trong chuỗi Template String nếu có tham số thì bắt buộc trước khi sử dụng ta phải khai báo biến, nếu không sẽ bị lỗi ngay.

var website = 'freetuts.net';

let temp = `
    Chào mừng bạn đến với ${website}
`;

console.log[temp];

Kết quả:

2. Lặp dữ liệu và gán vào Template String

Trong những chức năng hiển thị danh sách thì chúng ta sẽ lặp dữ liệu và gán các giá trị vào ở mỗi vòng lặp.

Lặp đơn giản

Ví dụ dưới đây lặp danh sách domain và gán vào template.

var domains = [
    'freetuts.net',
    'facebook.com',
    'google.com'
];

// Loop
domains.map[function[domain, key]{
    console.log[`
${domain}
`];
}];

Kết quả:

2. Lặp dữ liệu và gán vào Template String

Trong những chức năng hiển thị danh sách thì chúng ta sẽ lặp dữ liệu và gán các giá trị vào ở mỗi vòng lặp.

var domains = [
    {
        domain : "freetuts.net",
        author: "Nguyen Van Cuong"
    },
    {
        domain : "google.com",
        author: "Sergey Brin"
    }
];

// Loop
domains.map[function[domain, key]{
    var tmpl = `
        

            
${domain.domain}
            
${domain.author}
        
    `;
    console.log[tmpl];
}];

Kết quả:

2. Lặp dữ liệu và gán vào Template String

Trong những chức năng hiển thị danh sách thì chúng ta sẽ lặp dữ liệu và gán các giá trị vào ở mỗi vòng lặp.

Lặp đơn giản

Ví dụ dưới đây lặp danh sách domain và gán vào template.

1. Giới thiệu

Trong phiên bản ES6 2015 đã thêm các template literals [kí tự chuỗi] vào JavaScript. Template literals là một hình thức tạo chuỗi mới trong JavaScript, bổ sung nhiều tính năng mới mạnh mẽ, chẳng hạn như tạo chuỗi nhiều dòng dễ dàng hơn và sử dụng placeholders để nhúng biểu thức vào trong chuỗi. Ngoài ra, một tính năng nâng cao được gọi là tagged template literals cho phép bạn thực hiện các thao tác trên các biểu thức trong một chuỗi. Tất cả các tính năng này làm tăng thêm các tùy chọn để thao tác chuỗi, cho phép bạn dễ dàng tạo các chuỗi động có thể được sử dụng cho URL hoặc các chức năng tùy chỉnh ở các thành phần HTML.

Trong bài viết này, bạn sẽ tìm hiểu sự khác biệt giữa single/double quote[dấu nháy đơn/kép] và template literals, các cách khác nhau để khai báo các chuỗi có hình dạng khác nhau, bao gồm các chuỗi nhiều dòng và chuỗi động thay đổi tùy thuộc vào giá trị của một biến hoặc biểu thức. Sau đó, bạn sẽ tìm hiểu về các tagged template literals và xem một số ví dụ thực tế về các dự án sử dụng chúng.

2. Khởi tạo chuỗi

Phần này sẽ nêu các cách khai báo chuỗi bằng dấu nháy đơn và dấu nháy kép và sau đó sẽ hiển thị cách thực hiện tương tự với template literals.

Trong JavaScript, một chuỗi có thể được viết bằng dấu nháy đơn [' '] hoặc nháy kép [" "] như sau :

const single = 'This is singe quote.'
const double = "This is double quote."

Không có sự khác biệt lớn về JavaScript giữa các chuỗi sử dụng nháy đơn hoặc kép, không giống như các ngôn ngữ khác có thể cho phép nội suy trong một loại chuỗi nhưng không phải là chuỗi khác. Trong ngữ cảnh này, phép nội suy đề cập đến việc đánh giá một placeholder như là một phần động của chuỗi.

Việc sử dụng các chuỗi single/double quote chủ yếu tùy thuộc vào sở thích và quy ước cá nhân, nhưng chúng có thể được sử dụng kết hợp, mỗi loại chuỗi chỉ cần thoát khỏi loại quote riêng của mình:

// Escaping a single quote in a single-quoted string
const single = '"We don\'t make mistakes. We just have happy accidents." - Bob Ross'

// Escaping a double quote in a double-quoted string
const double = "\"We don't make mistakes. We just have happy accidents.\" - Bob Ross"

console.log[single]
console.log[double]

=> Result:
"We don't make mistakes. We just have happy accidents." - Bob Ross
"We don't make mistakes. We just have happy accidents." - Bob Ross

Mặt khác, các template literals được viết bằng cách bao quanh chuỗi có dấu trọng âm [`]:

const template = `Find freedom on this canvas.`

Các template literals có thể làm mọi thứ mà các chuỗi thông thường có thể, vì vậy bạn có thể thay thế tất cả các chuỗi trong dự án của bạn bằng chúng và có cùng chức năng. Tuy nhiên, quy ước phổ biến nhất là chỉ sử dụng các template khi sử dụng các khả năng bổ sung của các template đó và nhất quán sử dụng dấu ngoặc đơn hoặc dấu ngoặc kép cho tất cả các chuỗi đơn giản khác. Theo tiêu chuẩn này sẽ giúp code của bạn dễ đọc hơn nếu được kiểm tra bởi các dev khác.

Bây giờ bạn đã thấy cách khai báo chuỗi bằng dấu ngoặc đơn, dấu ngoặc kép và backticks, bạn có thể chuyển sang lợi thế đầu tiên của template literals: viết chuỗi nhiều dòng.

3. Multi-line Strings

Trong phần này, trước tiên bạn sẽ chạy qua cách các multi-line string được khai báo trước ES6, sau đó xem cách các template literals làm cho việc này dễ dàng hơn.

Ban đầu, nếu bạn muốn viết một chuỗi multi-line, bạn sẽ sử dụng concatenation operator [toán tử nối]. Tuy nhiên, đây không phải lúc nào cũng là một quá trình đơn giản. Ví dụ :

const address = 'Homer J. Simpson' + '742 Evergreen Terrace' + 'Springfield'

Điều này có thể cho phép bạn chia chuỗi thành các dòng nhỏ hơn và đưa nó qua nhiều dòng trong trình soạn thảo, nhưng nó không có tác dụng đối với đầu ra của chuỗi. Trong trường hợp này, tất cả các chuỗi sẽ nằm trên một dòng và không được phân tách bằng dấu xuống dòng hoặc dấu cách. Nếu bạn đã đăng nhập địa chỉ vào console, bạn sẽ nhận được những điều sau đây:

Homer J. Simpson742 Evergreen TerraceSpringfield

Ký tự dấu gạch chéo ngược [] có thể được sử dụng để tiếp tục chuỗi trên nhiều dòng:

let temp = `
    Chào mừng bạn đến với ${website}
`;

0

Điều này sẽ giữ lại bất kỳ thụt lề nào dưới dạng khoảng trắng, nhưng chuỗi vẫn sẽ nằm trên một dòng trong đầu ra:

let temp = `
    Chào mừng bạn đến với ${website}
`;

1

Sử dụng ký tự dòng mới [\ n], bạn có thể tạo một chuỗi multi-line thực sự:

let temp = `
    Chào mừng bạn đến với ${website}
`;

2

Mở console lên bạn sẽ thấy :

let temp = `
    Chào mừng bạn đến với ${website}
`;

3

Tuy nhiên, sử dụng các ký tự xuống dòng mới để chỉ định các chuỗi multi-line có thể phản tác dụng. Ngược lại, việc tạo một chuỗi multi-line với các template literals có thể đơn giản hơn nhiều. Không cần nối, sử dụng các ký tự dòng mới hoặc sử dụng dấu gạch chéo ngược. Chỉ cần nhấn enter và viết chuỗi trên nhiều dòng hoạt động theo mặc định:

let temp = `
    Chào mừng bạn đến với ${website}
`;

4

Đầu ra sẽ giống như đầu vào:

let temp = `
    Chào mừng bạn đến với ${website}
`;

3

Bất kỳ sự thụt vào nào sẽ được giữ nguyên, vì vậy điều quan trọng là không thụt vào bất kỳ dòng bổ sung nào trong chuỗi nếu điều đó không mong muốn. Ví dụ :

let temp = `
    Chào mừng bạn đến với ${website}
`;

6

Mặc dù kiểu viết dòng này có thể làm cho code của bạn dễ đọc hơn, nhưng đầu ra sẽ hơi kì cục:

let temp = `
    Chào mừng bạn đến với ${website}
`;

7

Với các chuỗi multi-line đã được giải quyết, phần tiếp theo sẽ là cách các biểu thức nội suy vào các giá trị của chúng với các khai báo chuỗi khác nhau.

4. Biểu thức nội suy

Trước ES6, nối chuỗi được sử dụng để tạo chuỗi động với các biểu thức hoặc biến :

let temp = `
    Chào mừng bạn đến với ${website}
`;

8

Chạy trong console :

let temp = `
    Chào mừng bạn đến với ${website}
`;

9

Với template literals, một biểu thức có thể được nhúng trong một placeholder. Một placeholder được biểu thị bằng

var domains = [
    'freetuts.net',
    'facebook.com',
    'google.com'
];

// Loop
domains.map[function[domain, key]{
    console.log[`
${domain}
`];
}];

9, với bất kỳ thứ gì trong dấu ngoặc nhọn được coi là JavaScript và mọi thứ nằm ngoài dấu ngoặc được coi là một chuỗi:

var website = 'freetuts.net';

let temp = `
    Chào mừng bạn đến với ${website}
`;

console.log[temp];

0

In ra trong console :

var website = 'freetuts.net';

let temp = `
    Chào mừng bạn đến với ${website}
`;

console.log[temp];

1

Một ví dụ phổ biến về việc nhúng các giá trị trong chuỗi có thể là để tạo các URL động. Có vẻ hơi cồng kềnh. Ví dụ: phần sau đây khai báo một hàm để tạo chuỗi truy cập OAuth:

var website = 'freetuts.net';

let temp = `
    Chào mừng bạn đến với ${website}
`;

console.log[temp];

2

Chạy thử trong console:

var website = 'freetuts.net';

let temp = `
    Chào mừng bạn đến với ${website}
`;

console.log[temp];

3

Sử dụng phép nội suy chuỗi, bạn không còn phải theo dõi việc mở và đóng chuỗi và vị trí toán tử nối. Ví dụ :

var website = 'freetuts.net';

let temp = `
    Chào mừng bạn đến với ${website}
`;

console.log[temp];

4

Kết quả tương tự với cách nối chuỗi trên :

var website = 'freetuts.net';

let temp = `
    Chào mừng bạn đến với ${website}
`;

console.log[temp];

3

Phương thức

var domains = [
    {
        domain : "freetuts.net",
        author: "Nguyen Van Cuong"
    },
    {
        domain : "google.com",
        author: "Sergey Brin"
    }
];

// Loop
domains.map[function[domain, key]{
    var tmpl = `
        

            
${domain.domain}
            
${domain.author}
        
    `;
    console.log[tmpl];
}];

0 dùng để loại bỏ các khoảng trắng đầu cuối , ví dụ :

var website = 'freetuts.net';

let temp = `
    Chào mừng bạn đến với ${website}
`;

console.log[temp];

6

Kết quả như sau :

var website = 'freetuts.net';

let temp = `
    Chào mừng bạn đến với ${website}
`;

console.log[temp];

7

Toàn bộ biểu thức có thể được nội suy, không chỉ các biến, chẳng hạn như trong ví dụ này về tổng của hai số:

var website = 'freetuts.net';

let temp = `
    Chào mừng bạn đến với ${website}
`;

console.log[temp];

8

Điều này có thể đặc biệt hữu ích với các toán tử ternary, cho phép các điều kiện trong một chuỗi:

var website = 'freetuts.net';

let temp = `
    Chào mừng bạn đến với ${website}
`;

console.log[temp];

9

Bây giờ bạn có một ý tưởng về cách các template literals có thể hữu ích khi được sử dụng để nội suy các biểu thức. Phần tiếp theo sẽ tiến thêm một bước này bằng cách kiểm tra các Tagged Template Literals để làm việc với các biểu thức được chuyển vào placeholder.

5. Tagged Template Literals

Tính năng nâng cao của Template Literals là sử dụng Tagged Template Literals, đôi khi được gọi là templae tags [thẻ mẫu]. Template tags bắt đầu bằng chức năng phân tích cú pháp template, cho phép bạn kiểm soát nhiều hơn đối với thao tác và trả về chuỗi động.

Trong ví dụ này, bạn sẽ tạo một hàm template để sử dụng làm hàm hoạt động trên một mẫu được gắn thẻ. Các chuỗi ký tự là tham số đầu tiên của hàm, các chuỗi được đặt tên ở đây và bất kỳ biểu thức nào được nội suy trong chuỗi được đóng gói vào tham số thứ hai bằng các tham số còn lại. Bạn có thể điều khiển tham số để xem chúng sẽ chứa gì:

var domains = [
    'freetuts.net',
    'facebook.com',
    'google.com'
];

// Loop
domains.map[function[domain, key]{
    console.log[`
${domain}
`];
}];

0

Sử dụng function tag làm tagged template function thẻ và phân tích chuỗi như sau:

var domains = [
    'freetuts.net',
    'facebook.com',
    'google.com'
];

// Loop
domains.map[function[domain, key]{
    console.log[`
${domain}
`];
}];

1

Mở console và chạy :

var domains = [
    'freetuts.net',
    'facebook.com',
    'google.com'
];

// Loop
domains.map[function[domain, key]{
    console.log[`
${domain}
`];
}];

2

Tham số đầu tiên,

var domains = [
    {
        domain : "freetuts.net",
        author: "Nguyen Van Cuong"
    },
    {
        domain : "google.com",
        author: "Sergey Brin"
    }
];

// Loop
domains.map[function[domain, key]{
    var tmpl = `
        

            
${domain.domain}
            
${domain.author}
        
    `;
    console.log[tmpl];
}];

1, một array string gồm :

• "This is a string with "
• " and "
• " and "
• " interpolated inside."

Ngoài ra còn có một thuộc tính

var domains = [
    {
        domain : "freetuts.net",
        author: "Nguyen Van Cuong"
    },
    {
        domain : "google.com",
        author: "Sergey Brin"
    }
];

// Loop
domains.map[function[domain, key]{
    var tmpl = `
        

            
${domain.domain}
            
${domain.author}
        
    `;
    console.log[tmpl];
}];

2 có sẵn trên đối số này tại

var domains = [
    {
        domain : "freetuts.net",
        author: "Nguyen Van Cuong"
    },
    {
        domain : "google.com",
        author: "Sergey Brin"
    }
];

// Loop
domains.map[function[domain, key]{
    var tmpl = `
        

            
${domain.domain}
            
${domain.author}
        
    `;
    console.log[tmpl];
}];

3, chứa chuỗi mà không có bất kỳ chuỗi nào đang được xử lý. Ví dụ: / n sẽ chỉ là ký tự / n và không được tính vào dòng mới.

Tham số thứ hai,

var domains = [
    {
        domain : "freetuts.net",
        author: "Nguyen Van Cuong"
    },
    {
        domain : "google.com",
        author: "Sergey Brin"
    }
];

// Loop
domains.map[function[domain, key]{
    var tmpl = `
        

            
${domain.domain}
            
${domain.author}
        
    `;
    console.log[tmpl];
}];

4, là một mảng tham số còn lại bao gồm tất cả các biểu thức:

• true
• false
• 100

Các chuỗi ký tự và biểu thức được truyền dưới dạng tham số cho funciton tag được gắn thẻ. Lưu ý rằng tagged template không cần trả về một chuỗi; nó có thể hoạt động trên các giá trị đó và trả về bất kỳ loại giá trị nào. Ví dụ: chúng ta có thể có hàm bỏ qua mọi thứ và trả về null, như trong hàm returnNull này:

var domains = [
    'freetuts.net',
    'facebook.com',
    'google.com'
];

// Loop
domains.map[function[domain, key]{
    console.log[`
${domain}
`];
}];

3

Một ví dụ về một hành động có thể được thực hiện trong các tagged template đang áp dụng một số thay đổi cho cả hai mặt của mỗi biểu thức, chẳng hạn như nếu bạn muốn bọc từng biểu thức trong thẻ HTML. Tạo một hàm bold, thêm và cho mỗi biểu thức:

var domains = [
    'freetuts.net',
    'facebook.com',
    'google.com'
];

// Loop
domains.map[function[domain, key]{
    console.log[`
${domain}
`];
}];

4

Có một vài ví dụ về các tagged template literals trong các thư viện JavaScript phổ biến. Thư viện thẻ Graphql sử dụng mẫu được gắn thẻ gql để phân tích các chuỗi truy vấn GraphQL vào cú pháp trừu tượng [AST] mà GraphQL hiểu:

var domains = [
    'freetuts.net',
    'facebook.com',
    'google.com'
];

// Loop
domains.map[function[domain, key]{
    console.log[`
${domain}
`];
}];

5

Một thư viện khác sử dụng các hàm mẫu được gắn thẻ là các thành phần được tạo kiểu, cho phép bạn tạo các thành phần React mới từ các thành phần DOM thông thường và áp dụng các kiểu CSS bổ sung cho chúng:

var domains = [
    'freetuts.net',
    'facebook.com',
    'google.com'
];

// Loop
domains.map[function[domain, key]{
    console.log[`
${domain}
`];
}];

6

Phương thức

var domains = [
    {
        domain : "freetuts.net",
        author: "Nguyen Van Cuong"
    },
    {
        domain : "google.com",
        author: "Sergey Brin"
    }
];

// Loop
domains.map[function[domain, key]{
    var tmpl = `
        

            
${domain.domain}
            
${domain.author}
        
    `;
    console.log[tmpl];
}];

3 tích hợp cũng có thể được sử dụng trên các mẫu chữ được gắn thẻ để ngăn bất kỳ chuỗi nào được xử lý:

var domains = [
    'freetuts.net',
    'facebook.com',
    'google.com'
];

// Loop
domains.map[function[domain, key]{
    console.log[`
${domain}
`];
}];

7

6. Kết luận

Trong bài viết này, bạn đã xem xét các csingle- and double-quoted string literals và bạn đã tìm hiểu về các template literals và tagged template literals. Các Template literals làm cho nhiều tác vụ chuỗi phổ biến trở nên đơn giản hơn bằng cách nội suy các biểu thức trong chuỗi và tạo các chuỗi multi-line mà không có bất kỳ phép nối hoặc thoát nào. Template tags cũng là một tính năng nâng cao hữu ích của các template literals mà nhiều thư viện phổ biến đã sử dụng, chẳng hạn như GraphQL và

var domains = [
    {
        domain : "freetuts.net",
        author: "Nguyen Van Cuong"
    },
    {
        domain : "google.com",
        author: "Sergey Brin"
    }
];

// Loop
domains.map[function[domain, key]{
    var tmpl = `
        

            
${domain.domain}
            
${domain.author}
        
    `;
    console.log[tmpl];
}];

6.

Để tìm hiểu thêm về các chuỗi trong JavaScript, hãy đọc Cách làm việc với các chuỗi trong JavaScript và Cách lập chỉ mục, phân tách và thao tác các chuỗi trong JavaScript.

Nguồn : //www.taniarascia.com/understanding-template-literals/