Template Literals (Template Strings) trong ES6
- Tram Ho
1. Giới thiệu
Template Literals (hay còn gọi là Template Strings) là một tính năng mới của ES2015 (ES6) cho phép bạn làm việc với chuỗi theo một cách mới lạ hơn so với phiên bản ES5 trở xuống. Nó bổ sung nhiều tính năng mới mạnh mẽ để giúp cho việc tạo các chuỗi nhiều dòng (multi-line strings) hoặc nhúng biểu thức vào trong chuỗi một cách dễ dàng. Ngoài ra, Tagged Templates Literals là một tính năng nâng cao của 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 chuỗi.
Tất cả những tính năng thú vị đó giúp cho bạn có thêm các tùy chọn khi thao tác với chuỗi, cho phép bạn dễ dàng tạo các chuỗi động có thể sử dụng cho URL hoặc các chức năng tùy chỉnh ở các thành phần HTML.
2. Cú pháp (Syntax)
1 2 3 4 5 6 7 8 | <span class="token keyword">const</span> string <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Mercedes</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token keyword">let</span> multiLineString <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Tôi muốn tắt nắng đi Cho màu đừng nhạt mất</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token keyword">let</span> car <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Xe hơi</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token keyword">let</span> brand <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Audi</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token keyword">const</span> quantity <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token keyword">let</span> embeddedString <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Tôi có </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>quantity <span class="token operator">*</span><span class="token number">2</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> chiếc </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>car<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> thương hiệu </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>brand<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> |
Như các bạn đã thấy ở trên, các Template Literals được bao bởi ký tự dấu gạch ngược backtick () thay vì dấu nháy đơn hoặc nháy kép
Template Literals có thể chứa “trình giữ chỗ” (placeholders). Chúng được biểu thị bằng dấu đô la và dấu ngoặc nhọn ${expression}
Dấu có thể được escape bằng dấu :
=== ‘`’ // –> true
Bạn có thể đặt bất cứ biểu thức JavaScript nào bên trong ${}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token comment">// ${function}</span> <span class="token keyword">var</span> student <span class="token operator">=</span> <span class="token string">"Sinh viên"</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">learnJS</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"học lập trình JavaScript"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>student<span class="token interpolation-punctuation punctuation">}</span></span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">learnJS</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Ví dụ khác</span> <span class="token keyword">var</span> dev <span class="token operator">=</span> <span class="token punctuation">{</span> fullName<span class="token operator">:</span> <span class="token string">"nguyễn văn a"</span><span class="token punctuation">,</span> <span class="token function-variable function">learn</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"viết bài trên Viblo"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>dev<span class="token punctuation">.</span>fullName<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> đang </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>dev<span class="token punctuation">.</span><span class="token function">learn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Kết quả thu được:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <span class="token keyword">var</span> car <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">"Mercedes"</span><span class="token punctuation">,</span> color<span class="token operator">:</span> <span class="token string">"black"</span><span class="token punctuation">,</span> price<span class="token operator">:</span> <span class="token number">25000</span><span class="token punctuation">,</span> categories<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"C250"</span><span class="token punctuation">,</span> <span class="token string">"E450"</span><span class="token punctuation">,</span> <span class="token string">"S600"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token function-variable function">run</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Tốc độ tối đa 320km/h"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">var</span> <span class="token constant">HTML</span> <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> <div class="car"> <h2></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>car<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></h2> <p class="job"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>car<span class="token punctuation">.</span>color<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></p> <p class="bio"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>car<span class="token punctuation">.</span>price<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></p> <p class="voice"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>car<span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></p> <select class="tags"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>car<span class="token punctuation">.</span>categories<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">cate</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token template-punctuation string">`</span><span class="token string"> <option></span><span class="token interpolation-punctuation punctuation">${</span>cate<span class="token interpolation-punctuation punctuation">}</span><span class="token string"></option></span><span class="token template-punctuation string">`</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </select> </div> </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">HTML</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token constant">HTML</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Kết quả thu được:
3. Multi-line Strings
Bất kỳ ký tự dòng mới (newline characters) nào được chèn vào source đều là một phần của Template Literals.
Nếu bạn sử dụng các chuỗi thông thường, bạn sẽ phải sử dụng cú pháp sau để nhận các chuỗi nhiều dòng:
1 2 3 4 5 | console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'string text line 1\n'</span> <span class="token operator">+</span> <span class="token string">'string text line 2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "string text line 1</span> <span class="token comment">// string text line 2"</span> |
Khi sử dụng Template Literals, bạn có thể làm điều tương tự như sau:
1 2 3 4 5 | console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">string text line 1 'string text line 2</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "string text line 1</span> <span class="token comment">// string text line 2"</span> |
4. Biểu thức nội suy (Expression Interpolation)
Để nhúng các biểu thức trong các chuỗi thông thường, bạn sẽ sử dụng cú pháp sau:
1 2 3 4 5 6 | <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">5</span><span class="token punctuation">;</span> <span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Tổng của hai số là '</span> <span class="token operator">+</span> <span class="token punctuation">(</span>a <span class="token operator">+</span> b<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">' và\ntích là '</span> <span class="token operator">+</span> <span class="token punctuation">(</span>a <span class="token operator">*</span> b<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "Tổng của hai số là 15 and</span> <span class="token comment">// tích là 50."</span> |
Bây giờ, với Template Literals, bạn có thể làm cho nó dễ đọc hơn như sau:
1 2 3 4 5 6 7 | <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">5</span><span class="token punctuation">;</span> <span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Tổng của hai số là </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>a <span class="token operator">+</span> b<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> và tích là </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>a <span class="token operator">*</span> b<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "Tổng của hai số là 15 and</span> <span class="token comment">// tích là 50."</span> |
5. Các mẫu lồng nhau (Nesting Templates)
Trong một số trường hợp, việc lồng một mẫu là cách dễ nhất (và có lẽ là dễ đọc hơn) để có được các chuỗi có thể định cấu hình. Với Backticked Template
, thật đơn giản để cho phép các backticks bên trong bằng cách sử dụng chúng bên trong placeholders ${}
.
6. Tagged Templates
Một dạng “cao cấp” hơn của Template Literals chính là Tagged Templates
.
Tags cho phép bạn phân tích cú pháp Template Literals với một function. Đối số đầu tiên của một tag function
chứa một mảng các giá trị chuỗi. Các đối số còn lại liên quan đến các biểu thức (expressions)
Tag function
có thể thực hiện bất kỳ thao tác nào trên các đối số này mà bạn muốn và trả về chuỗi đã thao tác.
Tên của hàm được sử dụng cho tag có thể là bất cứ tên nào bạn muốn.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <span class="token keyword">let</span> person <span class="token operator">=</span> <span class="token string">"Tùng"</span><span class="token punctuation">;</span> <span class="token keyword">let</span> age <span class="token operator">=</span> <span class="token number">22</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">myTagFunc</span><span class="token punctuation">(</span><span class="token parameter">strings<span class="token punctuation">,</span> personExp<span class="token punctuation">,</span> ageExp</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> str0 <span class="token operator">=</span> strings<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// "Đây là "</span> <span class="token keyword">let</span> str1 <span class="token operator">=</span> strings<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// " là một người "</span> <span class="token keyword">let</span> str2 <span class="token operator">=</span> strings<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// "."</span> <span class="token keyword">let</span> ageStr<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>ageExp <span class="token operator">></span> <span class="token number">99</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> ageStr <span class="token operator">=</span> <span class="token string">"100 tuổi(centenarian)"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> ageStr <span class="token operator">=</span> <span class="token string">"thanh niên(youngster)"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Chúng ta thậm chí có thể trả về string sử dụng Template Literals</span> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>str0<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>personExp<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>str1<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>ageStr<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>str2<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">let</span> output <span class="token operator">=</span> myTagFunc<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Đây là </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>person<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, là một người </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>age<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>output<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Đây là Tùng, là một người thanh niên (youngster).</span> |
Ngoài ra, tag function
không nhất thiết là trả về một chuỗi, nó có thể hoạt động trên các giá trị đó và trả về bất cứ loại giá trị nào. Ví dụ sau đây tag function có thể bỏ qua mọi thứ và trả về null
:
1 2 3 4 5 6 7 | <span class="token keyword">function</span> <span class="token function">returnsNull</span><span class="token punctuation">(</span><span class="token parameter">strings<span class="token punctuation">,</span> <span class="token operator">...</span>expressions</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> string <span class="token operator">=</span> returnsNull<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Trả về null</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>string<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//null</span> |
Một ví dụ khác về hành động có thể được thực hiện trong Tagged Templates
đang áp dụng cho một số thay đổi cho cả hai mặt của biểu thức. Chẳng hạn như bạn muốn bọc từng biểu thức trong các thẻ HTML
, cụ thể ở đây là tạo hàm higlight
để bọc biểu thức vào trong cặp thẻ <span></span>
để thuận tiện cho việc thêm các thuộc tính CSS cho nó.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token keyword">function</span> <span class="token function">highlight</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">[</span>first<span class="token punctuation">,</span> <span class="token operator">...</span>strings<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token operator">...</span>values</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> values<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">accumulator<span class="token punctuation">,</span> currentValue</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token operator">...</span>accumulator<span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>currentValue<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> strings<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>first<span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">var</span> web <span class="token operator">=</span> <span class="token string">"Viblo"</span><span class="token punctuation">;</span> <span class="token keyword">var</span> tag <span class="token operator">=</span> <span class="token string">"JavaScript"</span><span class="token punctuation">;</span> <span class="token keyword">const</span> html <span class="token operator">=</span> highlight<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Viết bài viết về </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>tag<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> tại trang web </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>web<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> !</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>html<span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>html<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Kết quả thu được:
7. Raw Strings
Thuộc tính raw
đặc biệt, có sẵn trên đối số đầu tiên của tag function
, cho phép bạn truy cập các chuỗi thô (raw strings) khi chúng được nhập mà không cần xử lý các chuỗi thoát escape sequences
1 2 3 4 5 6 7 8 | <span class="token keyword">function</span> <span class="token function">tag</span><span class="token punctuation">(</span><span class="token parameter">strings</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>strings<span class="token punctuation">.</span>raw<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> tag<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">tôi muốn buộc gió lại \n cho hương đừng bay đi</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token comment">// Kết quả sẽ là "tôi muốn buộc gió lại \n cho hương đừng bay đi" ,</span> <span class="token comment">// chứa cả 2 ký tự '\' và 'n'</span> |
Không những thế, còn tồn tại phương thức String.raw()
để tạo các raw strings
1 2 3 4 5 6 7 8 9 | <span class="token keyword">let</span> str <span class="token operator">=</span> String<span class="token punctuation">.</span>raw<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hi\n</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token number">2</span> <span class="token operator">+</span> <span class="token number">3</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">!</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token comment">// "Hi\\n5!"</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 6</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">","</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "H,i,\\,n,5,!"</span> |
8. Browser Compatibility
- Desktop
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
41 | 12 | 34 | No support | 28 | 9 |
- Mobile
WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
---|---|---|---|---|---|
41 | 41 | 34 | 28 | 9 | 4.0 |
- NodeJS:
4.0.0
9. Kết luận
Qua bài viết này, hy vọng sẽ giúp bạn hiểu và áp dụng được Template Literals
phục vụ cho việc thao tác với chuỗi trở nên dễ dàng và thuận tiện hơn. Đây là bài viết đầu tiên của mình, nếu có gì sai sót, mình rất mong nhận được ý kiến đóng góp cũng như nhận xét của mọi người trong phần comments để mình có thể hoàn thiện hơn trong những bài viết sau này.
Cảm ơn mọi người đã đọc bài viết của mình. Happy Coding