抖音技术能力大揭密!钜惠大礼、深度体验,尽在火山引擎增长沙龙,就等你来! 立即报名>> 了解详情
写点什么

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

Taran

2020 年 10 月 31 日

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

每年,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([  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
复制代码


逻辑运算符和赋值表达式

在 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_000 console.log(number)/**** Output ****/// 100000
复制代码


Intl.ListFormat

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


2020 年 10 月 31 日 12:004252

评论

发布
暂无评论
发现更多内容

数字货币交易所系统开发,区块链交易所搭建

薇電13242772558

区块链 数字货币

永续合约交易系统开发模式定制

系统开发咨询:I76-883I-5I52 邓森

区块链商品溯源解决方案,区块链全程追溯系统

13530558032

微警务平台搭建,智慧警务系统开发解决方案

t13823115967

智慧警务系统开发 微警务

观察者模式

soolaugust

设计模式 观察者模式 七日更

Docker终端无法输入中文问题解决

Simon

Docker 七日更

金瓯无缺江河一统|Win10系统基于Docker和Python3搭建并维护统一认证系统OpenLdap

刘悦的技术博客

Python TCP ldap openldap 统一管理

云原生应用开发框架Quarkus介绍

gaolk

云原生 Quarkus

排查指南 | mPaaS 小程序被卡在了三个蓝点

蚂蚁集团移动开发平台 mPaaS

小程序 问题排查 mPaaS

25道mybatis面试题,不要说你不会

田维常

mybatis

json处理

Isuodut

如何从危机中提炼总结,做好2020年的复盘?

CECBC区块链专委会

复盘 经济

新思科技:2021年软件安全行业六大趋势预测

InfoQ_434670063458

90%的程序员,都没用过多线程和锁,怎么成为架构师?

小傅哥

程序员 小傅哥 线程池 架构师 七日更

企业数字化如何转型?想要资产状况及时把控,它的作用至关重要!

一只数据鲸鱼

物联网 数字化 数据可视化 资产管理

规划算法

田维常

算法

简析5G时代的MART流处理

VoltDB

数据库 5G

5年Java高工经验,我是如何成功拿下滴滴D7Offer的?

Java架构追梦

Java 学习 架构 面试 滴滴

便民服务多元化,智慧平安小区安防智能化建设

t13823115967

智慧城市

浅谈数据仓库质量管理规范

数据社

数据仓库 数据质量管理 七日更

小程序市场的「App Store」来了!你准备好吃“螃蟹”了吗?

蚂蚁集团移动开发平台 mPaaS

小程序生态 mPaaS appstore

AOFEX交易所APP系统开发|AOFEX交易所软件开发

开發I852946OIIO

系统开发

我的 500 张技术配图是怎么画的?

小林coding

程序人生 画图软件

MySQL用户与权限管理指南

Simon

MySQL 用户权限 七日更

平安社区平台解决方案,智慧社区管理服务平台搭建

13530558032

Native 与 JS 的双向通信

Minar Kotonoha

iOS面试基础知识 (五)

iOSer

ios 大厂面试 iOS面试 面试题总结 底层知识

什么样的企业才需要用到云服务器?

德胜网络-阳

花火交易所系统开发|花火交易所软件APP开发

开發I852946OIIO

系统开发

Javascript | 模拟mvc实现点餐程序

LiOnTalKING

Java mvc 前端 H5

week5 conclusion 分布式缓存架构+消息队列

J

极客大学架构师训练营

Study Go: From Zero to Hero

Study Go: From Zero to Hero

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