Mỗi năm, bản cập nhật JavaScript bổ sung thêm các tính năng mới. Năm nay ES2020 hoặc ES11 đã được phát hành (Đọc bài viết về các tính năng của ES2020), với ES2021 hoặc ES12 dự kiến sẽ được phát hành vào giữa năm 2021.
Các tính năng mới được thêm vào JavaScript mỗi năm trải qua quá trình bốn giai đoạn, với giai đoạn thứ tư là giai đoạn cuối cùng. Trong bài viết này, tôi sẽ thảo luận về các tính năng đã đạt đến giai đoạn bốn và được thêm vào V8 engine của Google Chrome.
Danh sách các tính năng mới được thảo luận trong bài viết này
- String.prototype.replaceAll
- Promise.any
- Toán tử logic và biểu thức gán
- Dấu phân cách số
- Intl.ListFormat
- DateStyle and time Tùy chọn phong cách cho Intl.DateTimeFormat
String.prototype.replaceAll
Trong JavaScript, phương thức Replace () chỉ thay thế phiên bả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, thì cách duy nhất để đạt được điều đó là sử dụng global regexp.
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ế. Mẫu có thể là một chuỗi hoặc một biểu thức chính quy và thay thế có thể là một chuỗi hoặc một hàm được thực thi cho mỗi trận đấu.
let str = 'I use linux, I love linux'
str = str.replaceAll('linux', 'windows');
console.log(str)
/**** Output ****/
// I use windows, I love windows
Promise.any
ES2021 sẽ giới thiệu phương thức Promise.any () làm ngắn mạch và trả về một giá trị, ngay sau khi nó chạm vào lời hứa đã giải quyết đầu tiên từ danh sách / mảng các lời hứa (như được giải thích trong Ví dụ 1a). Nếu tất cả các lời hứa bị từ chối thì nó sẽ đưa ra một thông báo lỗi tổng hợp (như minh họa trong Ví dụ 1b).
Nó khác với Promise.race () vì phương thức đó ngắn mạch khi một trong các lời hứa đã cho giải quyết hoặc từ chối.
_ Ví dụ 1a:_ Mặc dù một lời hứa bị từ chối sớm hơn một lời hứa đã được giải quyết, Promise.any () sẽ trả về lời hứa đã được giải quyết đầu tiên.
Promise.any([
new Promise((resolve, reject) => setTimeout(reject, 200, 'Third')),
new Promise((resolve, reject) => setTimeout(resolve, 1000, 'Second')),
new Promise((resolve, reject) => setTimeout(resolve, 2000, 'First')),
])
.then(value => console.log(`Result: ${value}`))
.catch (err => console.log(err))
/**** Output ****/
// Result: Second
Ví dụ 1b: Khi tất cả các lời hứa bị từ chối, AggregateError được ném ra.
Promise.any([
Promise.reject('Error 1'),
Promise.reject('Error 2'),
Promise.reject('Error 3')
])
.then(value => console.log(`Result: ${value}`))
.catch (err => console.log(err))
/**** Output ****/
// AggregateError: All promises were rejected
Toán tử logic và biểu thức gán
Trong JavaScript, có nhiều toán tử gán và toán tử logic như ví dụ cơ bản sau:
// Assignment Operator Example
let num = 5
num+=10
console.log(num) // 15
// Logical Operator Example
let num1 = 6
let num2 = 3
console.log(num1 === 6 && num2 === 2) // false
console.log(num1 === 6 || num2 === 2) // true
Với đề xuất mới, chúng tôi sẽ có thể kết hợp các toán tử logic và toán tử gán. Dưới đây là một số ví dụ về &&, || Và ?? Toán tử:
Toán tử chỉ định logic với toán tử &&
Nó gán giá trị biến RHS cho biến LHS, chỉ khi giá trị LHS là trung thực.
// Logical Assignment Operator with && operator
let num1 = 5
let num2 = 10
num1 &&= num2
console.log(num1) // 10
// Line 5 can also be written as following ways
// 1. num1 && (num1 = num2)
// 2. if (num1) num1 = num2
Toán tử gán logic với || Nhà điều hành
Nó gán giá trị biến RHS cho biến LHS, chỉ khi giá trị LHS là sai.
// Logical Assignment Operator with || operator
let num1
let num2 = 10
num1 ||= num2
console.log(num1) // 10
// Line 5 can also be written as following ways
// 1. num1 || (num1 = num2)
// 2. if (!num1) num1 = num2
Toán tử gán logic với ?? Nhà điều hành
ES2020 đã giới thiệu toán tử Nullish Coalescing, toán tử này cũng có thể được kết hợp với các toán tử gán. Nó gán giá trị biến RHS cho biến LHS, chỉ khi LHS là không xác định hoặc chỉ null.
// Logical Assignment Operator with || operator
let num1
let num2 = 10
num1 ||= num2
console.log(num1) // 10
// Line 5 can also be written as following ways
// 1. num1 || (num1 = num2)
// 2. if (!num1) num1 = num2
Dấu phân cách số
Sự ra đời của Dấu phân cách số sẽ giúp việc đọc các giá trị số dễ dàng hơn bằng cách sử dụng ký tự _ (gạch dưới) để cung cấp sự phân tách giữa các nhóm chữ số. Ví dụ:
let number = 100_000
console.log(number)
/**** Output ****/
// 100000
Intl.ListFormat
Đối tượng ListFormat nhận hai tham số, cả hai đều là tùy chọn. Tham số đầu tiên là ngôn ngữ (locale) và tham số thứ hai là một đối tượng tùy chọn có hai thuộc tính - kiểu và kiểu.
new Intl.ListFormat([locales[, options]])
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 những cách khác nhau phụ thuộc vào ngôn ngữ.
Dưới đây là một số ví dụ có sự kết hợp của các ngôn ngữ và tùy chọn khác nhau.
const arr = ['Pen', 'Pencil', 'Paper']
let obj = new Intl.ListFormat('en', { style: 'short', type: 'conjunction' })
console.log(obj.format(arr))
/**** Output ****/
// Pen, Pencil, & Paper
obj = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' })
console.log(obj.format(arr))
/**** Output ****/
// Pen, Pencil, and Paper
obj = new Intl.ListFormat('en', { style: 'narrow', type: 'conjunction' })
console.log(obj.format(arr))
/**** Output ****/
// Pen, Pencil, Paper
// Passing in Italy language tag
obj = new Intl.ListFormat('it', { style: 'short', type: 'conjunction' })
console.log(obj.format(arr))
/**** Output ****/
// Pen, Pencil e Paper
// Passing in German language tag
obj = new Intl.ListFormat('de', { style: 'long', type: 'conjunction' })
console.log(obj.format(arr))
/**** Output ****/
// Pen, Pencil und Paper
DateStyle and time Tùy chọn phong cách cho Intl.DateTimeFormat
Đối tượng Intl.DateTimeFormat là một phương thức khởi tạo cho các đối tượng cho phép định dạng ngày và giờ nhạy cảm với ngôn ngữ. Các tùy chọn dateStyle và timeStyle được đề xuất có thể được sử dụng để yêu cầu một ngày và giờ cụ thể theo ngôn ngữ của một độ dài nhất định.
Một số ví dụ về các tùy chọn và ngôn ngữ (ngôn ngữ) khác nhau được minh họa bên dưới:
// Time only with short format
let o = new Intl.DateTimeFormat('en' , { timeStyle: 'short' })
console.log(o.format(Date.now()))
// 11:27 PM
// Time only with medium format
o = new Intl.DateTimeFormat('en' , { timeStyle: 'medium'})
console.log(o.format(Date.now()))
// 11:27:57 PM
// Time only with long format
o = new Intl.DateTimeFormat('en' , { timeStyle: 'long' })
console.log(o.format(Date.now()))
// 11:27:57 PM GMT+11
// Date only with short format
o = new Intl.DateTimeFormat('en' , { dateStyle: 'short'})
console.log(o.format(Date.now()))
// 10/6/20
// Date only with medium format
o = new Intl.DateTimeFormat('en' , { dateStyle: 'medium'})
console.log(o.format(Date.now()))
// Oct 6, 2020
// Date only with long format
o = new Intl.DateTimeFormat('en' , { dateStyle: 'long'})
console.log(o.format(Date.now()))
// October 6, 2020
DateStyle và timeStyle tùy chọn được sử dụng cùng với các thẻ ngôn ngữ khác nhau, như được hiển thị trong ví dụ dưới đây:
let abc
// English language
abc = new Intl.DateTimeFormat('en' , { timeStyle: 'short', dateStyle: 'long'})
console.log(abc.format(Date.now()))
// October 6, 2020 at 11:40 PM
// Italian language
abc = new Intl.DateTimeFormat('it' , { timeStyle: 'short', dateStyle: 'long'})
console.log(abc.format(Date.now()))
// 6 ottobre 2020 23:40
// German language
abc = new Intl.DateTimeFormat('de' , { timeStyle: 'short', dateStyle: 'long'})
console.log(abc.format(Date.now()))
// 6. Oktober 2020 um 23:40
Tổng kết
Là một nhà phát triển, điều quan trọng là phải luôn cập nhật các tính năng mới của một ngôn ngữ. Nếu bạn đã bỏ lỡ bản cập nhật tính năng ES2020, tôi khuyên bạn nên đọc bài viết này - ES2020 has Arrived.
Cảm ơn các bạn đã đọc, hãy comment bên dưới nếu có chủ đề muốn mình cover nhé!
Bài viết gốc tại đây.
Hiện tại khóa học Web Frontend tại Techmaster Vietnam vẫn liên tục tuyển sinh các lớp tiếp theo. Và trong tình hình dịch bệnh phức tạp, lớp sẽ chuyển sang học hình thức trực tuyến có tương tác, thời lượng và chất lượng không đổi, vẫn đảm bảo việc làm cho học viên tốt nghiệp.
Chi tiết khóa học: https://frontend.techmaster.vn/
Liên hệ tư vấn: Mr Thịnh - 0987273764 (zalo).
Bình luận