JS trim去空格的最佳实践


Posted in Javascript onOctober 30, 2011

刚好上次有同学提出疑问。刚好可以自测一下。先来看看老道在《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() 很少的网站来说,第一种明显比较合适,看看下面的测试结果(自已测试,猛击这里):

JS trim去空格的最佳实践

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

if(!String.prototype.trim){ 
String.prototype.trim = function(){ 
return this.replace(/^\s+|\s+$/g, ''); 
} 
}
Javascript 相关文章推荐
js闭包实例汇总
Nov 09 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
js实现简易计算器功能
Oct 18 Javascript
js中更短的 Array 类型转换
Oct 30 #Javascript
JavaScript Array Flatten 与递归使用介绍
Oct 30 #Javascript
关于图片按比例自适应缩放的js代码
Oct 30 #Javascript
js 弹出菜单/窗口效果
Oct 30 #Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 #Javascript
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 #Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 #Javascript
You might like
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
Python运算符重载用法实例
2015/05/28 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
Linux如何为某个操作添加别名
2015/02/05 面试题
最新的大学生找工作自我评价
2013/09/29 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
2015年度女工工作总结
2015/10/22 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
基于Redission的分布式锁实战
2022/08/14 Redis
Vue router配置与使用分析讲解
2022/12/24 Vue.js