跳到主要内容

39 篇博文 含有标签「ECMAScript」

查看所有标签

格式良好的 `JSON.stringify`

· 阅读需 1 分钟
Mathias Bynens ([@mathias](https://twitter.com/mathias))

JSON.stringify 之前被规范为在输入包含任何独立代理对时返回格式不良的 Unicode 字符串：

JSON.stringify('\uD800');
// → '"�"'

“格式良好的 JSON.stringify”提案 修改了 JSON.stringify，使其对独立代理对输出转义序列，从而使其输出为合法的 Unicode（且可表示为 UTF-8）：

JavaScript 模块

· 阅读需 21 分钟
Addy Osmani ([@addyosmani](https://twitter.com/addyosmani)) 和 Mathias Bynens ([@mathias](https://twitter.com/mathias))

JavaScript 模块现在已经在所有主流浏览器中支持！

本文解释了如何使用 JS 模块、如何合理地部署它们，以及 Chrome 团队如何努力在未来使模块更加完善。

什么是 JS 模块？​

JS 模块（也称为“ES 模块”或“ECMAScript 模块”）是一个重要的新功能，或者说是一组新功能集合。你可能以前使用过用户级的 JavaScript 模块系统。可能使用过类似 Node.js 的 CommonJS，或者AMD，或者其他什么。这些模块系统都有一个共同点：它们允许你导入和导出内容。

BigInt: JavaScript 中任意精度的整数

· 阅读需 9 分钟
Mathias Bynens ([@mathias](https://twitter.com/mathias))

BigInt 是 JavaScript 中的一种新型数字原始值，可以表示任意精度的整数。通过 BigInt，您可以安全地存储并操作即使超出 Number 安全整数限制的大整数。本文通过对比 JavaScript 中的 BigInt 和 Number，逐步介绍它的一些使用场景，并说明 Chrome 67 中的新功能。

可选的`catch`绑定

· 阅读需 1 分钟
Mathias Bynens ([@mathias](https://twitter.com/mathias))

try语句的catch子句过去需要一个绑定：

try {
  doSomethingThatMightThrow();
} catch (exception) {
  //     ^^^^^^^^^
  // 我们必须命名绑定，即使我们不使用它！
  handleException();
}

在ES2019中，catch现在可以不带绑定使用。如果您在处理异常的代码中不需要exception对象，这将非常有用。

try {
  doSomethingThatMightThrow();
} catch { // → 无绑定！
  handleException();
}

可选的catch绑定支持​

`String.prototype.trimStart` 和 `String.prototype.trimEnd`

· 阅读需 1 分钟
Mathias Bynens ([@mathias](https://twitter.com/mathias))

ES2019 引入了 String.prototype.trimStart() 和 String.prototype.trimEnd()：

const string = '  hello world  ';
string.trimStart();
// → 'hello world  '
string.trimEnd();
// → '  hello world'
string.trim(); // ES5
// → 'hello world'

此功能之前通过非标准的 trimLeft() 和 trimRight() 方法可以使用，这些方法作为新方法的别名保留，以确保向后兼容。

const string = '  hello world  ';
string.trimStart();
// → 'hello world  '
string.trimLeft();
// → 'hello world  '
string.trimEnd();
// → '  hello world'
string.trimRight();
// → '  hello world'
string.trim(); // ES5
// → 'hello world'

动态 `import()`

· 阅读需 5 分钟
Mathias Bynens ([@mathias](https://twitter.com/mathias))

动态 import() 引入了一种类似函数的新形式的 import，相比静态 import 解锁了新的功能。这篇文章对比了两者并概述了新功能。

`Promise.prototype.finally`

· 阅读需 2 分钟
Mathias Bynens ([@mathias](https://twitter.com/mathias))

Promise.prototype.finally 使得可以注册在 Promise 被解决（即成功或拒绝）时调用的回调函数。

想象一下，你想要获取一些数据并显示在页面上。哦，你希望请求开始时显示一个加载动画，并且在请求完成后隐藏它。当出现问题时，你会显示一条错误消息。

const fetchAndDisplay = ({ url, element }) => {
  showLoadingSpinner();
  fetch(url)
    .then((response) => response.text())
    .then((text) => {
      element.textContent = text;
      hideLoadingSpinner();
    })
    .catch((error) => {
      element.textContent = error.message;
      hideLoadingSpinner();
    });
};

对象的剩余和扩展属性

· 阅读需 2 分钟
Mathias Bynens ([@mathias](https://twitter.com/mathias))

在讨论_对象的剩余和扩展属性_之前，让我们回忆一下一个非常相似的功能。

ES2015 数组的剩余和扩展元素​

经典的 ECMAScript 2015 引入了用于数组解构赋值的_剩余元素_和数组字面量的_扩展元素_。

// 数组解构赋值的剩余元素:
const primes = [2, 3, 5, 7, 11];
const [first, second, ...rest] = primes;
console.log(first); // 2
console.log(second); // 3
console.log(rest); // [5, 7, 11]

// 数组字面量的扩展元素:
const primesCopy = [first, second, ...rest];
console.log(primesCopy); // [2, 3, 5, 7, 11]

ES2018: 对象的剩余和扩展属性 🆕​

那么有哪些新特性呢？一个提案使对象字面量也支持剩余和扩展属性。

// 对象解构赋值的剩余属性:
const person = {
    firstName: 'Sebastian',
    lastName: 'Markbåge',
    country: 'USA',
    state: 'CA',
};
const { firstName, lastName, ...rest } = person;
console.log(firstName); // Sebastian
console.log(lastName); // Markbåge
console.log(rest); // { country: 'USA', state: 'CA' }