A-A+

JS 去空格 trim() 实战性能优化

2016年01月20日 前端设计 暂无评论 阅读 6 views 次

看到 String 对象扩展这一部分,对 trim() 这个经常被来来说的方法比较感兴趣,刚好上次有同学提出疑问,刚好可以自测一下,先来看看老道在《JavaScript 精粹》P33 写的吧,他对 String 对象扩展了一个 trim() 方法,代码如下:

  1. Function.prototype.method = function(name, func) {  
  2.     this.prototype[name] = func;  
  3.     return this;  
  4. };  
  5. String.method('trim', function() {  
  6.     return this.replace(/^s+|s+$/g, '');  
  7. });  

熟悉吧,/^s+|s+$/g,这样的正则表达式,多少框架在用呢,比如 jQuery 的 trimLeft, trimRight,代码如下:

  1. // Used for trimming whitespace  
  2. trimLeft = /^s+/,  
  3. trimRight = /s+$/,  

这是最佳实践么,但我们框架使用的不是这种方法(暂且称为半正则方法),上次在其他产品组在内部 PK 的时候,说过,为什么我们框架要用下面这样的方法来实现 trim(),而不是用上面的那种,代码如下:

  1. trim: function(){  
  2.     var str = this.str.replace(/^s+/,'');  
  3.     for(var i= str.length - 1; i >= 0; i--){  
  4.         if(/S/.test(str.charAt(i))){  
  5.             str = str.substring(0,i+1);  
  6.             break;  
  7.         }  
  8.     }  
  9.     return str;  
  10. }  

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

  1. <input id="theinput" value="     dslakfjdls     dlskafjdslaf    ldsakfjdlskaf    lsdakfjdslka   sdlkafjdlska    sdlafkjdslkajf    "/>  
  2. <script>  
  3.   Function.prototype.method = function(name, func) {  
  4.    this.prototype[name] = func;  
  5.    return this;  
  6.   };  
  7.     
  8.   String.method('trimReg', function() {  
  9.    return this.replace(/^s+|s+$/g, '');  
  10.   });  
  11.     
  12.   String.method('trimSemiReg', function() {  
  13.    var str = this.replace(/^s+/, '');  
  14.    for (var i = str.length - 1; i >= 0; i--) {  
  15.     if (/S/.test(str.charAt(i))) {  
  16.      strstr = str.substring(0, i + 1);  
  17.      break;  
  18.     }  
  19.    }  
  20.    return str;  
  21.   });  
  22.     
  23.   var r, v = document.getElementById('theinput').value;  
  24. </script>  

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

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

给我留言