ECMAScript 2020：解释非标准的 JavaScript 行为-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2020 的语言规范中，标准开发者对于大量非标准 JavaScript 行为进行了规范化和解释。这一篇文章主要介绍一些非标准行为，并且通过示例代码来解释。

1. 字符串的 trimStart 和 trimEnd 方法

在早期版本的 JavaScript 中，字符串的 trim 方法可以去除字符串两端的空格。但是，这个方法并没有考虑到字符串两端的其他空白符，例如换行符和制表符等。为了解决这个问题，ECMAScript 2020 中引入了 trimStart 和 trimEnd 方法。

trimStart 方法去除了字符串开头部分所有空白符，而 trimEnd 方法则去除了字符串结尾部分的所有空白符。下面是一些示例代码：

const text = "   hello world   \n\t"
console.log(text.trimStart()) // "hello world   \n\t"
console.log(text.trimEnd()) // "   hello world"

在 JavaScript 中，访问对象的属性或方法时，如果对象不存在，那么就会抛出一个错误。为了解决这个问题，非常常见的一种做法是使用短路求值，例如：

const obj = {a: {b: {c: 'hello'}}}

const result = obj && obj.a && obj.a.b && obj.a.b.c
console.log(result) // "hello"

但是，这种做法的弊端是代码可读性差。ECMAScript 2020 中新增了一个可选链操作符 ?.，它可以使代码更加简洁易读：

const obj = {a: {b: {c: 'hello'}}}

const result = obj?.a?.b?.c
console.log(result) // "hello"

如果任意一个属性不存在，那么该操作符会返回 undefined，而不会抛出错误。这段代码和上面的例子等价：

const obj = {a: {b: {c: 'hello'}}}

const result = obj && obj.a && obj.a.b && obj.a.b.c
console.log(result) // "hello"

但是，可选链操作符更加简洁易读，而且可以直接在链式调用中使用。例如：

const obj = {a: {b: {c: 'hello', d: 'world'}}}

const result = obj?.a?.b?.c?.toLowerCase()?.includes('hell')
console.log(result) // true

在 JavaScript 中，函数体内可以用大括号 {} 包裹多条语句。如果要在函数体内使用 return 语句，通常要加上一个显式的 return 关键字，例如：

function foo() {
  const a = 1
  const b = 2
  return a + b
}

console.log(foo()) // 3

在 ECMAScript 2020 中，如果函数体内只有一个表达式，可以直接将这个表达式放在大括号里面，不用加 return 关键字，例如：

function foo() {
  const a = 1
  const b = 2
  return {a, b}
}

console.log(foo()) // {a: 1, b: 2}

可以直接写成这样：

function foo() {
  const a = 1
  const b = 2
  return {a, b}
}

console.log(foo()) // {a: 1, b: 2}

这样更加简洁易读，并且可以减少代码量。需要注意的是，如果函数体内有多个表达式或者语句，还是需要加上显式的 return 关键字。

ECMAScript 2020 中引入了许多新的语言特性，其中包括字符串的 trimStart 和 trimEnd 方法、可选链操作符和大括号里的 return 语句。这些特性都可以使代码更加清晰和简洁，减少出错的可能性，提高开发效率。在使用这些特性时需要注意它们的兼容性和使用规范。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/647c14c9968c7c53b07450b6