ES6 學習筆記 - 正則表達式

本文知識點主要整理自《深刻理解 ES6（Understanding ECMAScript 6）》中文版實體書的內容，部分地方會加上本身的理解，同時書中敘述比較模糊的部分參考了阮一峯老師的《ECMAScript 6 入門》與網絡上其餘大佬們的博客、問答，篇幅有限沒法一一列出，在此表示感謝。

u 修飾符

正則表達式默認是採用每一個字符按照 16 位編碼單元進行處理，爲了支持 Unicode，ES6 新增了一個 u 修飾符。

const text = '𠮷';

console.log(text.length); // 2
console.log(/^.$/.test(text)); // false
console.log(/^.$/u.test(text)); // true
複製代碼

計算碼位數量

ES6 中字符串的 length 屬性仍然返回字符串編碼單元的數量，可是能夠經過正則表達式的 u 修飾符來獲取碼位的數量。

function codePointLength(text) {
    const result = text.match(/[\s\s]/gu);
    return result ? result.length : 0;
}

console.log(codePointLength('abc')); // 3
console.log(codePointLength('𠮷bc')); // 3
複製代碼

這個方式獲取較長字符串的碼位長度時效率會比較低。推薦使用字符串迭代器。

檢測 u 修飾符

在不兼容 ES6 的 JavaScript 引擎中使用 u 修飾符會致使語法錯誤，所以建議在使用 u 修飾符以前，先對其安全性作檢測。

function hasRegExpU() {
    try {
        const patten = new ReqExp('x', 'u');
        return true;
    } catch (e) {
        return false;
    }
}
複製代碼

注意檢測的時候必定要使用正則表達式的 構造函數。

y 修飾符

y 修飾符曾經在 FireFox 上實現過，如今 ES6 將其加入了標準。

y 修飾符會影響正則表達式搜索中的 sticky 屬性（粘滯、粘連）。與 g 修飾符同樣，y 修飾符也是全局匹配，後一次匹配都從上一次匹配成功的位置以後開始。不一樣的是，g 只須要在剩餘位置中存在匹配就會返回成功，y 只有在從起點位置存在匹配才行。

const s = 'aaa_aa_a';
const r1 = /a+/g;
const r2 = /a+/y;

r1.exec(s); // ['aaa']
r2.exec(s); // ['aaa']

r1.exec(s); // ['aa']
r2.exec(s); // null，第二次執行時起點是字符 '_'，不存在匹配
複製代碼

使用 y 修飾符，同時要注意

• 只有調用 exec() 或 test() 這些正則表達式對象的方法纔會涉及 lastIndex 屬性
• 調用字符串方法，如 match() 等，不會觸發粘滯行爲

判斷 y 修飾符是否存在

可使用 sticky 屬性進行判斷，其值爲布爾值。

sticky 屬性是隻讀的，其值只由修飾符的存在性決定，沒法在代碼中修改。

檢測 y 修飾符

與 u 修飾符同樣，在使用 y 修飾符以前，最好對其安全性進行檢查。

正則表達式的複製

在 ES5 能夠經過給正則表達式的構造函數傳入一個正則表達式來進行復制，在 ES6 中新增第二個參數，能夠在複製時修改修飾符。

const r1 = /ab/i;
const r2 = new RegExp(r1, 'g');

console.log(r1.toString()); // '/ab/i'
console.log(r2.toString()); // '/ab/g'
複製代碼

若是不傳入第二個參數，則第二個的正則表達式與第一個會使用一樣的修飾符。

flags 屬性

ES6 新增了 flags 屬性，可以直接返回正則表達式的修飾符。

const re = /ab/g;

console.log(re.source); // 'ab'
console.log(re.flags); // 'g'
複製代碼

參考資料

• Understanding ES6
• ECMAScript 6 入門 - 正則表達式擴展