快捷導(dǎo)航

JS中with的替代方法與String中的正則方法詳解

更新時(shí)間：2016年12月23日 10:21:35 作者：小精靈兒

最近這幾天在升級(jí)自己的MVVM 框架,遇到很多小問題,所以想著就在這里統(tǒng)一解決了。文中主要介紹了關(guān)于Javascript中with的替代方法與String中的正則方法，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。

with 語(yǔ)法

在代碼中,要執(zhí)行這么一個(gè)函數(shù)

 function computeExpression(exp, scope) {
 try {
  with (scope) {
   return eval(exp);
  }
 } catch (e) {
  console.error('ERROR', e);
 }
}

要求在scope 作用域中執(zhí)行,什么意思???

比如

scope = {a:10,b:5};
exp = a*b;

要求計(jì)算結(jié)果為15,這種情況,常規(guī)情況下要使用 with語(yǔ)法。

但是：

js的解釋器需要檢查with塊中的變量是否屬于with包含的對(duì)象，這將使with語(yǔ)句執(zhí)行速度大大下降，并且導(dǎo)致js語(yǔ)句很難被優(yōu)化。

在嚴(yán)格模式中，with語(yǔ)法是被禁用的。

而我使用ES6語(yǔ)法來(lái)編寫這個(gè)庫(kù)的，默認(rèn)啟用了嚴(yán)格模式了。所以不得已，自己模擬了一個(gè)with 的語(yǔ)法。

先看代碼

function replaceWith(scopeName, exp) {
 exp = " " + exp.trim();
 let quickRegex = /([\s\+\-\*\/%&\|\^!\*~]\s*?)([a-zA-Z_$][a-zA-Z_$0-9]*?)/g;
 exp = exp.replace(quickRegex, (a, b, c) => {
  return b + scopeName + '.' + c;
 });
 return exp;
}

首先把首位的空格全部去掉，為了和后面的統(tǒng)一，在開頭加上一個(gè)空格。

第一個(gè)正則匹配出猶如"t.e==0 ? f : d"的表達(dá)式中的變量會(huì)被作為c提取出來(lái)，符號(hào)作為 b提取出來(lái)。

測(cè)試一下

現(xiàn)在已經(jīng)可以返回一個(gè)表達(dá)式了，改裝一下，讓表達(dá)式直接在里面執(zhí)行

function replaceWith(scope, exp) {
 exp = " " + exp.trim();
 let quickRegex = /([\s\+\-\*\/%&\|\^!\*~]\s*?)([a-zA-Z_$][a-zA-Z_$0-9]*?)/g;
 exp = exp.replace(quickRegex, (a, b, c) => {
  return b + 'scope.' + c;
 });
 let func = new Function("scope", "return " + exp);
 return func(scope);
}

測(cè)試一下

大功告成。

可能中間正則寫的不好，還有其他不嚴(yán)密的地方，歡迎園友補(bǔ)充。

String 原型上的正則方法

好久都沒怎么寫過(guò)大量代碼了，看到 Sring.prototype.split(//); 這個(gè)正則表達(dá)式，竟然把分割符號(hào)都給加到數(shù)組中了，很驚訝，在MDN上學(xué)了一下。順便做個(gè)整理，算是補(bǔ)充吧。

String.prototype.split(separator,[limit])

separator:指定用來(lái)分割字符串的字符（串）。separator 可以是一個(gè)字符串或正則表達(dá)式。如果忽略 separator，則返回整個(gè)字符串的數(shù)組形式。如果 separator 是一個(gè)空字符串，則 str 將會(huì)把原字符串中每個(gè)字符的數(shù)組形式返回。

limit一個(gè)整數(shù)，限定返回的分割片段數(shù)量。split 方法仍然分割每一個(gè)匹配的 separator，但是返回的數(shù)組只會(huì)截取最多 limit 個(gè)元素。

當(dāng)找到一個(gè) seperator 時(shí)，separator 會(huì)從字符串中被移除，返回存進(jìn)一個(gè)數(shù)組當(dāng)中的子字符串。如果忽略 separator 參數(shù)，則返回的數(shù)組包含一個(gè)元素，該元素是原字符串。如果 separator 是一個(gè)空字符串，則 str 將被轉(zhuǎn)換為由字符串中字符組成的一個(gè)數(shù)組。

注意：

Note: 當(dāng)字符串為空時(shí)，split 返回一個(gè)包含一個(gè)空字符串的數(shù)組，而不是一個(gè)空數(shù)組。

如果 separator 是一個(gè)正則表達(dá)式，且包含捕獲括號(hào)（capturing parentheses），則每次匹配到 separator 時(shí)，捕獲括號(hào)匹配的結(jié)果將會(huì)插入到返回的數(shù)組中。

var myString = "hello world";
var splits = myString.split(();

console.log(splits);

輸出

["hello world"]

var myString = "Hello 1 word. Sentence number 2.";
var splits = myString.split(/(\d)/);

console.log(splits);

輸出

Hello ,1, word. Sentence number ,2,.

String.prototype.replace()

這個(gè)方法開始已經(jīng)用到，就不再介紹。

String.prototype.match(Regex)

當(dāng)字符串匹配到正則表達(dá)式（regular expression）時(shí)，match() 方法會(huì)提取匹配項(xiàng)。

如果正則表達(dá)式?jīng)]有 g 標(biāo)志，返回和 RegExp.exec(str) 相同的結(jié)果。而且返回的數(shù)組擁有一個(gè)額外的 input 屬性，該屬性包含原始字符串。另外，還擁有一個(gè) index 屬性，該屬性表示匹配結(jié)果在原字符串中的索引（以0開始）。