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 相关文章推荐
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
简单的代码实现jquery定时器
Nov 17 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
3种vue组件的书写形式
Nov 29 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
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
PHP 柱状图实现代码
2009/12/04 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
layui表格数据重载
2019/07/27 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
python打开文件并获取文件相关属性的方法
2015/04/23 Python
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
python字典的常用方法总结
2019/07/31 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
Python 如何批量更新已安装的库
2020/05/26 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
学校三八妇女节活动情况总结
2014/03/09 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
秋季运动会开幕词
2015/01/28 职场文书
同学聚会邀请函
2015/01/30 职场文书
本溪水洞导游词
2015/02/11 职场文书