分享 5 個你現在就能用上的 Js ES12 新特性（數字分隔符、replaceAll()、Promise.any()、......）

ECMAScript 2021（第 12 版）現已可用，并附帶新功能和語法改進，ECMA International 已于 2021 年 6 月 22 日最終確定了這些規范，實施這些改進是為了使 JavaScript 更加健壯并幫助開發人員輕松完成任務，

以下詳細展示 ECMAScript 2021 提供的前 5 項功能，以便你可以開始在你的專案中使用它們，并改善你的 JavaScript 體驗，初學者和有經驗的開發人員可以從本文中受益，

ECMAScript 2021 更新提供的 5 大 JavaScript 功能：

• 數字分隔符

• String.prototype.replaceAll

• Promise.any() 和 AggregateError

• 邏輯賦值運算子

• 私有類方法和訪問器

1、數字分隔符

數字分隔符允許你在文字數字的數字之間添加下劃線，這使它們更具可讀性，當檔案被決議時，這些下劃線將被自動去除，

let n1 = 1_000_000_000;
console.log(n1);     // 1000000000

let n2 = 1_000_000_000.150_200
console.log(n2);     // 1000000000.1502

let n3 = 0x95_65_98_FA_A9
console.log(n3);     // 641654651561

let n4 = 155_326_458_156_248_168_514n
console.log(n4);     // 155326458156248168514n

2、String.prototype.replaceAll

String 原型上的 replaceAll() 函式允許替換子字串的所有實體，而無需使用正則運算式，如果在字串上使用了 thereplace()，它只會替換該值的第一個實體，

另一方面，replaceAll() 提供替換該值的所有實體的功能，

const orgStr = 'JavaScript is very cool,and JavaScript is very good';

// 使用replace替換一個"JavaScript"
let newStr = orgStr.replace('JavaScript', 'TypeScript');
console.log(newStr);     // TypeScript is very cool,and JavaScript is very good

// 使用replace替換所有"JavaScript"
let newStr1 = orgStr.replace(/JavaScript/g, 'TypeScript');
console.log(newStr1);    // TypeScript is very cool,and TypeScript is very good

// 使用replaceAll替換所有"JavaScript"
let newStr2 = orgStr.replaceAll('JavaScript', 'TypeScript');
console.log(newStr2);    // TypeScript is very cool,and TypeScript is very good

3、Promise.any() 和 AggregateError

Promise.any 與 Promise.all() 正好相反，如果任何承諾得到解決， Promise.any() 將被觸發，

另一方面， Promise.all() 將等到所有承諾都得到解決，以下是 any()、all() 和 allSettled() 的區別，

any() — 如果至少有一個承諾被解決，這將執行，如果所有承諾都被拒絕，則將拒絕，即哪個resolve快就執行哪個，

all() — 如果所有承諾都得到解決，這將執行，如果至少一個承諾被拒絕，則將拒絕，

allSettled() — 如果所有承諾都已解決或被拒絕，這將執行，

// 創建一個Promise
const promise1 = new Promise((resolve, reject) => {
    // 2秒后resolve()
    setTimeout(() => resolve("The first promise has been resolved."), 2000);
});

// 創建一個Promise
const promise2 = new Promise((resolve, reject) => {
    // 1秒后resolve()
    setTimeout(() => resolve("The second promise has been resolved."), 1000);
});

// 創建一個Promise
const promise3 = new Promise((resolve, reject) => {
    // 3秒后resolve()
    setTimeout(() => resolve("The third promise has been resolved."), 3000);
});

(async function () {
    const data = await Promise.any([promise1, promise2, promise3]);
    // promise2最短時間resolve()
    console.log(data);     // The second promise has been resolved.
})();

如果所有 Promise 都被拒絕，則會拋出 AggregateError 例外，

// 創建一個Promise
const promise1 = new Promise((resolve, reject) => {
    // 1s后reject()
    setTimeout(() => reject("The first promise has been rejected."), 1000);
});

// 創建一個Promise
const promise2 = new Promise((resolve, reject) => {
    // 0.5s后reject()
    setTimeout(() => reject("The second promise has been rejected."), 500);
});

// 處理例外
(async function () {
    try {
        const data = await Promise.any([promise1, promise2]);
        console.log(data);
    } catch (error) {
        // 如果所有的Promise都是reject()
        // 捕獲aggregate errors.
        console.log("Error: ", error);
    }
})();

4、邏輯賦值運算子

