Giới thiệu
Mỗi năm, bản cập nhật Javascript bổ sung thêm các tính năng mới. ES2021 (còn được gọi là ES12) dự kiến sẽ được phát hành vào tháng 6 năm nay. Các tính năng mới được thêm vào mỗi năm trải qua một quá trình bốn giai đoạn. Tất cả các tính năng được liệt kê dưới đây, tại thời điểm viết bài đã đi đến giai đoạn cuối và rất sẵn sàng cho việc phát hành.
String.prototype.replaceAll
Trong Javascript, phương thức replace() chỉ thay thế lần xuất hiện đầu tiên của một mẫu trong một chuỗi. Nếu chúng ta muốn thay thế tất cả các kết quả phù hợp của một mẫu trong một chuỗi, cách duy nhất để đạt được điều đó là chúng ta cung cấp mẫu dưới dạng regular expression
1 2 3 4 5 6 7 8 9 | <span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token string">"macOS is way better than windows. I love macOS."</span><span class="token punctuation">;</span> <span class="token keyword">const</span> newStr <span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">"macOS"</span><span class="token punctuation">,</span> <span class="token string">"Linux"</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>newStr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Linux is way better than windows. I love macOS.</span> <span class="token keyword">const</span> newStr2 <span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/macOS/g</span><span class="token punctuation">,</span><span class="token string">"Linux"</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>newStr2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Linux is way better than windows. I love Linux.</span> |
Phương thức đề xuất replaceAll() trả về một chuỗi mới với tất cả các kết quả phù hợp của một mẫu được thay thế bằng một chuỗi thay thế.
1 2 3 4 5 | <span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token string">"macOS is way better than windows. I love macOS."</span><span class="token punctuation">;</span> <span class="token keyword">const</span> newStr <span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">replaceAll</span><span class="token punctuation">(</span><span class="token string">"macOS"</span><span class="token punctuation">,</span> <span class="token string">"Linux"</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>newStr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Linux is way better than windows. I love Linux.</span> |
Logical Assignment Operator
Với các toán tử gán logic mới được đề xuất &&= , ||=, ??= – chúng ta có thể gán một giá trị cho một biến dựa trên một phép toán logic. Nó kết hợp phép toán logic với biểu thức gán.
Phép gán logic AND (&&=)
Toán tử gán logic AND chỉ thực hiện phép gán khi toán hạng bên trái là truthy. Ngược lại, nếu toán hạng bên trái là falsy (false, 0, -0, 0n, “”, null, undefined và NaN), phép gán không được thực hiện.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span> <span class="token keyword">let</span> y <span class="token operator">=</span> <span class="token number">15</span><span class="token punctuation">;</span> x <span class="token operator">&&</span><span class="token operator">=</span> y<span class="token punctuation">;</span> <span class="token comment">// Equivalent: x && (x = y)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 15</span> x <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> x <span class="token operator">&&</span><span class="token operator">=</span> y<span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 0</span> |
Có thể hiểu đơn giản như là if(x) { x = y; }
Phép gán logic OR (||=)
Toán tử gán logic OR chỉ thực hiện phép gán khi toán hạng bên trái là falsy (false, 0, -0, 0n, “”, null, undefined và NaN). Ngược lại, nếu toán hạng bên trái là truthy, phép gán sẽ không được thực hiện.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span> <span class="token keyword">let</span> y <span class="token operator">=</span> <span class="token number">15</span><span class="token punctuation">;</span> x <span class="token operator">||</span><span class="token operator">=</span> y<span class="token punctuation">;</span> <span class="token comment">// Equivalent: x || (x = y)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 15</span> x <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span> x <span class="token operator">||</span><span class="token operator">=</span> y<span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 10</span> |
Giống như là if(!x) { x = y; }
Phép gán logic Nullish (??=)
Toán tử gán Logic Nullish chỉ thực hiện phép gán khi toán hạng bên trái là rỗng (undefined hoặc null). Nếu không sẽ không thực hiện.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span> <span class="token keyword">let</span> y <span class="token operator">=</span> <span class="token number">15</span><span class="token punctuation">;</span> x <span class="token operator">??</span><span class="token operator">=</span> y<span class="token punctuation">;</span> <span class="token comment">// Equivalent: x ?? (x = y)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 15</span> x <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span> x <span class="token operator">??</span><span class="token operator">=</span> y<span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 10</span> |
Có thể hiểu như này if(x == null || x == undefined) { x = y; }.
Numeric Separators
Các ký tự số lớn rất khó để mắt người phân tích cú pháp nhanh chóng. Ví dụ, hãy xem xét số 1019436871.42. Chúng ta phải chú ý kỹ để thấy được, và cũng không tránh khỏi những nhầm lẫn.
Để cải thiện khả năng đọc, bổ sung mới này cho ngôn ngữ Javascript cho phép gạch dưới làm dấu phân cách trong các ký tự số. Chúng ta có thể viết lại số tương tự là 1_019_436_871.42. Và nó hoạt động cho tất cả các loại chữ số:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token comment">// A decimal integer literal with its digits grouped per thousand:</span> <span class="token number">1_000_000_000_000</span> <span class="token comment">// A decimal literal with its digits grouped per thousand:</span> <span class="token number">1_000_000.220_720</span> <span class="token comment">// A binary integer literal with its bits grouped per octet:</span> <span class="token number">0b01010110_00111000</span> <span class="token comment">// A binary integer literal with its bits grouped per nibble:</span> <span class="token number">0b0101_0110_0011_1000</span> <span class="token comment">// A hexadecimal integer literal with its digits grouped by byte:</span> <span class="token number">0x40_76_38_6A_73</span> <span class="token comment">// A BigInt literal with its digits grouped per thousand:</span> <span class="token number">4_642_473_943_484_686_707n</span> |
Lưu ý: nó không ảnh hưởng đến kết quả, chỉ cải thiện khả năng đọc.
Intl.ListFormat
Đối tượng Intl.ListFormat cho phép định dạng danh sách language-sensitive. Đối tượng ListFormat nhận hai tham số, cả hai đều là tùy chọn. Tham số đầu tiên là language (locale) và tham số thứ hai là một options object có hai thuộc tính – style và type
Intl.ListFormat có một phương thức được gọi là format(), phương thức này nhận một mảng làm đối số và định dạng nó theo các cách khác nhau phụ thuộc vào ngôn ngữ.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'Motorcycle'</span><span class="token punctuation">,</span> <span class="token string">'Bus'</span><span class="token punctuation">,</span> <span class="token string">'Car'</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// English</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Intl<span class="token punctuation">.</span>ListFormat</span><span class="token punctuation">(</span><span class="token string">'en'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> style<span class="token operator">:</span> <span class="token string">'long'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">'conjunction'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span>list<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Motorcycle, Bus and Car</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Intl<span class="token punctuation">.</span>ListFormat</span><span class="token punctuation">(</span><span class="token string">'en'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> style<span class="token operator">:</span> <span class="token string">'short'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">'disjunction'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span>list<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Motorcycle, Bus or Car</span> <span class="token comment">// Dutch</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Intl<span class="token punctuation">.</span>ListFormat</span><span class="token punctuation">(</span><span class="token string">'nl'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> style<span class="token operator">:</span> <span class="token string">'long'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">'conjunction'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span>list<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Motorcycle, Bus en Car</span> <span class="token comment">// German</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Intl<span class="token punctuation">.</span>ListFormat</span><span class="token punctuation">(</span><span class="token string">'de'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> style<span class="token operator">:</span> <span class="token string">'long'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">'conjunction'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span>list<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Motorcycle, Bus und Car</span> |
Promise.any
ES2021 sẽ giới thiệu method Promise.any() làm short-circuits và trả về một giá trị, ngay sau khi Promise resolved đầu tiên từ danh sách / mảng các Promise. Nếu tất cả các Promise bị rejected thì nó sẽ ném ra AggregateError, một SubClass riêng lẽ nhóm lại với nhau.
Không giống như method Promise.race() tập trung vào Promise rejected điều đầu tiên, phương thức Promise.any() tập trung vào Promise resolved đầu tiên.
1 2 3 4 5 6 7 8 9 | <span class="token keyword">const</span> promise1 <span class="token operator">=</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> promise2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setTimeout</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token string">'quick'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> promise3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setTimeout</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">,</span> <span class="token string">'slow'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> promises <span class="token operator">=</span> <span class="token punctuation">[</span>promise1<span class="token punctuation">,</span> promise2<span class="token punctuation">,</span> promise3<span class="token punctuation">]</span><span class="token punctuation">;</span> Promise<span class="token punctuation">.</span><span class="token function">any</span><span class="token punctuation">(</span>promises<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// quick</span> |
1 2 3 4 5 6 7 8 9 | <span class="token keyword">const</span> promise1 <span class="token operator">=</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> promise2 <span class="token operator">=</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> promise3 <span class="token operator">=</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> promises <span class="token operator">=</span> <span class="token punctuation">[</span>promise1<span class="token punctuation">,</span> promise2<span class="token punctuation">,</span> promise3<span class="token punctuation">]</span><span class="token punctuation">;</span> Promise<span class="token punctuation">.</span><span class="token function">any</span><span class="token punctuation">(</span>promises<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// AggregateError: All promises were rejected</span> |
Tổng kết
Là dev, điều quan trọng là phải luôn cập nhật các tính năng mới của 1 ngôn ngữ.
Tôi hi vọng rằng tối đã có thể giới thiệu cho bạn một số tính năng mới của Javascript với ES2021. Cảm ơn các bạn đã đọc
Nguồn: tại đây