IT工程師數位筆記本

提取字符串中的表達式

var BINDING_RE = /\{\{(.+?)\}\}/;
function parse(text) {
    // 找不到返回null
    if (!BINDING_RE.test(text)) return null
    var m, i, tokens = []
    while (m = text.match(BINDING_RE)) {
        i = m.index
        /* 
            這句話很重要，它會將不在{{}}之前的值也加入到tokens中，比如下面這段代碼:
            <div> 總共消費 {{102 + 2}} 元</div>
            很顯然其中的` 總共消費 `和` 元`也是需要的，雖然它們不需要計算，主要原因還是因為vue是通過textContent直接將dom中的內容替換。
        */
        if (i > 0) tokens.push(text.slice(0, i))
        /*
            將找到的值去首尾空格后賦給key
         */
        tokens.push({ key: m[1].trim() })
        /*
            將text移到下一處，如:
            <div>{{1 + 2}}{{2 + 3}}</div>
            提取完{{1 + 2}}接著提取{{2 + 3}}
         */
        text = text.slice(i + m[0].length)
    }
    // 這句話是為了防止表達式后面還有內容，所以我們需要將表達式后面的內容再提取出來。
    if (text.length) tokens.push(text)
    return tokens
}