ECMAScript 2022

เวอร์ชั่นหมายเลขของ JavaScript

เวอร์ชั่น ECMAScript เก่าตั้งชื่อด้วยตัวเลข: ES5 และ ES6

ตั้งแต่ปี 2016 มาตั้งชื่อเวอร์ชั่นด้วยปี: ES2016, 2018, 2020, 2022

คุณสมบัติใหม่ของ ES2022

• Array at()
• String at()
• RegExp /d
• Object.hasOwn()
• error.cause
• await import
• การประกาศสมาธิรักษ์ของรูป
• วิธีและสมาธิรักษ์เปิดเผย

JavaScript Array at()

ES2022 ได้นำเข้าวิธีที่แสดงคำว่า array at():

ตัวอย่าง 1

ได้รับองค์ประกอบที่สามของรายการ fruits:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ได้รับองค์ประกอบที่สามของรายการ fruits:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[2];

ทดลองด้วยตัวเอง

at() วิธีนี้คืนองค์ประกอบที่มีดัชนีที่กำหนดในรายการ

at() 方法与 [] 返回的结果相同。

自 2022 年 3 月起，所有现代浏览器中均支持 at() 方法：

JavaScript String at()

ES2022 ได้นำเข้าวิธีที่แสดงคำว่า string at():

ตัวอย่าง 1

ได้รับอักษรที่สามของตัวแปร name:

const name = "W3Schools";
let letter = name.at(2);

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ได้รับอักษรที่สามของตัวแปร name:

const name = "W3Schools";
let letter = name[2];

ทดลองด้วยตัวเอง

at() 方法从字符串中返回指定索引的字符。

at() 方法与 [] 返回的结果相同。

自 2022 年 3 月起，所有现代浏览器中均支持 at() 方法：

RegExp d 修饰符

ES2022 添加了 /d 修饰符，用于表示匹配的开始和结束。

try {

let text = "aaaabb";
let result = text.match(/(aa)(bb)/d);

ทดลองด้วยตัวเอง

RegExp 修饰符用于指定不区分大小写，以及其他全局搜索：

Object.hasOwn()

ES2022 提供了一种安全的方法来检查属性是否是对象的自有属性。

Object.hasOwn() 类似于 Object.prototype.hasOwnProperty，但支持所有对象类型。

try {

Object.hasOwn(myObject, age)

ทดลองด้วยตัวเอง

Error Cause

ตัวอย่าง

try {

connectData(); 
  catch (err) { 
} 
  throw new Error("Connecting failed.", { cause: err }); 
}

ทดลองด้วยตัวเอง

await import JavaScript

JavaScript โมดูลสามารถรอครบทรัพยากรที่ต้องการนำเข้าก่อนที่จะปฏิบัติงาน:

import {myData} from './myData.js';
const data = await myData();

ประกาศฟิลด์คลาส JavaScript

class Hello {
  counter = 0; // ฟิลด์คลาส
}
const myClass = new Hello();
let x = myClass.counter;

ตั้งแต่เดือนเมษายน 2021 ข้างนี้ ทุกบราวเซอร์สมัยใหม่เข้าใจการประกาศฟิลด์ในรูปแบบคลาส:

JavaScript วิธีและสิ่งส่วนตัว

class Hello {
  #counter = 0;  // สิ่งส่วนตัว
  #myMethod() {} // วิธีส่วนตัว
}
const myClass = new Hello();
let x = myClass.#counter; // ผิดพลาด
myClass.#myMethod();      // ผิดพลาด

ตั้งแต่เดือนมิถุนายน 2021 มีการสนับสนุนวิธีและสิ่งส่วนตัวในทุกเบราเซอร์สมัยใหม่: