AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JavaScript trim函数大赏

2021-09-16 205
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JavaScript trim函数

实现1

String.prototype.trim = function() {

  returnthis.replace(/^\s\s*/, '').replace(/\s\s*$/, '');

}

看起来不怎么样，动用了两次正则替换，实际速度非常惊人，主要得益于浏览器的内部优化。一个著名的例子字符串拼接，直接相加比用Array做成的StringBuffer还快。base2类库使用这种实现。

实现2

String.prototype.trim = function() {

  returnthis.replace(/^\s+/, '').replace(/\s+$/, '');

}

和实现1很相似，但稍慢一点，主要原因是它最先是假设至少存在一个空白符。Prototype.js使用这种实现，不过其名字为strip，因为Prototype的方法都是力求与Ruby同名。

实现3

String.prototype.trim = function() {

  returnthis.substring(Math.max(this.search(/\S/), 0),this.search(/\S\s*$/) + 1);

}

以截取方式取得空白部分（当然允许中间存在空白符），总共调用了四个原生方法。设计得非常巧妙，substring以两个数字作为参数。Math.max以两个数字作参数，search则返回一个数字。速度比上面两个慢一点，但比下面大多数都快。

实现4

String.prototype.trim = function() {

  returnthis.replace(/^\s+|\s+$/g, '');

}

这个可以称得上实现2的简化版，就是利用候选操作符连接两个正则。但这样做就失去了浏览器优化的机会，比不上实现3。由于看来很优雅，许多类库都使用它，如JQuery与mootools

实现5

String.prototype.trim = function() {

  varstr = this;

  str = str.match(/\S+(?:\s+\S+)*/);

  returnstr ? str[0] : '';

}

match是返回一个数组，因此原字符串符合要求的部分就成为它的元素。为了防止字符串中间的空白符被排除，我们需要动用到非捕获性分组（?:exp）。由于数组可能为空，我们在后面还要做进一步的判定。好像浏览器在处理分组上比较无力，一个字慢。所以不要迷信正则，虽然它基本上是万能的。

实现6

String.prototype.trim = function() {

  returnthis.replace(/^\s*(\S*(\s+\S+)*)\s*$/, '$1');

}

把符合要求的部分提供出来，放到一个空字符串中。不过效率很差，尤其是在IE6中。

实现7

String.prototype.trim = function() {

  returnthis.replace(/^\s*(\S*(?:\s+\S+)*)\s*$/, '$1');

}

和实现6很相似，但用了非捕获分组进行了优点，性能效之有一点点提升。

实现8

String.prototype.trim = function() {

  returnthis.replace(/^\s*((?:[\S\s]*\S)?)\s*$/, '$1');

}

沿着上面两个的思路进行改进，动用了非捕获分组与字符集合，用?顶替了*，效果非常惊人。尤其在IE6中，可以用疯狂来形容这次性能的提升，直接秒杀火狐。

实现9

String.prototype.trim = function() {

  returnthis.replace(/^\s*([\S\s]*?)\s*$/, '$1');

}

这次是用懒惰匹配顶替非捕获分组，在火狐中得到改善，IE没有上次那么疯狂。

实现10

String.prototype.trim = function() {

  varstr = this,

  whitespace = ' \n\r\t\f\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000';

  for(vari = 0,len = str.length; i < len; i++) {

    if(whitespace.indexOf(str.charAt(i)) === -1) {

      str = str.substring(i);

      break;

    }

  }

  for(i = str.length - 1; i >= 0; i--) {

    if(whitespace.indexOf(str.charAt(i)) === -1) {

      str = str.substring(0, i + 1);

      break;

    }

  }

  returnwhitespace.indexOf(str.charAt(0)) === -1 ? str : '';

}

我只想说，搞出这个的人已经不是用牛来形容，已是神一样的级别。它先是把可能的空白符全部列出来，在第一次遍历中砍掉前面的空白，第二次砍掉后面的空白。全过程只用了indexOf与substring这个专门为处理字符串而生的原生方法，没有使用到正则。速度快得惊人，估计直逼上内部的二进制实现，并且在IE与火狐（其他浏览器当然也毫无疑问）都有良好的表现。速度都是零毫秒级别的。

实现11

String.prototype.trim = function() {

  varstr = this,

  str = str.replace(/^\s+/, '');

  for(vari = str.length - 1; i >= 0; i--) {

    if(/\S/.test(str.charAt(i))) {

      str = str.substring(0, i + 1);

      break;

    }

  }

  returnstr;

}

