01T10
01, Tháng 10, 2023Javascript1235 lượt xem

Những tính năng mới trong Javascript ECMAScript 2021/2022 (ES2021/ES2022)

Những tính năng mới trong Javascript ECMAScript 2021/2022 (ES2021/ES2022) ES12/ES13

Những tính năng mới trong Javascript ECMAScript 2021/2022 (ES2021/ES2022) ES12/ES13. Những tính năng mới trong ECMAScript 2021, ECMAScript 2022 bao gồm: Promise any, String replaceAll, Numeric Separators, Array at, String at, RegExp /d, Object.hasOwn, error.cause, await import, Private methods and fields, Class field declarations.

Các tính năng mới trong ES2021

  • Promise any(): 
    const first = await Promise.any([prom1,prom2,prom3]);
  • String replaceAll()
  • Numeric Separators (_)

Các tính năng mới trong ES2022

  • Array at()
  • String at()
  • Object.hasOwn()
  • error.cause
  • await import
  • Private methods and fields (Các phương thức và trường riêng tư)
  • Class field declarations (Khai báo trường lớp)

Những tính năng mới trong Javascript ECMAScript 2021/2022 (ES2021/ES2022)

Những tính năng mới trong Javascript ECMAScript 2021/2022 (ES2021/ES2022)

1, Chỉ định một biểu thức chính quy thay vì một chuỗi cần thay thế với JavaScript String ReplaceAll()

Phương replaceAll() các giá trị trả về một chuỗi mới với tất cả các kết quả khớp của a pattern được thay thế bằng a replacement. Nó pattern có thể là một chuỗi hoặc một RegExp và replacement có thể là một chuỗi hoặc một hàm được gọi cho mỗi kết quả khớp. Chuỗi ban đầu được giữ nguyên.

replaceAll(pattern, replacement)

 

Ví dụ:

var string = 'Thaisonit is a technology research and development laboratory. Thaisonit is a startup company. Thaisonit is a technology company. I love thaisonit';

string = string .replaceAll("thaisonit","snettech");

string = string .replaceAll("Thaisonit","Snettech");

 

Phương thức replaceAll() cho phép bạn chỉ định một biểu thức chính quy thay vì một chuỗi cần thay thế.

Nếu tham số là một biểu thức chính quy thì cờ chung (g) phải được đặt, nếu không thì lỗi TypeError sẽ được đưa ra.

Ví dụ:

var string = 'Thaisonit is a technology research and development laboratory. Thaisonit is a startup company. Thaisonit is a technology company. I love thaisonit';

string = string .replaceAll(/thaisonit/g,"snettech");

string = string .replaceAll(/Thaisonit/g,"Snettech");

 

2, Tách số với dấu _ trong javascript (_)

ES2021 đưa ra dấu phân cách số (_) để làm cho các số dễ đọc hơn. Dấu tách số được hỗ trợ trong tất cả các trình duyệt hiện đại kể từ tháng 1 năm 2020:

Ví dụ:

const number = 10_000_000_000;

 

Dấu phân cách số (_) để làm cho code dễ đọc đối với các con số cần phân tách. Dấu tách số chỉ hiển thị trực quan trong code và không hiển thị trên web đối với khách truy cập. Giá trị của số cũng không bị thay đổi:

Ví dụ:

const number1 = 10_000_000_000;
const number2 = 10000000000;
(number1 === number2); //true

 

Dấu phân cách số có thể được đặt ở bất cứ đâu trong một số

Ví dụ:

const numtest = 1_2_3_4_5;

 

* Lưu ý: Không được sử dụng phép phân tách số ở đầu hoặc cuối số.

Trong JavaScript chỉ các biến mới có thể bắt đầu bằng _.

3, Phương thức at() trong mảng

ES2022 giới thiệu phương thức mảng at() . Phương thức này cho phép truy cập đến phần tử được lập chỉ mục của mảng, phương thức trả về giống như []. Phương thức at() được hỗ trợ trong tất cả các trình duyệt hiện đại kể từ tháng 3 năm 2022:

Ví dụ: Lấy phần tử thứ ba của mảng mobiles:

const mobiles = ["Nokia", "Samsung", "Vivo", "Sony","LG","Iphone"];
let mobile = mobiles.at(2); //Vivo

//Tương đương sử dụng []

let mobile = mobiles[2]; //Vivo

 

* Lưu ý: Nhiều ngôn ngữ cho phép negative bracket indexing như [-1] truy cập các phần tử từ cuối đối tượng/mảng/chuỗi.

Điều này là không thể trong JavaScript, vì [] được sử dụng để truy cập cả mảng và đối tượng. obj[-1] đề cập đến giá trị của khóa -1, không phải thuộc tính cuối cùng của đối tượng.

Phương pháp at() đã được giới thiệu trong ES2022 để giải quyết vấn đề này.

4, Phương thức at() trong chuỗi

ES2022 giới thiệu phương thức chuỗi at() . Phương thức này cho phép truy cập đến phần tử được lập chỉ mục từ một chuỗi, phương thức trả về giống như []. Phương thức at() được hỗ trợ trong tất cả các trình duyệt hiện đại kể từ tháng 3 năm 2022:

Ví dụ: Lấy chữ cái thứ ba của chuỗi thaisonit_title:

const thaisonit_title = 'Thaisonit is a technology research and development center';
let title = thaisonit_title.at(2); //a

//Tương đương sử dụng []

let title = thaisonit_title[2]; //a

 

5, Phương thức Object.hasOwn()

Phương thức Object.hasOwn() là một phương thức tĩnh trả về true nếu đối tượng được chỉ định có thuộc tính được chỉ định làm thuộc tính riêng của nó. Nếu thuộc tính được kế thừa hoặc không tồn tại, phương thức sẽ trả về false. 

Cú pháp:

Object.hasOwn(obj, prop)

 

- obj: đối tượng cần kiểm tra.

- prop: Tên String hoặc Ký hiệu của thuộc tính cần kiểm tra.

Ví dụ:

const Labs = {
  name: 'Thaisonit',
};

console.log(Object.hasOwn(Labs, 'name')); // true

console.log(Object.hasOwn(Labs, 'phone')); // false

console.log(Object.hasOwn(Labs, 'address')); // false
 

 

6, Thuộc tính error.cause

Thuộc tính cause của một Error cho biết nguyên nhân ban đầu cụ thể của lỗi.

Nó được sử dụng khi bắt và ném lại một lỗi có thông báo lỗi cụ thể hơn hoặc hữu ích hơn để vẫn có quyền truy cập vào lỗi ban đầu.

Ví dụ: Viết lại lỗi có nguyên nhân
Đôi khi việc phát hiện lỗi và gửi lại nó bằng một tin nhắn mới đôi khi rất hữu ích. Trong trường hợp này, bạn nên chuyển lỗi ban đầu vào hàm tạo cho new Error, như được hiển thị.

try {
  connectToDatabase();
} catch (err) {
  throw new Error("Connecting to database failed.", { cause: err });
}

 

Giá trị:

Giá trị được truyền cho Error() hàm tạo trong  options.cause đối số. Nó có thể không có mặt.

 Thuộc tính của Error:cause

 Writable

 yes

 Enumerable

 no

 Configurable

 yes

 

* Cảnh báo: Những tính năng này là tương đối mới. Các trình duyệt cũ hơn có thể cần mã thay thế (Polyfill)