[译] JavaScript ES2021 中激动人心的特性

简介: [译] JavaScript ES2021 中激动人心的特性

JavaScript ES2021 中激动人心的特性


每年,JavaScript 都会增添新的特性。今年的 ES2020 或称 ES11 业已发布 (参阅这篇 ES2020 特性的文章),而 ES2021 或者说是 ES12 预计将于 2021 年中旬发布。

每年被增添到 JavaScript 中的特性都会经历一个四阶段的过程,第四阶段也就是最终的一个。在本文中,我将讨论已经到达第四阶段并已被增添到 Google Chrome V8 引擎中的特性。

本文讨论新特性的列表

  • String.prototype.replaceAll
  • Promise.any
  • 逻辑操作符和赋值表达式
  • 数值分隔符
  • Intl.ListFormat
  • Intl.DateTimeFormat 的 dateStyle 和 timeStyle 选项

String.prototype.replaceAll

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

拟议的方法 replaceAll() 会返回一个新字符串,该字符串中用一个替换项替换了原字符串中所有匹配了某模式的部分。模式可以是一个字符串或一个正则表达式,而替换项可以是一个字符串或一个应用于每个匹配项的函数。


let str = 'I use linux, I love linux'
str = str.replaceAll('linux', 'windows');
console.log(str)
/****  输出  ****/
// I use windows, I love windows

Promise.any

ES2021 将引入 Promise.any() 方法,一旦该方法从 promise 列表或数组中命中首个 resolve 的 promise (正如 Example 1a 中所解释的那样),就会短路并返回一个值。如果所有 promise 都被 reject ,该方法则将抛出一个聚合的错误信息 (在 Example 1b 里有所展示)

其区别于 Promise.race() 之处在于,后者在某个 promise 率先 resolve 或 reject 后都会短路。

Example 1a: 尽管某个 promise 的 reject 早于另一个 promise 的 resolve,Promise.any() 仍将返回那个首先 resolve 的 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))
/****  输出  ****/
// Result: Second

Example 1b: 当所有 promise 都被 reject 后,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))
/****  输出  ****/
// AggregateError: All promises were rejected

逻辑操作符和赋值表达式

在 JavaScript 中,有许多赋值表达式和逻辑操作符,如下所示:


// 赋值表达式例子
let num = 5
num+=10
console.log(num) // 15
// 逻辑操作符例子
let num1 = 6
let num2 = 3
console.log(num1 === 6 && num2 === 2) // false
console.log(num1 === 6 || num2 === 2) // true

在新提案里,我们将有能力结合逻辑操作符和赋值表达式。下面是一些 &&||?? 的例子:

&& 逻辑赋值操作符

该操作符用来在仅当左侧(译注:原文为 LHS,即 Left-hand Side)变量为真值(truthy)时,才将右侧(RHS)变量赋值给左侧变量。


// `&&` 逻辑赋值操作符
let num1 = 5
let num2 = 10
num1 &&= num2
console.log(num1) // 10
// 行 5 也可写作以下方式
// 1. num1 && (num1 = num2)
// 2. if (num1) num1 = num2

|| 逻辑赋值操作符

该操作符用来在仅当左侧变量为虚值(falsy)时,才将右侧变量赋值给左侧变量。


// `||` 逻辑赋值操作符
let num1
let num2 = 10
num1 ||= num2
console.log(num1) // 10
// 行 5 也可写作以下方式
// 1. num1 || (num1 = num2)
// 2. if (!num1) num1 = num2

?? 逻辑赋值操作符

ES2020 已经引入了空值合并操作符(Nullish Coalescing operator,即 ??),该操作符亦可与赋值表达式结合。在仅当左侧变量为 undefined 或 null 时,该操作符才将右侧变量赋值给左侧变量。


// `??` 逻辑赋值操作符
let num1
let num2 = 10
num1 ??= num2
console.log(num1) // 10
num1 = false
num1 ??= num2
console.log(num1) // false
// 行 5 也可写作以下方式
// num1 ?? (num1 = num2)

数值分隔符

数字分隔符(Numeric Separators)的引入将通过使用 _(下划线)符号在数字分组间提供一个隔离以便于阅读数值。例如:


let number = 100_000 
console.log(number)
/****  输出  ****/
// 100000

Intl.ListFormat

ListFormat 对象的构造方法有两个参数,皆为可选。首个参数是一个语言标识(locale),而第二个参数是一个选项对象 -- 包含了 style 和 type 两个属性。


new Intl.ListFormat([locales[, options]])

Intl.ListFormat 有一个叫做 format() 的方法,接受一个数组作为参数,并因 locale 和选项而异以相应的方式格式化该参数数组。

以下给出的是一些结合了不同 locale 和选项的例子。


