JS trim去空格的最佳實(shí)踐
更新時(shí)間：2011年10月30日 23:31:50 作者：
學(xué)習(xí)框架的我，又來(lái)了?？吹?String 對(duì)象擴(kuò)展這一部分，對(duì) trim() 這個(gè)經(jīng)常被來(lái)來(lái)說(shuō)的方法比較感興趣
剛好上次有同學(xué)提出疑問(wèn)。剛好可以自測(cè)一下。先來(lái)看看老道在《JavaScript 精粹》P33 寫(xiě)的吧。他對(duì) String 對(duì)象擴(kuò)展了一個(gè) trim() 方法：
Function.prototype.method = function(name, func) {
this.prototype[name] = func;
return this;
};
String.method('trim', function() {
return this.replace(/^\s+|\s+$/g, '');
});
熟悉吧，/^\s+|\s+$/g，這樣的正則表達(dá)式。多少框架在用呢。比如 jQuery 的 trimLeft, trimRight：
// Used for trimming whitespace
trimLeft = /^\s+/,
trimRight = /\s+$/,
這是最佳實(shí)踐么？但我們框架使用的不是這種方法(暫且稱為半正則方法)。上次在其他產(chǎn)品組在內(nèi)部 PK 的時(shí)候，說(shuō)過(guò)，為什么我們框架要用下面這樣的方法來(lái)實(shí)現(xiàn) trim()，而不是用上面的那種。
trim: function(){
var str = this.str.replace(/^\s+/,'');
for(var i= str.length - 1; i >= 0; i--){
if(/\S/.test(str.charAt(i))){
str = str.substring(0,i+1);
break;
}
}
return str;
}
if(!String.prototype.trim){
String.prototype.trim = function(){
return this.replace(/^\s+|\s+$/g, '');
}
}
復(fù)制代碼 代碼如下:
Function.prototype.method = function(name, func) {
this.prototype[name] = func;
return this;
};
String.method('trim', function() {
return this.replace(/^\s+|\s+$/g, '');
});
熟悉吧，/^\s+|\s+$/g，這樣的正則表達(dá)式。多少框架在用呢。比如 jQuery 的 trimLeft, trimRight：
復(fù)制代碼 代碼如下:
// Used for trimming whitespace
trimLeft = /^\s+/,
trimRight = /\s+$/,
這是最佳實(shí)踐么？但我們框架使用的不是這種方法(暫且稱為半正則方法)。上次在其他產(chǎn)品組在內(nèi)部 PK 的時(shí)候，說(shuō)過(guò)，為什么我們框架要用下面這樣的方法來(lái)實(shí)現(xiàn) trim()，而不是用上面的那種。
復(fù)制代碼 代碼如下:
trim: function(){
var str = this.str.replace(/^\s+/,'');
for(var i= str.length - 1; i >= 0; i--){
if(/\S/.test(str.charAt(i))){
str = str.substring(0,i+1);
break;
}
}
return str;
}
原因工友已經(jīng)說(shuō)了，因?yàn)?STRONG>正則的反向匹配比較慢。我對(duì)其性能進(jìn)行了對(duì)比。綜合速度和寫(xiě)法上來(lái)說(shuō)，個(gè)人還是偏向于第一種寫(xiě)法。因?yàn)樗俣绕鋵?shí)相差很少很少。從代碼來(lái)說(shuō)第二種比較晦澀并且并字節(jié)很多，這對(duì)于一個(gè)流量很高但需要用 trim() 很少的網(wǎng)站來(lái)說(shuō)，第一種明顯比較合適，看看下面的測(cè)試結(jié)果(自已測(cè)試，猛擊這里)：
??？原來(lái)不是半正則的方式最快啊？是的，其實(shí)很多高級(jí)瀏覽器中已經(jīng)默認(rèn)提供 trim() 了。速度就不用說(shuō)了，100 倍？哈哈哈。最后，方案如下：
復(fù)制代碼 代碼如下:
if(!String.prototype.trim){
String.prototype.trim = function(){
return this.replace(/^\s+|\s+$/g, '');
}
}
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了webpack常用配置項(xiàng)配置文件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
javascript實(shí)現(xiàn)導(dǎo)航欄分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)導(dǎo)航欄分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
Google Suggest ;-) 基于js的動(dòng)態(tài)下拉菜單
Google Suggest ;-) 基于js的動(dòng)態(tài)下拉菜單...2006-10-10
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)多圖和單圖上傳顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
很久以前做網(wǎng)頁(yè)的時(shí)候，幾乎沒(méi)有聽(tīng)說(shuō)過(guò) getElementById 這一玩意兒。在那個(gè)ie獨(dú)占天下的年代里，做的頁(yè)面也幾乎都是ie only的。只要ie沒(méi)問(wèn)題，那就OK了2012-06-06
JavaScript分水嶺CommonJS對(duì)比ES模塊分析
這篇文章主要為大家介紹了JavaScript分水嶺CommonJS對(duì)比ES模塊分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
javascript substr和substring用法比較
在js中substring和substr都是用來(lái)截取字符串的，那么substring和substr之間的具體區(qū)別在哪里，有沒(méi)有區(qū)別呢，下面我來(lái)給各位詳細(xì)引用一些實(shí)例來(lái)介紹這些問(wèn)題2009-06-06
IE8對(duì)JS通過(guò)屬性和數(shù)組遍歷解析不一樣的地方探討
如果是非IE8瀏覽器例如（IE7、IE9、Chrome、FF，僅測(cè)試這幾種）通過(guò)屬性和數(shù)組遍歷，其結(jié)果是一樣的，但對(duì)于IE8，結(jié)果會(huì)有一點(diǎn)小小的差異，在IE8下會(huì)把原型鏈擴(kuò)展方法當(dāng)做一個(gè)屬性輸出，大家可以測(cè)試一下2013-05-05
javascript函數(shù)的四種調(diào)用模式
本文詳細(xì)介紹了javascript函數(shù)的四種調(diào)用模式。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
Layui 解決表格異步調(diào)用后臺(tái)分頁(yè)的問(wèn)題
今天小編就為大家分享一篇Layui 解決表格異步調(diào)用后臺(tái)分頁(yè)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10