ECMAScript 2021 更新中引入了三個邏輯賦值運算子，這些提供了邏輯運算子和賦值運算式的組合，

• 邏輯 OR 賦值運算子 ||=

• 邏輯與賦值運算子 &&=

• 空合并賦值運算子 ??=

4.1、 邏輯 OR 賦值運算子

邏輯 OR 賦值運算子 ||= 接受兩個運算元，如果左運算元為假，則將右運算元分配給左運算元，

let myPlaylist = {songsCount: 0, songs:[]};
// 如果myPlaylist.songsCount不存在，或布林值為false，如false，0，null，undefined，則賦值100
myPlaylist.songsCount ||= 100;
console.log(myPlaylist);     // {songsCount: 100, songs: Array(0)}

邏輯 OR 賦值運算子短路，此運算子 ||= 等效于以下使用邏輯 OR 運算子的陳述句，

let myPlaylist = {songsCount: 0, songs:[]};
myPlaylist.songsCount || (myPlaylist.songsCount = 100);

4.2、邏輯 AND 賦值運算子

如果左運算元為真，邏輯 AND 賦值運算子 &&= 僅將右運算元分配給左運算元，

let myPlaylist = {songsCount: 10, songs:[]};
// 如果myPlaylist.songsCount存在且布林值為true（或等效true），則賦值100
myPlaylist.songsCount &&= 100;
console.log(myPlaylist);     // {songsCount: 100, songs: Array(0)}

邏輯 AND 賦值運算子也會短路，此運算子 &&= 等效于以下使用邏輯 AND 運算子的陳述句，

let myPlaylist = {songsCount: 10, songs:[]};
myPlaylist.songsCount && (myPlaylist.songsCount = 100);

4.3、空合并賦值運算子

如果左運算元為慷訓未定義，則空合并賦值運算子 ??= 僅將右運算元分配給左運算元，

let userDetails = {firstname: 'Katina', age: 24}
//如果userDetails.lastname為慷訓者未定義，則賦值'Dawson'
userDetails.lastname ??= 'Dawson';
console.log(userDetails);     // {firstname: 'Katina', age: 24, lastname: 'Dawson'}

空合并賦值運算子也會短路，此運算子 ??= 等效于以下使用空值合并運算子的陳述句，

let userDetails = {firstname: 'Katina', age: 24}
userDetails.lastname ?? (userDetails.lastname = 'Dawson');

5、私有類方法和訪問器

默認情況下，類方法和屬性是公共的，但可以使用哈希 # 前綴創建私有方法和屬性，ECMAScript 2021 更新已強制執行隱私封裝，

這些私有方法和屬性只能從類內部訪問，

// 創建一個User類
class User {
    constructor() {}
    // 私有屬性或方法用#修飾
    #generateAPIKey() {
        return "666888999";
    }
    getAPIKey() {
        // 獲取私有屬性或方法，#不能省略
        return this.#generateAPIKey();
    }
}
const user = new User();
const userAPIKey = user.getAPIKey();
console.log(userAPIKey);     // 666888999

私有訪問器是——私有的 Getter 和 Setter，Getter 允許你獲取類屬性的值，而 Setter 允許你為類屬性分配值，你可以使用哈希 # 前綴定義私有 getter，

get #newAccountPassword() {}

同樣，你可以使用哈希 # 前綴定義私有 setter，

set #generateAccountPassword(newPassword) {}

以下舉例如何使用私有 Getter 與 Setter，

// 創建一個Str類
class Str {
    // 私有屬性
    #uniqueStr;
    constructor() {}
    // 私有Setter
    set #generateUniqueStringByCustomLength(length) {
        const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        let randomStr = "";
        for (let i = 0; i < length; i++) {
            const randomNum = Math.floor(Math.random() * characters.length);
            randomStr += characters[randomNum];
        }
        this.#uniqueStr = randomStr;
    }
    // 公共Setter
    set setRandomString(length) {
        this.#generateUniqueStringByCustomLength = length;
    }

    // 私有Getter
    get #fetchUniqueString() {
        return this.#uniqueStr;
    }
    // 公共Getter
    get getRandomString() {
        return this.#fetchUniqueString;
    }
}

const str = new Str();
str.setRandomString = 10;    //呼叫公共Setter

const uniqueStr = str.getRandomString;      //呼叫公共Getter
console.log(uniqueStr); 

以上特性已可以直接使用，不妨在你專案里試試，