本文对比了 JavaScript 中实现 trim() 方法的两种常见方式:基于正则表达式的写法与基于循环的半正则写法。虽然早期观点认为反向匹配正则较慢,但现代浏览器已原生支持 trim(),性能差异显著。文章推荐采用条件判断结合正则替换的方案,以兼顾代码简洁性与跨浏览器兼容性。
基于正则的 trim 实现
针对此前有同学提出的疑问,这里进行自我测试与解析。首先参考《JavaScript 精粹》第 33 页的内容,作者对 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+$/, 半正则实现与性能争议
这是否就是最佳实践?实际上,我们框架并未采用这种方法(暂称为半正则方法)。此前在其他产品组的内部讨论中曾提到,为何选择下文所示的实现方式而非上述方式:
相关代码如下:
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() 的场景,第一种方案显然更合适。以下是测试结果(可自行测试,点击此处):

现代浏览器兼容性与最终方案
啊?原来不是半正则的方式最快啊?是的,其实很多高级浏览器中已经默认提供 trim() 了。速度就不用说了,100 倍?哈哈哈。最后,方案如下:
具体代码如下:
if(!String.prototype.trim){
String.prototype.trim = function(){
return this.replace(/^\s+|\s+$/g, '');
}
}