JS trim去空格的最佳实践
更新时间：2011年10月30日 23:31:50 作者：
学习框架的我，又来了。看到 String 对象扩展这一部分，对 trim() 这个经常被来来说的方法比较感兴趣
刚好上次有同学提出疑问。刚好可以自测一下。先来看看老道在《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+$/,
这是最佳实践么？但我们框架使用的不是这种方法(暂且称为半正则方法)。上次在其他产品组在内部 PK 的时候，说过，为什么我们框架要用下面这样的方法来实现 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, '');
}
}
复制代码 代码如下:
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+$/,
这是最佳实践么？但我们框架使用的不是这种方法(暂且称为半正则方法)。上次在其他产品组在内部 PK 的时候，说过，为什么我们框架要用下面这样的方法来实现 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;
}
原因工友已经说了，因为正则的反向匹配比较慢。我对其性能进行了对比。综合速度和写法上来说，个人还是偏向于第一种写法。因为速度其实相差很少很少。从代码来说第二种比较晦涩并且并字节很多，这对于一个流量很高但需要用 trim() 很少的网站来说，第一种明显比较合适，看看下面的测试结果(自已测试，猛击这里)：
啊？原来不是半正则的方式最快啊？是的，其实很多高级浏览器中已经默认提供 trim() 了。速度就不用说了，100 倍？哈哈哈。最后，方案如下：
复制代码 代码如下:
if(!String.prototype.trim){
String.prototype.trim = function(){
return this.replace(/^\s+|\s+$/g, '');
}
}
相关文章
javascript中使用正则表达式清理table样式的代码
本文给大家讲解的是使用javascript实现去除多余的TABLE的样式，主要通过结合正则表达式来实现，非常的简单实用，有需要的小伙伴可以参考下。2015-07-07
这篇文章主要介绍了利用JavaScript的Map提升性能的方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
对于创建表格本文提到的算法共有3种，分别是直接操作dom、借助createDocumentFragment、借助js的原生表格操作方法2013-07-07
这篇文章主要介绍了js实现的后台左侧管理菜单代码,可实现美观大气的左侧折叠菜单效果,涉及JavaScript基于鼠标事件动态操作页面元素样式变换的技巧,非常具有实用价值,需要的朋友可以参考下2015-09-09
前端常用判断符号??，?. ，! ，!! ，|| ，&&，?:用法示例
这篇文章主要给大家介绍了关于前端常用判断符号??,?. ,! ,!! ,|| ,&&,?:的相关资料, 在日常编写中,我们会频繁使用以下几个符号,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
在之前的一篇博文中我介绍了一种方法可以让JavaScript具有一种近似于Lambda表达式的编程能力——但是它有一些缺点，其中妨碍它的使用的最主要的一条就是多了一层括号，让代码变得难以阅读。2010-09-09
这篇文章主要介绍了js省市联动效果完整实例代码,涉及JavaScript数组的定义与遍历技巧,代码非常具有实用价值,需要的朋友可以参考下2015-12-12
ES6是JavaScript的一个版本,因为我们前面用到的vue默认使用ES6语法开发,所以我们在这一节补充ES6的知识点,下面这篇文章主要给大家介绍了关于如何在项目中和平时练习中应用es6语法的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了基于bootstrap风格的弹框插件，适用于确认框、提示框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了JavaScript中return false的用法,在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为,需要的朋友可以参考下2015-03-03
最新评论