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 相关文章推荐
FF IE兼容性的修改小结
Sep 02 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
Bootstrap CSS组件之导航条(navbar)
Dec 17 Javascript
Angular的$http与$location
Dec 26 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
微信小程序云开发实现云数据库读写权限
May 17 Javascript
解决vue admin element noCache设置无效的问题
Nov 12 Javascript
vue组件内部引入外部js文件的方法
Jan 18 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 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
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
微信access_token的获取开发示例
2015/04/16 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
js中传递特殊字符(+,&)的方法
2014/01/16 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
基于jQuery拖拽事件的封装
2020/11/29 jQuery
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
便捷提取python导入包的属性方法
2018/10/15 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
python 基于wx实现音乐播放
2020/11/24 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
2014新年元旦活动策划方案
2014/02/18 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
蓬莱阁导游词
2015/02/04 职场文书
新党员入党决心书
2015/09/22 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS
如何通过cmd 连接阿里云服务器
2022/04/18 Servers