JavaScript ES2021最值得期待的新特性解析

2020 年 11 月 2 日 InfoQ
作者 | Taran
译者 | 王强
策划 | 蔡芳芳
每年,JavaScript 的更新都会添加新特性。今年发布的是 ES2020 或称 ES11,预计 ES2021 或称 ES12 将于 2021 年中发布。添加到 JavaScript 的新特性都会经历四个阶段。在本文中,我将讨论已经进入第四阶段且已添加到谷歌 Chrome V8 引擎中的新特性。
本文讨论的新特性列表
  • String.prototype.replaceAll

  • Promise.any

  • 逻辑运算符和赋值表达式

  • 数值分隔符

  • Intl.ListFormat

  • Intl.DateTimeFormat 的 dateStyle 和 timeStyle 选项

String.prototype.replaceAll

在 JavaScript 中,replace() 方法仅替换字符串中一个模式的第一个实例。如果我们要替换字符串中某个模式的所有匹配项,则唯一的方法是使用全局正则表达式。

提案方法 replaceAll() 返回一个新字符串,其中模式的所有匹配都会被替代项替换。模式可以是字符串或正则表达式,而替换项可以是字符串或针对每次匹配执行的函数。
let str = 'I use linux, I love linux'str = str.replaceAll('linux', 'windows');
console.log(str)
/**** Output ****/// I use windows, I love windows
Promise.any

ES2021 将引入 Promise.any() 方法,只要这个方法命中了 Promise 列表 / 数组中的第一个已解析的 Promise,就会短路并返回一个值(如示例 1a 中所述)。如果所有的 promise 都被拒绝,那么它将抛出一个汇总错误消息(如示例 1b 所示)。

它与 Promise.race() 不同,因为一旦给定的 Promise 之一被解析或拒绝,Promise.any() 方法就会短路。

示例 1a:即使一个 Promise 在一个已解析的 Promise 之前被拒绝,Promise.any() 仍将返回第一个已解析的 Promise。
Promise.any([  new Promise((resolve, reject) => setTimeout(reject, 200, 'Third')),  new Promise((resolve, reject) => setTimeout(resolve, 1000, 'Second')),  new Promise((resolve, reject) => setTimeout(resolve, 2000, 'First')),]).then(value => console.log(`Result: ${value}`)).catch (err => console.log(err))
/**** Output ****/// Result: Second
示例 1b:当所有的 Promise 都被拒绝时,将抛出 AggregateError。
Promise.any([  Promise.reject('Error 1'),  Promise.reject('Error 2'),  Promise.reject('Error 3')]).then(value => console.log(`Result: ${value}`)).catch (err => console.log(err))/**** Output ****/// AggregateError: All promises were rejected
逻辑运算符和赋值表达式
在 JavaScript 中有许多赋值运算符和逻辑运算符,如以下基本示例:
// Assignment Operator Examplelet num = 5num+=10console.log(num) // 15// Logical Operator Examplelet num1 = 6let num2 = 3console.log(num1 === 6 && num2 === 2) // falseconsole.log(num1 === 6 || num2 === 2) // true

新的提案让我们将能把逻辑运算符和赋值运算符结合起来。以下是 &&、||和?? 运算符的一些示例:

