跳至主要内容

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 模組

· 閱讀時間約 20 分鐘
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，您可以安全地存儲並操作超出數值類型安全整數範圍的大整數。本文通過一些使用案例，並將 BigInt 與 JavaScript 中的 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' }