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