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