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 相关文章推荐
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
javascript 隔行换色函数代码
Oct 24 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
微信小程序实现留言功能
Oct 31 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
js微信分享实现代码
2020/10/11 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
医药代表个人的求职信分享
2013/12/08 职场文书
教师个人自我鉴定
2014/02/08 职场文书
大学生作弊检讨书
2014/02/19 职场文书
预防煤气中毒方案
2014/06/16 职场文书
委托培训协议书
2014/11/17 职场文书
小数乘法教学反思
2016/02/22 职场文书