带有 && 运算符的逻辑赋值运算符
仅当 LHS 值为真时,才将 RHS 变量值赋给 LHS 变量。
// Logical Assignment Operator with && operatorlet num1 = 5let num2 = 10num1 &&= num2console.log(num1) // 10// Line 5 can also be written as following ways// 1. num1 && (num1 = num2)// 2. if (num1) num1 = num2
带有||的运算符逻辑赋值运算符
仅当 LHS 值为假时,才将 RHS 变量值赋给 LHS 变量。
// Logical Assignment Operator with || operatorlet num1let num2 = 10num1 ||= num2console.log(num1) // 10// Line 5 can also be written as following ways// 1. num1 || (num1 = num2)// 2. if (!num1) num1 = num2
带有?? 运算符的逻辑赋值运算符
ES2020 引入了空值合并运算符,其也可以与赋值运算符结合使用。仅当 LHS 为 undefined 或仅为 null 时,才将 RHS 变量值赋给 LHS 变量。
// Logical Assignment Operator with ?? operatorlet num1let num2 = 10num1 ??= num2console.log(num1) // 10num1 = falsenum1 ??= num2console.log(num1) // false// Line 5 can also be written as following ways// num1 ?? (num1 = num2)
数值分隔符
新引入的数值分隔符使用 _(下划线)字符,在数值组之间提供分隔,使数值读起来更容易。例如:
let number = 100_000console.log(number)/**** Output ****/// 100000
ListFormat 对象带有两个参数,它们都是可选的。第一个参数是语言(语言环境),第二个参数是具有两个属性(样式和类型)的选项对象。
new Intl.ListFormat([locales[, options]])

Intl.ListFormat 有一个称为 format() 的方法,该方法接收一个数组作为一个参数,并以特定于语言环境的方式对其进行格式化。

下面给出了一些示例,这些示例结合了不同的语言环境和选项。
const arr = ['Pen', 'Pencil', 'Paper']let obj = new Intl.ListFormat('en', { style: 'short', type: 'conjunction' })console.log(obj.format(arr))/**** Output ****/// Pen, Pencil, & Paper
obj = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' })console.log(obj.format(arr))/**** Output ****/// Pen, Pencil, and Paper
obj = new Intl.ListFormat('en', { style: 'narrow', type: 'conjunction' })console.log(obj.format(arr))/**** Output ****/// Pen, Pencil, Paper
// Passing in Italy language tagobj = new Intl.ListFormat('it', { style: 'short', type: 'conjunction' })console.log(obj.format(arr))/**** Output ****/// Pen, Pencil e Paper
// Passing in German language tagobj = new Intl.ListFormat('de', { style: 'long', type: 'conjunction' })console.log(obj.format(arr))/**** Output ****/// Pen, Pencil und Paper
dateStyle 和 timeStyle 选项

Intl.DateTimeFormat 对象是用来启用语言敏感的日期和时间格式的对象构造器。新提案的 dateStyle 和 timeStyle 选项可用于请求给定长度的,特定于语言环境的日期和时间。

下面是不同的选项和语言(区域设置)的一些示例:
// Time only with short formatlet o = new Intl.DateTimeFormat('en' , { timeStyle: 'short' })console.log(o.format(Date.now()))// 11:27 PM
// Time only with medium formato = new Intl.DateTimeFormat('en' , { timeStyle: 'medium'})console.log(o.format(Date.now()))// 11:27:57 PM
// Time only with long formato = new Intl.DateTimeFormat('en' , { timeStyle: 'long' })console.log(o.format(Date.now()))// 11:27:57 PM GMT+11
// Date only with short formato = new Intl.DateTimeFormat('en' , { dateStyle: 'short'})console.log(o.format(Date.now()))// 10/6/20
// Date only with medium formato = new Intl.DateTimeFormat('en' , { dateStyle: 'medium'})console.log(o.format(Date.now()))// Oct 6, 2020
// Date only with long formato = new Intl.DateTimeFormat('en' , { dateStyle: 'long'})console.log(o.format(Date.now()))// October 6, 2020
dateStyle 和 timeStyle 选项与不同的语言标记一起使用,如下例所示:
let abc// English languageabc = new Intl.DateTimeFormat('en' , { timeStyle: 'short', dateStyle: 'long'})console.log(abc.format(Date.now()))// October 6, 2020 at 11:40 PM
// Italian languageabc = new Intl.DateTimeFormat('it' , { timeStyle: 'short', dateStyle: 'long'})console.log(abc.format(Date.now()))// 6 ottobre 2020 23:40
// German languageabc = new Intl.DateTimeFormat('de' , { timeStyle: 'short', dateStyle: 'long'})console.log(abc.format(Date.now()))// 6. Oktober 2020 um 23:40
   小  结