const arr = ['Pen', 'Pencil', 'Paper']
let obj = new Intl.ListFormat('en', { style: 'short', type: 'conjunction' })
console.log(obj.format(arr)) 
/****  输出  ****/
// Pen, Pencil, & Paper
obj = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' })
console.log(obj.format(arr)) 
/****  输出  ****/
// Pen, Pencil, and Paper
obj = new Intl.ListFormat('en', { style: 'narrow', type: 'conjunction' })
console.log(obj.format(arr)) 
/****  输出  ****/
// Pen, Pencil, Paper
// 传入意大利语标识
obj = new Intl.ListFormat('it', { style: 'short', type: 'conjunction' })
console.log(obj.format(arr)) 
/****  输出  ****/
// Pen, Pencil e Paper
// 传入德语标识
obj = new Intl.ListFormat('de', { style: 'long', type: 'conjunction' })
console.log(obj.format(arr)) 
/****  输出  ****/
// Pen, Pencil und Paper

Intl.DateTimeFormat 的 dateStyle 和 timeStyle 选项

Intl.DateTimeFormat 对象是一个支持语言敏感日期和时间格式化的构造器。拟议的 dateStyletimeStyle 选项可被用于获取一个 locale 特有的日期和给定长度的时间。

一些不同选项和语言(locale)的例子展示在此:


// 短格式的时间
let o = new Intl.DateTimeFormat('en' , { timeStyle: 'short' })
console.log(o.format(Date.now()))
// 11:27 PM
// 中等格式的时间
o = new Intl.DateTimeFormat('en' , { timeStyle: 'medium'})
console.log(o.format(Date.now()))
// 11:27:57 PM
// 长格式的时间
o = new Intl.DateTimeFormat('en' , { timeStyle: 'long' })
console.log(o.format(Date.now()))
// 11:27:57 PM GMT+11
// 短格式的日期
o = new Intl.DateTimeFormat('en' , { dateStyle: 'short'})
console.log(o.format(Date.now()))
// 10/6/20
// 中等格式的日期
o = new Intl.DateTimeFormat('en' , { dateStyle: 'medium'})
console.log(o.format(Date.now()))
// Oct 6, 2020
// 长格式的日期
o = new Intl.DateTimeFormat('en' , { dateStyle: 'long'})
console.log(o.format(Date.now()))
// October 6, 2020

dateStyletimeStyle 选项共用并结合不同语言标识的例子,如下所示:


let abc
// 英语
abc = new Intl.DateTimeFormat('en' , { timeStyle: 'short', dateStyle: 'long'})
console.log(abc.format(Date.now()))
// October 6, 2020 at 11:40 PM
// 意大利语
abc = new Intl.DateTimeFormat('it' , { timeStyle: 'short', dateStyle: 'long'})
console.log(abc.format(Date.now()))
// 6 ottobre 2020 23:40
// 德语
abc = new Intl.DateTimeFormat('de' , { timeStyle: 'short', dateStyle: 'long'})
console.log(abc.format(Date.now()))
// 6. Oktober 2020 um 23:40

总结

作为一个开发者,追踪一门语言的新特性很重要。若你错过了 ES2020 中更新的特性,我推荐你阅读这篇文章 -— ES2020 已至



相关文章
|
1月前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
60 4
|
1月前
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
29 5
|
1月前
|
自然语言处理 JavaScript 前端开发
ECMAScript 6 的出现为 JavaScript 带来了许多新的特性和改进
这些只是ES6的一些主要特性,它们极大地增强了JavaScript的功能和表现力,使得JavaScript在大型应用开发、前端框架等领域能够更加高效地编写复杂的应用程序。
|
2月前
|
JavaScript 前端开发 编译器
掌握现代化JavaScript:ECMAScript提案与特性
【10月更文挑战第13天】本文介绍了ECMAScript(ES)的最新提案与特性,包括可选链、空值合并运算符、类字段和顶层Await等。通过跟踪TC39提案、使用Babel或TypeScript、测试兼容性以及逐步迁移,开发者可以高效地采用这些新特性,简化代码、提高开发效率并增强应用功能。文章还提供了实战技巧,帮助开发者在现代Web开发中充分利用这些现代化的特性。
|
2月前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
74 4
|
1月前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
49 0
|
3月前
|
JavaScript 前端开发 Oracle
软件工程师,学习下JavaScript ES6新特性吧
软件工程师,学习下JavaScript ES6新特性吧
48 9
|
4月前
|
Rust JavaScript 前端开发
Rust! 无VDom! 尤雨溪解析 Vue.js 2024 新特性
Rust! 无VDom! 尤雨溪解析 Vue.js 2024 新特性
|
4月前
|
前端开发 JavaScript 开发者
翻天覆地!ES6+新特性大爆发,揭秘JavaScript代码的惊人蜕变!
【8月更文挑战第27天】自ES6标准发布以来,JavaScript新增的特性极大地提升了编程效率并简化了代码。本文重点介绍了五大特性:函数默认参数简化、模板字符串的强大功能、解构赋值的便捷性、箭头函数的简洁之美。这些特性不仅使代码更加简洁、易读,还解决了传统写法中的诸多问题。通过学习和应用这些新特性,开发者可以编写出更高效、更优雅的代码,以应对日益复杂的编程挑战。
81 2
|
4月前
|
JavaScript 前端开发 安全
JS 混淆解析:JS 压缩混淆原理、OB 混淆特性、OB 混淆JS、混淆突破实战
JS 混淆解析:JS 压缩混淆原理、OB 混淆特性、OB 混淆JS、混淆突破实战
254 2