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;
}

原因工友已经说了,因为正则的反向匹配比较慢。我对其性能进行了对比。综合速度和写法上来说,个人还是偏向于第一种写法。因为速度其实相差很少很少。从代码来说第二种比较晦涩并且并字节很多,这对于一个流量很高但需要用 trim() 很少的网站来说,第一种明显比较合适,看看下面的测试结果(自已测试,猛击这里):

trim

啊?原来不是半正则的方式最快啊?是的,其实很多高级浏览器中已经默认提供 trim() 了。速度就不用说了,100 倍?哈哈哈。最后,方案如下:

复制代码 代码如下:

if(!String.prototype.trim){
String.prototype.trim = function(){
return this.replace(/^\s+|\s+$/g, '');
}
}

相关文章

  • webpack常用配置项配置文件介绍

    webpack常用配置项配置文件介绍

    这篇文章主要为大家详细介绍了webpack常用配置项配置文件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • javascript实现导航栏分页效果

    javascript实现导航栏分页效果

    这篇文章主要为大家详细介绍了javascript实现导航栏分页效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • Google Suggest ;-) 基于js的动态下拉菜单

    Google Suggest ;-) 基于js的动态下拉菜单

    Google Suggest ;-) 基于js的动态下拉菜单...
    2006-10-10
  • js实现多图和单图上传显示

    js实现多图和单图上传显示

    这篇文章主要为大家详细介绍了js实现多图和单图上传显示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • 一行代码告别document.getElementById

    一行代码告别document.getElementById

    很久以前做网页的时候,几乎没有听说过 getElementById 这一玩意儿。在那个ie独占天下的年代里,做的页面也几乎都是ie only的。只要ie没问题,那就OK了
    2012-06-06
  • JavaScript分水岭CommonJS对比ES模块分析

    JavaScript分水岭CommonJS对比ES模块分析

    这篇文章主要为大家介绍了JavaScript分水岭CommonJS对比ES模块分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • javascript substr和substring用法比较

    javascript substr和substring用法比较

    在js中substring和substr都是用来截取字符串的,那么substring和substr之间的具体区别在哪里,有没有区别呢,下面我来给各位详细引用一些实例来介绍这些问题
    2009-06-06
  • IE8对JS通过属性和数组遍历解析不一样的地方探讨

    IE8对JS通过属性和数组遍历解析不一样的地方探讨

    如果是非IE8浏览器例如(IE7、IE9、Chrome、FF,仅测试这几种)通过属性和数组遍历,其结果是一样的,但对于IE8,结果会有一点小小的差异,在IE8下会把原型链扩展方法当做一个属性输出,大家可以测试一下
    2013-05-05
  • javascript函数的四种调用模式

    javascript函数的四种调用模式

    本文详细介绍了javascript函数的四种调用模式。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • Layui 解决表格异步调用后台分页的问题

    Layui 解决表格异步调用后台分页的问题

    今天小编就为大家分享一篇Layui 解决表格异步调用后台分页的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10

最新评论