作为开发人员,跟紧语言的新特性是很重要的。如果你错过了 ES2020 的特性更新,建议你阅读这篇文章:

《ECMAScript 2020 的新功能》

参考阅读

https://codeburst.io/exciting-features-of-javascript-es2021-es12-1de8adf6550b



InfoQ 写作平台欢迎所有热爱技术、热爱创作、热爱分享的内容创作者入驻!

还有更多超值活动等你来!

扫描下方二维码

填写申请,成为作者

开启你的创作之路吧~


点个在看少个 bug 👇

登录查看更多
0

相关内容

JavaScript 是弱类型的动态脚本语言,支持多种编程范式,包括面向对象和函数式编程。
【2020干货书】Python3基础导论介绍,98页pdf
专知会员服务
102+阅读 · 2020年10月11日
【2020新书】C++20快速语法参考,第4版,209页pdf
专知会员服务
73+阅读 · 2020年8月5日
【2020新书】使用高级C# 提升你的编程技能,412页pdf
专知会员服务
58+阅读 · 2020年6月26日
【实用书】Python爬虫Web抓取数据,第二版,306页pdf
专知会员服务
118+阅读 · 2020年5月10日
【2020新书】C++20 特性 第二版,A Problem-Solution Approach
专知会员服务
59+阅读 · 2020年4月26日
使用 C# 和 Blazor 进行全栈开发
DotNet
6+阅读 · 2019年4月15日
TensorFlow 2.0新特性之Ragged Tensor
深度学习每日摘要
18+阅读 · 2019年4月5日
如何编写完美的 Python 命令行程序?
CSDN
5+阅读 · 2019年1月19日
Python3.8新特性概览
Python程序员
4+阅读 · 2018年12月8日
Python3.7中一种懒加载的方式
Python程序员
3+阅读 · 2018年4月27日
Python | 爬爬爬:爬百度云,爬百度贴吧,爬爱奇艺
计算机与网络安全
3+阅读 · 2018年3月30日
为什么你应该学 Python ?
计算机与网络安全
4+阅读 · 2018年3月24日
JavaScript 背包问题详解
前端大全
7+阅读 · 2018年1月17日
使用 Python 绘制《星战》词云
Datartisan数据工匠
3+阅读 · 2017年8月31日
Arxiv
0+阅读 · 2021年1月25日
Neural Speech Synthesis with Transformer Network
Arxiv
5+阅读 · 2019年1月30日
Panoptic Feature Pyramid Networks
Arxiv
3+阅读 · 2019年1月8日
Arxiv
3+阅读 · 2018年3月21日
Arxiv
5+阅读 · 2016年12月29日
VIP会员
相关资讯
使用 C# 和 Blazor 进行全栈开发
DotNet
6+阅读 · 2019年4月15日
TensorFlow 2.0新特性之Ragged Tensor
深度学习每日摘要
18+阅读 · 2019年4月5日
如何编写完美的 Python 命令行程序?
CSDN
5+阅读 · 2019年1月19日
Python3.8新特性概览
Python程序员
4+阅读 · 2018年12月8日
Python3.7中一种懒加载的方式
Python程序员
3+阅读 · 2018年4月27日
Python | 爬爬爬:爬百度云,爬百度贴吧,爬爱奇艺
计算机与网络安全
3+阅读 · 2018年3月30日
为什么你应该学 Python ?
计算机与网络安全
4+阅读 · 2018年3月24日
JavaScript 背包问题详解
前端大全
7+阅读 · 2018年1月17日
使用 Python 绘制《星战》词云
Datartisan数据工匠
3+阅读 · 2017年8月31日
Top
微信扫码咨询专知VIP会员