实现10已经告诉我们普通的原生字符串截取方法是远胜于正则替换，虽然是复杂一点。但只要正则不过于复杂，我们就可以利用浏览器对正则的优化，改善程序执行效率，如实现8在IE的表现。我想通常不会有人在项目中应用实现10，因为那个whitespace 实现太长太难记了（当然如果你在打造一个类库，它绝对是首先）。实现11可谓其改进版，前面部分的空白由正则替换负责砍掉，后面用原生方法处理，效果不逊于原版，但速度都是非常逆天。

实现12

String.prototype.trim = function() {

  varstr = this,

  str = str.replace(/^\s\s*/, ''),

  ws = /\s/,

  i = str.length;

  while(ws.test(str.charAt(--i)));

  returnstr.slice(0, i + 1);

}
文章标签：
JavaScript
Ruby
前端开发
Windows
关键词：
JavaScript函数
JavaScript大赏
JavaScript trim函数
CamilleKing
目录
相关文章
进步`于辰
|
1月前
|
JavaScript 前端开发 Java
[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法，包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明，并提供了示例代码。文章强调了函数的学习应结合源码和实践，适合JavaScript初学者和进阶开发者参考。
进步`于辰
42 2
[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂
大树营养快线
|
1月前
|
前端开发 JavaScript 开发者
除了 Generator 函数，还有哪些 JavaScript 异步编程解决方案？
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作，以实现高效、可读和易于维护的代码。
大树营养快线
36 2
游客44yag4ft7nckq
|
2月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块，可在调用时执行特定任务。函数可以无参或带参，参数用于传递值并在函数内部使用。函数调用可在事件触发时进行，如用户点击按钮。JavaScript 对大小写敏感，函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
游客44yag4ft7nckq
25 1
德国都芳最好
|
2月前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性，但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现，开发者可以更好地编写和维护 JavaScript 代码，避免因不了解这些机制而导致的错误和不一致。同时，不断提高对执行上下文等相关概念的认识，将有助于提升对 JavaScript 语言的整体理解和运用能力。
德国都芳最好
22 1
杀死一只知更鸟debug
|
3月前
|
JavaScript 前端开发 安全
JavaScript函数详解
JavaScript函数的详细解析，包括函数的定义和调用方式（如一般格式、匿名函数、构造函数、自调用函数、箭头函数和严格模式）、函数参数（arguments对象、可变参数、默认参数值）、闭包的概念和应用实例。
杀死一只知更鸟debug
49 1
JavaScript函数详解
神明木佑
|
2月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
神明木佑
44 4
神明木佑
|
2月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
神明木佑
21 2
小强在此
|
2月前
|
JavaScript 前端开发 Java
【javaScript数组，函数】的基础知识点
【javaScript数组，函数】的基础知识点
小强在此
28 5
cqtianxin1
|
2月前
|
JavaScript 前端开发
Node.js 函数
10月更文挑战第5天
cqtianxin1
24 3
Li370234940
|
2月前
|
前端开发 JavaScript
探索JavaScript函数基础
探索JavaScript函数基础
Li370234940
20 3

热门文章

最新文章

  • 1
    【温故而知新-Javascript】使用Web存储
  • 2
    《JavaScript框架设计》——1.4　类型的判定
  • 3
    JavaScript右下角信息提示插件Notyf
  • 4
    javascript工厂模式和构造方法
  • 5
    Nightwatch.js – 轻松实现浏览器的自动测试
  • 6
    测试驱动javascript开发 -- 3.测试驱动开发过程（上）
  • 7
    JS的正则表达式1
  • 8
    前端 时间个性化 插件 jquery.timeago.js
  • 9
    javascript从定义到执行 你应知这些事
  • 10
    为什么 JavaScript 会在移动端中胜出？
  • 1
    JavaScript闭包允许内部函数访问并保留外部函数的变量，即使外部函数执行结束
    54
  • 2
    js设计模式-观察者模式与发布/订阅模式
    72
  • 3
    js设计模式-策略模式与代理模式的应用
    72
  • 4
    深入理解JavaScript中的闭包机制
    60
  • 5
    使用Vue.js构建交互式前端的技术探索
    88
  • 6
    使用Node.js构建实时聊天应用的技术指南
    132
  • 7
    深入理解JavaScript中的事件循环机制
    89
  • 8
    【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
    121
  • 9
    JavaScript 数组方法概览
    38
  • 10
    在JavaScript中，函数原型（Function Prototype）是一个特殊的对象
    66

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    阿里云oss存储简介和如何使用