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，這樣的正則表達式。多少框架在用呢。比如 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，這樣的正則表達式。多少框架在用呢。比如 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)說了，因為正則的反向匹配比較慢。我對其性能進行了對比。綜合速度和寫法上來說，個人還是偏向于第一種寫法。因為速度其實相差很少很少。從代碼來說第二種比較晦澀并且并字節(jié)很多，這對于一個流量很高但需要用 trim() 很少的網(wǎng)站來說，第一種明顯比較合適，看看下面的測試結(jié)果(自已測試，猛擊這里)：
?。吭瓉聿皇前胝齽t的方式最快??？是的，其實很多高級瀏覽器中已經(jīng)默認提供 trim() 了。速度就不用說了，100 倍？哈哈哈。最后，方案如下：
復(fù)制代碼 代碼如下:
if(!String.prototype.trim){
String.prototype.trim = function(){
return this.replace(/^\s+|\s+$/g, '');
}
}
相關(guān)文章
javascript中使用正則表達式清理table樣式的代碼
本文給大家講解的是使用javascript實現(xiàn)去除多余的TABLE的樣式，主要通過結(jié)合正則表達式來實現(xiàn)，非常的簡單實用，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要介紹了利用JavaScript的Map提升性能的方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
對于創(chuàng)建表格本文提到的算法共有3種，分別是直接操作dom、借助createDocumentFragment、借助js的原生表格操作方法2013-07-07
這篇文章主要介紹了js實現(xiàn)的后臺左側(cè)管理菜單代碼,可實現(xiàn)美觀大氣的左側(cè)折疊菜單效果,涉及JavaScript基于鼠標事件動態(tài)操作頁面元素樣式變換的技巧,非常具有實用價值,需要的朋友可以參考下2015-09-09
前端常用判斷符號??，?.?，!?，!!?，||?，&&，?:用法示例
這篇文章主要給大家介紹了關(guān)于前端常用判斷符號??,?.?,!?,!!?,||?,&&,?:的相關(guān)資料,?在日常編寫中,我們會頻繁使用以下幾個符號,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03
JavaScript具有類似Lambda表達式編程能力的代碼(改進版)
在之前的一篇博文中我介紹了一種方法可以讓JavaScript具有一種近似于Lambda表達式的編程能力——但是它有一些缺點，其中妨礙它的使用的最主要的一條就是多了一層括號，讓代碼變得難以閱讀。2010-09-09
這篇文章主要介紹了js省市聯(lián)動效果完整實例代碼,涉及JavaScript數(shù)組的定義與遍歷技巧,代碼非常具有實用價值,需要的朋友可以參考下2015-12-12
一文詳解如何在項目中和平時練習(xí)中應(yīng)用es6語法
ES6是JavaScript的一個版本,因為我們前面用到的vue默認使用ES6語法開發(fā),所以我們在這一節(jié)補充ES6的知識點,下面這篇文章主要給大家介紹了關(guān)于如何在項目中和平時練習(xí)中應(yīng)用es6語法的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細介紹了基于bootstrap風(fēng)格的彈框插件，適用于確認框、提示框，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了JavaScript中return false的用法,在大多數(shù)情況下,為事件處理函數(shù)返回false,可以防止默認的事件行為,需要的朋友可以參考下2015-03-03