JavaScript拆分字符串時(shí)產(chǎn)生空字符怎么解決
來(lái)源:易賢網(wǎng) 閱讀:709 次 日期:2014-10-15 15:21:11
溫馨提示:易賢網(wǎng)小編為您整理了“JavaScript拆分字符串時(shí)產(chǎn)生空字符怎么解決”,方便廣大網(wǎng)友查閱!

一、問(wèn)題描述

使用JavaScript的split方法拆分字符串時(shí)出現(xiàn)一些空字符串"",尤其是當(dāng)使用正則表達(dá)式作為分隔符的時(shí)候。

二、相關(guān)問(wèn)題

javascript正則表達(dá)式對(duì)字符串分組時(shí)產(chǎn)生空字符串組?

在上面這個(gè)問(wèn)題中,題主使用正則表達(dá)式對(duì)字符串進(jìn)行分割時(shí)產(chǎn)生了多個(gè)空字符串"",代碼如下:

代碼如下:

'張sdf四上法asdf翁芬aa33網(wǎng)s'.split(/([u4e00-u9fa5]{1})/gi);

//輸出["", "張", "sdf", "四", "", "上", "", "法", "asdf", "翁", "", "芬", "aa33", "網(wǎng)", "s"]

那么,產(chǎn)生這些空字符串的原因是什么?

三、問(wèn)題分析

在Google上搜索了一番,發(fā)現(xiàn)相關(guān)的結(jié)果并不多,即便有,詳細(xì)解釋的也不多,大概的說(shuō)了一下,然后就給出了一個(gè)ECMAScript規(guī)范的鏈接??磥?lái)要想知道真正的原因,就只能硬著頭皮看規(guī)范了。

四、相關(guān)標(biāo)準(zhǔn)

那么,接下來(lái),按照國(guó)際慣例,先上ECMAScript的標(biāo)準(zhǔn)鎮(zhèn)樓。

代碼如下:

String.prototype.split (separator, limit)

這個(gè)章節(jié)詳細(xì)介紹了split方法的執(zhí)行步驟,如果感興趣的話可以一步一步的認(rèn)真看完,我在這里只把和產(chǎn)生空字符串相關(guān)的步驟拿出來(lái)解釋一下,不當(dāng)之處,歡迎大家提出。

五、相關(guān)步驟

摘取部分步驟:

整個(gè)過(guò)程中最主要的步驟是第13步這個(gè)循環(huán),而這個(gè)循環(huán)主要做的事情如下:

定義p, q的值,每一次循環(huán)開(kāi)始的時(shí)候p和q的值是相同的(該步驟在循環(huán)之外);

調(diào)用SplitMatch(S, q, R)這個(gè)方法對(duì)字符串進(jìn)行拆分;

根據(jù)返回結(jié)果的不同,執(zhí)行不同的分支,主要分支為分支ⅲ;

分支ⅲ又分成了8個(gè)小步用來(lái)將返回的結(jié)果填充到事先定義好的數(shù)組A中

在這個(gè)8小步中,步驟1的作用是返回原始字符串的一個(gè)子串,開(kāi)始位置是p(包含在內(nèi)),結(jié)束位置是q(不包含在內(nèi)),注意:在這一步中會(huì)產(chǎn)生空字符串,我將其標(biāo)記為截取字符串,方便下文引用。

將上一步的子串添加到數(shù)組A中

接下來(lái)的幾步是更新相關(guān)的變量,繼續(xù)下一次循環(huán)。(步驟7的作用是將正則表達(dá)式中的捕獲分組保存到數(shù)組A中,和產(chǎn)生空字符串無(wú)關(guān))

SplitMatch(S, q, R)

接下來(lái),我們需要了解一下SplitMatch(S, q, R)這個(gè)方法做了些什么事。這個(gè)方法在split規(guī)范中的下方有提及。它主要做的事是,根據(jù)分隔符(separator)的類型進(jìn)行相應(yīng)的操作:

如果分隔符是RegExp類型的,調(diào)用RegExp的內(nèi)部方法[[Match]]來(lái)對(duì)字符串進(jìn)行匹配,如果匹配失敗,返回failure,否則,返回一個(gè)MatchResult類型的結(jié)果。

如果分隔符是字符串,進(jìn)行匹配判斷,失敗返回failure,成功返回MatchResult類型的結(jié)果。

MatchResult

