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 相关文章推荐
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
关于可运行代码无法正常执行的使用说明
May 13 Javascript
让IE6支持min-width和max-width的方法
Jun 25 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
基于vue.js实现的分页
Mar 13 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
详解TypeScript的基础类型
Feb 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
javascript,php获取函数参数对象的代码
2011/02/03 PHP
php编写的简单页面跳转功能实现代码
2013/11/27 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
jQuery 名称冲突的解决方法
2011/04/08 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
Python中关键字is与==的区别简述
2014/07/31 Python
Python实战购物车项目的实现参考
2019/02/20 Python
python中必要的名词解释
2019/11/20 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
移动通信专业自荐信范文
2013/11/12 职场文书
园林资料员岗位职责
2013/12/30 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
给老师的一封感谢信
2015/01/20 职场文书
工会工作个人总结
2015/03/03 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
图解上海144收音机
2021/04/22 无线电