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拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
javascript学习笔记(四) Number 数字类型
Jun 19 Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
js文件包含的几种方式介绍
Sep 28 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
ES6的新特性概览
Mar 10 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
Javascript三种字符串连接方式及性能比较
May 28 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 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
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
Prototype Hash对象 学习
2009/07/19 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
python+Django+apache的配置方法详解
2016/06/01 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
python破解zip加密文件的方法
2018/05/31 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
Python中base64与xml取值结合问题
2019/12/22 Python
python扫描线填充算法详解
2020/02/19 Python
python3中数组逆序输出方法
2020/12/01 Python
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
旅游管理毕业生自荐信
2013/11/05 职场文书
测绘工程专业个人自我评价
2013/12/01 职场文书
美德好少年主要事迹
2014/01/29 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
2014最新实习证明模板
2014/10/02 职场文书
2022年四月新番
2022/03/15 日漫