上面的步驟中又引出了一個(gè)MatchResult類型的變量。通過(guò)查文檔發(fā)現(xiàn),該類型的變量有兩個(gè)屬性endIndex和captures,endIndex的值是字符串匹配的位置加上1,captures可以理解為一個(gè)數(shù)組,當(dāng)分隔符為正則表達(dá)式時(shí),它里面的元素是分組捕獲的值;當(dāng)分隔符為字符串時(shí),它為一個(gè)空數(shù)組。

接下來(lái)

我們從上面的步驟可以看出,分割的字符串是在截取字符串這一步驟中產(chǎn)生的(正則表達(dá)式的分組捕獲除外)。它的作用是截取指定開(kāi)始(包含在內(nèi))和結(jié)束位置(不包含在內(nèi))之間的字符串,那它什么時(shí)候會(huì)返回""呢?有一種特殊情況是開(kāi)始位置和結(jié)束位置的值相等,這只是猜想而已,因?yàn)樵撘?guī)范沒(méi)有給出截取字符串的規(guī)范步驟。

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

于是,我試著搜索了一些V8的源碼,看看能不能找到具體的實(shí)現(xiàn)方法。確實(shí)找到了相關(guān)的代碼,源碼鏈接

這里摘取其中一部分:

代碼如下:

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;

//分隔符是空字符串,直接返回了字符數(shù)組

if (separator_length === 0) return %StringToArray(subject, limit);

var result = %StringSplit(subject, separator_string, limit);

return result;

}

if (limit === 0) return [];

// 分隔符是正則表達(dá)式的情況,調(diào)用StringSplitOnRegExp

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

}

//此處省略若干代碼

我在代碼中發(fā)現(xiàn),在填充數(shù)組的時(shí)候會(huì)調(diào)用%_SubString這個(gè)方法來(lái)截取字符串,可惜的是我沒(méi)有找到他的相關(guān)定義,如果有找到的同學(xué)歡迎告知。但是,我發(fā)現(xiàn)JavaScript中substring這個(gè)方法所對(duì)應(yīng)的StringSubstring這個(gè)方法會(huì)調(diào)用%_SubString這個(gè)方法,并將其結(jié)果返回。那么如果'abc'.substring(1,1)返回"",則表明%_SubString這個(gè)方法在開(kāi)始位置和結(jié)束位置相同的時(shí)候會(huì)返回"",結(jié)果大家一試便知。

那么,什么時(shí)候會(huì)出現(xiàn)開(kāi)始位置等于結(jié)束位置(即q === p)的情況呢?我按照上面的步驟一步一步的進(jìn)行分析,最終發(fā)現(xiàn):

當(dāng)原始字符串S匹配過(guò)一次分隔符之后,緊接著,字符串S的下一個(gè)位置還匹配分隔符。如:'abbbc'.split('b'),'abbbc'.split(/(b){1}/)

另一種情況是字符串開(kāi)頭的一個(gè)或幾個(gè)字符匹配分隔符。如:'abc'.split('a'),'abc'.split(/ab/)

還有一種情況是字符串結(jié)尾的一個(gè)或幾個(gè)字符串匹配分隔符,與之相關(guān)的步驟是第14步。

如:'abc'.split('c'),'abc'.split(/bc/)

此外,當(dāng)使用正則表達(dá)式作為分隔符的時(shí)候,返回的結(jié)果中還有可能出現(xiàn)undefined。

如:'abc'.split(/(d)*/)

回過(guò)頭來(lái)再看看開(kāi)頭的那個(gè)例子,是不是滿足上面幾種情況?

六、題外話

這是我第一次這么仔細(xì)的看ECMAScript的標(biāo)準(zhǔn)規(guī)范,看的過(guò)程確實(shí)很痛苦,但明白之后就感覺(jué)很痛快了。也感謝題主提出的這個(gè)問(wèn)題,以及追問(wèn)。

順便提一句,正則表達(dá)式作為分隔符時(shí),global修飾符g是會(huì)被忽略的,這也算是一次額外的收獲。

更多信息請(qǐng)查看IT技術(shù)專欄

更多信息請(qǐng)查看腳本欄目
易賢網(wǎng)手機(jī)網(wǎng)站地址:JavaScript拆分字符串時(shí)產(chǎn)生空字符怎么解決
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門(mén)公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國(guó)考·省考課程試聽(tīng)報(bào)名

  • 報(bào)班類型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢 | 簡(jiǎn)要咨詢須知 | 加入群交流 | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號(hào):hfpxwx
咨詢QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)