จาวาสคริปต์ ECMAScript 2021


สารบัญ

    แสดงสารบัญ

หมายเลขเวอร์ชันจาวาสคริปต์

JS เวอร์ชันเก่าตั้งชื่อตามตัวเลข: ES5 (2009) และ ES6 (2015)

ตั้งแต่ปี 2559 เป็นต้นไป เวอร์ชันต่างๆ จะตั้งชื่อตามปี: ECMAScript 2016, 2017, 2018, 2019, ...

คุณสมบัติใหม่ใน ES2021

  • สัญญาใดๆ():
    const first=await Promise.any([prom1,prom2,prom3]);

  • สตริงแทนที่ทั้งหมด()

  • ตัวคั่นตัวเลข (_)


คุณสมบัติใหม่ใน ES2022

  • อาร์เรย์ที่()

  • สตริงที่()

  • RegExp /d

  • วัตถุ hasOwn()

  • ข้อผิดพลาดสาเหตุ

  • รอนำเข้า

  • วิธีการและฟิลด์ส่วนตัว

  • ประกาศภาคสนามของชั้นเรียน

คำเตือน

คุณสมบัติเหล่านี้ค่อนข้างใหม่

เบราว์เซอร์รุ่นเก่าอาจต้องใช้โค้ดสำรอง (Polyfill)


สตริง JavaScript แทนที่ทั้งหมด()

ES2021 แนะนำวิธีการสตริง replaceAll():

ตัวอย่าง

text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The replaceAll() Method</h2>

<p>ES2021 intoduced the string method replaceAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

replaceAll() วิธีการช่วยให้คุณสามารถระบุ นิพจน์ทั่วไปแทนสตริงที่จะแทนที่

หากพารามิเตอร์เป็นนิพจน์ทั่วไป จะต้องตั้งค่าสถานะโกลบอล (g) มิฉะนั้น TypeError ถูกส่งออกไป

ตัวอย่าง

text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The replaceAll() Method</h2>

<p>ES2021 intoduced the string method replaceAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular";
text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

บันทึก

ES2020 แนะนำเมธอดสตริง matchAll()



ตัวคั่นตัวเลข JavaScript (_)

ES2021 ใช้ตัวคั่นตัวเลข (_) เพื่อให้ตัวเลขอ่านง่ายขึ้น:

ตัวอย่าง

const num = 1_000_000_000;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>

<p>ES2021 intoduced the numeric separator (_) to make numbers more readable:</p>
<p id="demo"></p>

<script>
const num = 1_000_000_000;
document.getElementById("demo").innerHTML = num;
</script>

</body>
</html>

ตัวคั่นตัวเลขใช้สำหรับการมองเห็นเท่านั้น

ตัวอย่าง

const num1 = 1_000_000_000;
const num2 = 1000000000;
(num1 === num2); 

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>

<p>ES2021 intoduced the numeric separator (_) to make numbers more readable:</p>

<p>Is 1_000_000_000 the same as 1000000000?</p>
<p id="demo"></p>

<script>
const num1 = 1_000_000_000;
const num2 = 1000000000;
document.getElementById("demo").innerHTML = (num1 === num2);
</script>

</body>
</html>

ตัวคั่นตัวเลขสามารถวางไว้ที่ใดก็ได้ในตัวเลข:

ตัวอย่าง

const num1 = 1_2_3_4_5;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>

<p>ES2021 intoduced the numeric separator (_) to make numbers more readable:</p>
<p id="demo"></p>

<script>
const num = 1_2_3_4_5;
document.getElementById("demo").innerHTML = num;
</script>

</body>
</html>

บันทึก

ไม่อนุญาตให้ใช้ตัวคั่นตัวเลขที่จุดเริ่มต้นหรือจุดสิ้นสุดของตัวเลข

ใน JavaScript ตัวแปรเท่านั้นที่สามารถขึ้นต้นด้วย _

ตัวคั่นตัวเลขได้รับการรองรับในเบราว์เซอร์สมัยใหม่ทั้งหมดตั้งแต่เดือนมกราคม 2020:

Chrome 75 Edge 79 Firefox 74 Safari 13.1 Opera 67
Jun 2019 Jan 2020 Oct 2019 Sep 2019 Jun 2019

อาร์เรย์ JavaScript at()

ES2022 ทำให้เกิดเมธอดอาร์เรย์ at():

ตัวอย่าง

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

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The at() Method</h2>

<p>The at() method returns an indexed element from an array:</p>

<p id="demo"></p>

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

document.getElementById("demo").innerHTML = fruit;
</script>

</body>
</html>

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

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Bracket Notation</h2>

<p>The bracked notation [] returns an indexed element from an array:</p>

<p id="demo"></p>

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

document.getElementById("demo").innerHTML = fruit;
</script>

</body>
</html>

at() วิธีการส่งกลับองค์ประกอบที่จัดทำดัชนีจากอาร์เรย์

at() วิธีการส่งกลับเช่นเดียวกับ []

วิธีการ at() ได้รับการสนับสนุนในเบราว์เซอร์สมัยใหม่ทั้งหมดตั้งแต่เดือนมีนาคม 2022:

Chrome 92 Edge 92 Firefox 90 Safari 15.4 Opera 78
Apr 2021 Jul 2021 Jul 2021 Mar 2022 Aug 2021

บันทึก

หลายภาษาอนุญาตให้ การจัดทำดัชนีวงเล็บลบ เช่น [-1] เพื่อเข้าถึงองค์ประกอบจากส่วนท้ายของ วัตถุ/อาร์เรย์/สตริง

สิ่งนี้เป็นไปไม่ได้ใน JavaScript เนื่องจาก [] ใช้สำหรับการเข้าถึงทั้งอาร์เรย์และอ็อบเจ็กต์ obj[-1] หมายถึงค่าของคีย์ -1 ไม่ใช่คุณสมบัติสุดท้ายของวัตถุ

วิธีการ at() ถูกนำมาใช้ใน ES2022 เพื่อแก้ไขปัญหานี้


สตริง JavaScript at()

ES2022 กำหนดวิธีสตริง at():

ตัวอย่าง

รับตัวอักษรตัวที่สามของชื่อ:

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The at() Method</h2>

<p>The at() method returns an indexed element from a string:</p>

<p id="demo"></p>

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

document.getElementById("demo").innerHTML = letter;
</script>

</body>
</html>

รับตัวอักษรตัวที่สามของชื่อ:

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>Bracket Notation</h2>

<p>The bracked notation [] returns an indexed element from a string:</p>

<p id="demo"></p>

<script>
const name = "W3Schools";
let letter = name[2];

document.getElementById("demo").innerHTML = letter;
</script>

</body>
</html>

at() วิธีการส่งกลับองค์ประกอบที่จัดทำดัชนีจากสตริง

at() วิธีการส่งกลับเช่นเดียวกับ []

วิธีการ at() ได้รับการสนับสนุนในเบราว์เซอร์สมัยใหม่ทั้งหมดตั้งแต่เดือนมีนาคม 2022:

Chrome 92 Edge 92 Firefox 90 Safari 15.4 Opera 78
Apr 2021 Jul 2021 Jul 2021 Mar 2022 Aug 2021