JavaScript拆分字符串时产生空字符的解决方案


Posted in Javascript onSeptember 26, 2014

问题描述

使用JavaScript的split方法拆分字符串时出现一些空字符串"",尤其是当使用正则表达式作为分隔符的时候。

相关问题

javascript正则表达式对字符串分组时产生空字符串组?

在上面这个问题中,题主使用正则表达式对字符串进行分割时产生了多个空字符串"",代码如下:

'张sdf四上法asdf翁芬aa33网s'.split(/([\u4e00-\u9fa5]{1})/gi);

//输出["", "张", "sdf", "四", "", "上", "", "法", "asdf", "翁", "", "芬", "aa33", "网", "s"]

 那么,产生这些空字符串的原因是什么?

问题分析

在Google上搜索了一番,发现相关的结果并不多,即便有,详细解释的也不多,大概的说了一下,然后就给出了一个ECMAScript规范的链接。看来要想知道真正的原因,就只能硬着头皮看规范了。

相关标准

那么,接下来,按照国际惯例,先上ECMAScript的标准镇楼。

String.prototype.split (separator, limit)

这个章节详细介绍了split方法的执行步骤,如果感兴趣的话可以一步一步的认真看完,我在这里只把和产生空字符串相关的步骤拿出来解释一下,不当之处,欢迎大家提出。

相关步骤

摘取部分步骤:

整个过程中最主要的步骤是第13步这个循环,而这个循环主要做的事情如下:
 •定义p, q的值,每一次循环开始的时候p和q的值是相同的(该步骤在循环之外);
 •调用SplitMatch(S, q, R)这个方法对字符串进行拆分;
 •根据返回结果的不同,执行不同的分支,主要分支为分支ⅲ;
 •分支ⅲ又分成了8个小步用来将返回的结果填充到事先定义好的数组A中
 •在这个8小步中,步骤1的作用是返回原始字符串的一个子串,开始位置是p(包含在内),结束位置是q(不包含在内),注意:在这一步中会产生空字符串,我将其标记为截取字符串,方便下文引用。
 •将上一步的子串添加到数组A中
 •接下来的几步是更新相关的变量,继续下一次循环。(步骤7的作用是将正则表达式中的捕获分组保存到数组A中,和产生空字符串无关)
 
SplitMatch(S, q, R)

接下来,我们需要了解一下SplitMatch(S, q, R)这个方法做了些什么事。这个方法在split规范中的下方有提及。它主要做的事是,根据分隔符(separator)的类型进行相应的操作:
 •如果分隔符是RegExp类型的,调用RegExp的内部方法[[Match]]来对字符串进行匹配,如果匹配失败,返回failure,否则,返回一个MatchResult类型的结果。
 •如果分隔符是字符串,进行匹配判断,失败返回failure,成功返回MatchResult类型的结果。
 
MatchResult

上面的步骤中又引出了一个MatchResult类型的变量。通过查文档发现,该类型的变量有两个属性endIndex和captures,endIndex的值是字符串匹配的位置加上1,captures可以理解为一个数组,当分隔符为正则表达式时,它里面的元素是分组捕获的值;当分隔符为字符串时,它为一个空数组。

接下来

我们从上面的步骤可以看出,分割的字符串是在截取字符串这一步骤中产生的(正则表达式的分组捕获除外)。它的作用是截取指定开始(包含在内)和结束位置(不包含在内)之间的字符串,那它什么时候会返回""呢?有一种特殊情况是开始位置和结束位置的值相等,这只是猜想而已,因为该规范没有给出截取字符串的规范步骤。

都走到这里了,为什么不再往前走一步呢?

于是,我试着搜索了一些V8的源码,看看能不能找到具体的实现方法。确实找到了相关的代码,源码链接

这里摘取其中一部分:

function StringSplitJS(separator, limit) {

  ...

  ...

  //分隔符是字符串的情况

  if (!IS_REGEXP(separator)) {

    var separator_string = TO_STRING_INLINE(separator);
    if (limit === 0) return [];
    // ECMA-262 says that if separator is undefined, the result should

    // be an array of size 1 containing the entire string.

    if (IS_UNDEFINED(separator)) return [subject];
    var separator_length = separator_string.length;
    //分隔符是空字符串,直接返回了字符数组

    if (separator_length === 0) return %StringToArray(subject, limit);
    var result = %StringSplit(subject, separator_string, limit);
    return result;

  }
  if (limit === 0) return [];
  // 分隔符是正则表达式的情况,调用StringSplitOnRegExp

  return StringSplitOnRegExp(subject, separator, limit, length);

}
//此处省略若干代码

 我在代码中发现,在填充数组的时候会调用%_SubString这个方法来截取字符串,可惜的是我没有找到他的相关定义,如果有找到的同学欢迎告知。但是,我发现JavaScript中substring这个方法所对应的StringSubstring这个方法会调用%_SubString这个方法,并将其结果返回。那么如果'abc'.substring(1,1)返回"",则表明%_SubString这个方法在开始位置和结束位置相同的时候会返回"",结果大家一试便知。

那么,什么时候会出现开始位置等于结束位置(即q === p)的情况呢?我按照上面的步骤一步一步的进行分析,最终发现:
 •当原始字符串S匹配过一次分隔符之后,紧接着,字符串S的下一个位置还匹配分隔符。如:'abbbc'.split('b'),'abbbc'.split(/(b){1}/)
 •另一种情况是字符串开头的一个或几个字符匹配分隔符。如:'abc'.split('a'),'abc'.split(/ab/)
•还有一种情况是字符串结尾的一个或几个字符串匹配分隔符,与之相关的步骤是第14步。
 如:'abc'.split('c'),'abc'.split(/bc/)

此外,当使用正则表达式作为分隔符的时候,返回的结果中还有可能出现undefined。
 如:'abc'.split(/(d)*/)

回过头来再看看开头的那个例子,是不是满足上面几种情况?

题外话

这是我第一次这么仔细的看ECMAScript的标准规范,看的过程确实很痛苦,但明白之后就感觉很痛快了。也感谢题主提出的这个问题,以及追问。
 顺便提一句,正则表达式作为分隔符时,global修饰符g是会被忽略的,这也算是一次额外的收获。

Javascript 相关文章推荐
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
Vue自定义多选组件使用详解
Sep 08 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 #Javascript
前端轻量级MVC框架CanJS详解
Sep 26 #Javascript
alert出数组中的随即值代码
Sep 25 #Javascript
jquery得到iframe src属性值的方法
Sep 25 #Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 #Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 #Javascript
$("").click与onclick的区别示例介绍
Sep 25 #Javascript
You might like
php escape URL编码
2008/12/10 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
js电话号码验证方法
2015/09/28 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
webpack3之loader全解析
2017/10/26 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
Python入门篇之列表和元组
2014/10/17 Python
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
Python3数字求和的实例
2019/02/19 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
关于python中的xpath解析定位
2020/03/06 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
django使用channels实现通信的示例
2020/10/19 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
大专计算机个人求职的自我评价
2013/10/21 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
公司放假通知范文
2015/04/14 职场文书
学生病假条怎么写
2015/08/17 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python