JavaScript ECMAScript 2021


目录

    显示目录

JavaScript 版本号

旧的 JS 版本以数字命名:ES5 (2009) 和 ES6 (2015)。

从 2016 年开始,版本按年份命名:ECMAScript 2016、2017、2018、2019,...

ES2021 的新特性

  • Promise any():
    style="word-wrap:break-word;">const first=wait Promise.any([prom1,prom2,prom3]);

  • 字符串替换全部()

  • 数字分隔符 (_)


ES2022 的新特性

  • 数组 at()

  • 字符串位于()

  • 正则表达式 /d

  • 对象.hasOwn()

  • 错误原因

  • 等待导入

  • 私有方法和字段

  • 类字段声明

警告

这些功能相对较新。

较旧的浏览器可能需要替代代码(Polyfill)


JavaScript 字符串 ReplaceAll()

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),否则 抛出类型错误。

例子

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 年 1 月起,所有现代浏览器都支持数字分隔符:

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() 方法返回与 [] 相同的结果。

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

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 的值,而不是对象的最后一个属性。

ES2022 中引入了 at() 方法来解决这个问题。


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() 方法返回与 [] 相同的结果。

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

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