JS เวอร์ชันเก่าตั้งชื่อตามตัวเลข: ES5 (2009) และ ES6 (2015)
ตั้งแต่ปี 2559 เป็นต้นไป เวอร์ชันต่างๆ จะตั้งชื่อตามปี: ECMAScript 2016, 2017, 2018, 2019, ...
บิ๊กอินท์
สตริงที่ตรงกันทั้งหมด()
ผู้ดำเนินการรวมพลังไร้ค่า (??)
ตัวดำเนินการผูกมัดเสริม (?.)
ตัวดำเนินการเชิงตรรกะและการกำหนด (&&=)
ตรรกะหรือการกำหนด (||=)
การมอบหมายการรวมศูนย์แบบ Nullish (??=)
Promise allSettled():Promise.allSettled([prom1,prom2,prom3]).จากนั้น {}
การนำเข้าแบบไดนามิก
คุณสมบัติเหล่านี้ค่อนข้างใหม่
เบราว์เซอร์รุ่นเก่าอาจต้องใช้โค้ดสำรอง (Polyfill)
ตัวแปร JavaScript BigInt ใช้ในการจัดเก็บค่าจำนวนเต็มขนาดใหญ่ ที่มีขนาดใหญ่เกินกว่าจะแสดงด้วย Number ของ JavaScript ปกติ
จำนวนเต็ม JavaScript มีความแม่นยำสูงสุดประมาณ 15 หลักเท่านั้น
let x = 999999999999999;
let y = 9999999999999999; // too bigลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>
<h2>Integer Precision</h2>
<p>Integers (numbers without a period or exponent notation) are accurate up to 15 digits:</p>
<p id="demo"></p>
<script>
let x = 999999999999999;
let y = 9999999999999999;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>
let x = 9999999999999999;
let y = 9999999999999999n;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>
<h2>Integer and BigInt</h2>
<p id="demo"></p>
<script>
let x = 9999999999999999;
let y = BigInt("9999999999999999");
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>
หากต้องการสร้าง BigInt ให้เติม n ต่อท้ายจำนวนเต็มหรือการโทร <รหัส class="w3-codespan">BigInt():
let x = 1234567890123456789012345n;
let y = BigInt(1234567890123456789012345)ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>
<h2>Create a BigInt</h2>
<p id="demo"></p>
<script>
let x = 123456789012345678901234567890n;
let y = BigInt("123456789012345678901234567890");
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>
JavaScript typeof และ BigInt คือ "bigint":
let x = BigInt(999999999999999);
let type = typeof x;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>
<h2>BigInt typeof</h2>
<p>The typeof a BigInt is:</p>
<p id="demo"></p>
<script>
let x = BigInt("9999999999999999");
document.getElementById("demo").innerHTML = typeof x;
</script>
</body>
</html>
BigInt ได้รับการสนับสนุนในเบราว์เซอร์สมัยใหม่ทั้งหมดตั้งแต่เดือนกันยายน 2020:
| Chrome 67 | Edge 79 | Firefox 68 | Safari 14 | Opera 54 |
| May 2018 | Jan 2020 | Jul 2019 | Sep 2020 | Jun 2018 |
ก่อน ES2020 ไม่มีวิธีสตริงที่สามารถใช้เพื่อค้นหาเหตุการณ์ทั้งหมดได้ ของสตริงในสตริง
const iterator = text.matchAll("Cats");ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>
<p>ES2020 intoduced the string method matchAll().</p>
<p id="demo"></p>
<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll("Cats");
document.getElementById("demo").innerHTML = Array.from(iterator);
</script>
</body>
</html>
หากพารามิเตอร์เป็นนิพจน์ทั่วไป จะต้องตั้งค่าสถานะโกลบอล (g) มิฉะนั้น TypeError ถูกส่งออกไป
const iterator = text.matchAll(/Cats/g);ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>
<p>ES2020 intoduced the string method matchAll().</p>
<p id="demo"></p>
<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/g);
document.getElementById("demo").innerHTML = Array.from(iterator);
</script>
</body>
</html>
หากคุณต้องการค้นหาโดยไม่คำนึงถึงขนาดตัวพิมพ์ จะต้องตั้งค่าแฟล็กที่ไม่คำนึงถึงตัวพิมพ์ (i):
const iterator = text.matchAll(/Cats/gi);ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>
<p>ES2020 intoduced the string method matchAll().</p>
<p id="demo"></p>
<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/gi);
document.getElementById("demo").innerHTML = Array.from(iterator);
</script>
</body>
</html>
ES2021 แนะนำเมธอดสตริงแทนที่All()
ตัวดำเนินการ ?? จะส่งคืนอาร์กิวเมนต์แรกหากไม่ใช่ nullish (null หรือ unknown)
มิฉะนั้นจะส่งกลับวินาที
let name = null;
let text = "missing";
let result = name ?? text;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The ?? Operator</h2>
<p>The ?? operator returns the first argument if it is not nullish (null or undefined). Otherwise it returns the second.</p>
<p id="demo"></p>
<script>
let name = null;
let text = "missing";
let result = name ?? text;
document.getElementById("demo").innerHTML = "The name is " + result;
</script>
</body>
</html>
โอเปอเรเตอร์ nullish ได้รับการสนับสนุนในเบราว์เซอร์สมัยใหม่ทั้งหมดตั้งแต่เดือนมีนาคม 2020:
| Chrome 80 | Edge 80 | Firefox 72 | Safari 13.1 | Opera 67 |
| Feb 2020 | Feb 2020 | Jan 2020 | Mar 2020 | Mar 2020 |
Optional Chaining Operator ส่งคืน unknown ถ้าอ็อบเจ็กต์เป็น unknown หรือ null (แทนที่จะแสดงข้อผิดพลาด)
const car = {type:"Fiat", model:"500", color:"white"};
let name = car?.name;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The ?. Operator</h2>
<p>The ?. operator returns undefined if an object is undefined or null (instead of throwing an error).</p>
<p>Car name is:</p>
<p id="demo"></p>
<script>
const car = {type:"Fiat", model:"500", color:"white"};
let name = car?.name;
document.getElementById("demo").innerHTML = name;
</script>
</body>
</html>
ตัวดำเนินการ ?.= ได้รับการสนับสนุนในเบราว์เซอร์สมัยใหม่ทั้งหมดตั้งแต่เดือนมีนาคม 2020:
| Chrome 80 | Edge 80 | Firefox 74 | Safari 13.1 | Opera 67 |
| Feb 2020 | Feb 2020 | Mar 2020 | Mar 2020 | Mar 2020 |
ตัวดำเนินการเชิงตรรกะและการกำหนดถูกใช้ระหว่างสองค่า
หากค่าแรกเป็น true ค่าที่สองจะถูกกำหนดค่า
let x = 10;
x &&= 5;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>Logical AND Assignment</h2>
<h3>The &&= Operator</h3>
<p>If the first value is true, the second value is assigned.</p>
<p id="demo"></p>
<script>
let x = 100;
x &&= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>
</body>
</html>
ตัวดำเนินการ &&= ได้รับการสนับสนุนในเบราว์เซอร์สมัยใหม่ทั้งหมดตั้งแต่เดือนกันยายน 2020:
| Chrome 85 | Edge 85 | Firefox 79 | Safari 14 | Opera 71 |
| Aug 2020 | Aug 2020 | Mar 2020 | Sep 2020 | Sep 2020 |
ตัวดำเนินการเชิงตรรกะหรือการกำหนด ถูกใช้ระหว่างสองค่า
หากค่าแรกเป็น false ค่าที่สองจะถูกกำหนดค่า
let x = 10;
x ||= 5;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>Logical OR Assignment</h2>
<h3>The ||= Operator</h3>
<p>If the first value is false, the second value is assigned:</p>
<p id="demo"></p>
<script>
let x = undefined;
x ||= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>
</body>
</html>
ตัวดำเนินการ ||= ได้รับการสนับสนุนในเบราว์เซอร์สมัยใหม่ทั้งหมดตั้งแต่เดือนกันยายน 2020:
| Chrome 85 | Edge 85 | Firefox 79 | Safari 14 | Opera 71 |
| Aug 2020 | Aug 2020 | Mar 2020 | Sep 2020 | Sep 2020 |
Nullish Coalescing Assignment Operator ถูกใช้ระหว่างสองค่า
หากค่าแรกคือ unknown หรือ null ค่าที่สองจะถูกกำหนดค่า
let x;
x ??= 5;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>The ??= Operator</h2>
<p>The ??= operator is used between two values. If the first value is undefined or null, the second value is assigned.</p>
<p id="demo"></p>
<script>
let x;
document.getElementById("demo").innerHTML = x ??= 5;
</script>
</body>
</html>
ตัวดำเนินการ ??= ได้รับการสนับสนุนในเบราว์เซอร์สมัยใหม่ทั้งหมดตั้งแต่เดือนกันยายน 2020:
| Chrome 85 | Edge 85 | Firefox 79 | Safari 14 | Opera 71 |
| Aug 2020 | Aug 2020 | Mar 2020 | Sep 2020 | Sep 2020 |