1. 數(shù)據(jù)綁定在案例中，我們經(jīng)常需要使用文本組件展示一些信息，并且有時(shí)候需要對(duì)這些信息進(jìn)行格式化處理。比如，當(dāng)我們展示手機(jī)號(hào)時(shí)，可能只想展示開(kāi)頭和結(jié)尾，而將中間四位隱藏起來(lái)。本經(jīng)驗(yàn)將講解如何對(duì)字符串進(jìn)

1. 數(shù)據(jù)綁定

在案例中，我們經(jīng)常需要使用文本組件展示一些信息，并且有時(shí)候需要對(duì)這些信息進(jìn)行格式化處理。比如，當(dāng)我們展示手機(jī)號(hào)時(shí)，可能只想展示開(kāi)頭和結(jié)尾，而將中間四位隱藏起來(lái)。本經(jīng)驗(yàn)將講解如何對(duì)字符串進(jìn)行這類格式化處理。

首先，在示例代碼中，我們創(chuàng)建了一個(gè)一維數(shù)組來(lái)存放幾個(gè)手機(jī)號(hào)碼。然后，通過(guò)循環(huán)創(chuàng)建，在for容器下的文本組件中進(jìn)行數(shù)據(jù)綁定，并在當(dāng)前數(shù)據(jù)后面添加一些函數(shù)方法。這里使用的都是JavaScript的函數(shù)方法和語(yǔ)法。（注意，要使用JS方法，需要使用數(shù)據(jù)綁定的模式）

2. 正則表達(dá)式

正則表達(dá)式是對(duì)字符串操作的一種邏輯公式，它由事先定義好的一些特定字符及其組合組成，用來(lái)表達(dá)對(duì)字符串的一種過(guò)濾邏輯。正則表達(dá)式功能強(qiáng)大，但要熟練運(yùn)用也需要很多練習(xí)。有句話說(shuō)得好，當(dāng)你要用正則表達(dá)式解決一個(gè)問(wèn)題時(shí)，你就有兩個(gè)問(wèn)題了。

在本示例中，我們簡(jiǎn)單介紹了代碼的含義。如果你對(duì)此感興趣，可以自行學(xué)習(xí)更詳細(xì)的正則表達(dá)式知識(shí)。

當(dāng)前數(shù)據(jù)1是一個(gè)字符串對(duì)象，我們使用了replace()方法。這個(gè)方法可以理解為用雙引號(hào)中內(nèi)容來(lái)替代兩個(gè)斜杠之間的內(nèi)容。其中，g表示執(zhí)行全局匹配，即查找所有匹配而非在找到第一個(gè)匹配后停止。

斜杠之間的內(nèi)容可以分為三部分：^(d{3})，d{4}，(d{4})$。^表示匹配輸入字符串開(kāi)始的位置，$表示匹配輸入字符串結(jié)尾的位置。d表示查找數(shù)字，{3}表示查找的數(shù)字位數(shù)。因此，我們將手機(jī)號(hào)分成了開(kāi)頭三位、中間四位和結(jié)尾四位三個(gè)部分。

逗號(hào)后面雙引號(hào)中的內(nèi)容，$1代表(d{3})，$2代表(d{4})。這里使用了正則表達(dá)式中的捕獲組，捕獲組會(huì)將正則表達(dá)式中子表達(dá)式匹配的內(nèi)容保存到內(nèi)存中，以供后面引用。只有加了括號(hào)的部分才能被捕獲到。通過(guò)這種方式，我們最終得到了保留開(kāi)頭三位和結(jié)尾四位，并將中間部分替換為的結(jié)果。

3. substr()方法

接下來(lái)，我們介紹一種比較簡(jiǎn)單的方法，即使用substr()方法來(lái)截取原字符串的一段子字符串。該方法只有兩個(gè)數(shù)字參數(shù)，第一個(gè)表示起始位置，第二個(gè)表示子字符串的長(zhǎng)度。

例如，在示例中的手機(jī)號(hào)"13245876647"中，我們可以這樣實(shí)現(xiàn)相同的效果：

第一部分是截取了手機(jī)號(hào)的前三位，第二部分是""字符串，第三部分是手機(jī)號(hào)的后四位。需要注意的是，如果是數(shù)據(jù)綁定的變量，不需要加雙引號(hào)；如果是自己輸入的內(nèi)容，需要加雙引號(hào)，并且必須是英文的雙引號(hào)。最后，使用加號(hào)將各部分連接起來(lái)。

4. slice()方法

同時(shí)，我們還可以使用slice()方法來(lái)進(jìn)行截取。與substr()方法不同的是，slice()方法的參數(shù)直接指定起始和終止位置。

因此，也可以按照下圖所示的模式來(lái)寫：

需要注意的是，截取的字符串包含起始位置，但不包含終止位置。所以在填寫參數(shù)時(shí)，應(yīng)該填(0, 3)。

5. substring()方法

類似于slice()方法，substring()方法也可以用來(lái)截取字符串。與slice()方法不同的是，substring()方法不接受負(fù)數(shù)作為參數(shù)，并且如果不小心將終止坐標(biāo)填得比起始坐標(biāo)還要小，方法在執(zhí)行前會(huì)自動(dòng)調(diào)換這兩個(gè)參數(shù)的順序。如果起始坐標(biāo)和終止坐標(biāo)相等，那么將返回空的字符串。

使用substring()方法實(shí)現(xiàn)示例中的效果如圖所示。同樣，需要注意的是，截取的字符串包含起始位置，但不包含終止位置。

6. split()方法

再分享一種常用的方法——split()方法。例如，數(shù)據(jù)庫(kù)中的提交時(shí)間是"2020-03-16 15:37:36"，而我們可能只希望在前臺(tái)展示年月日，省略時(shí)分秒。

這時(shí)，我們可以進(jìn)行如下的數(shù)據(jù)綁定：

.split(" ")[0]表示將原字符串按照雙引號(hào)內(nèi)的字符串進(jìn)行分割，這里是一個(gè)空格的空字符串。分割后得到兩個(gè)元素，[0]表示提取分割出來(lái)的數(shù)組的第一個(gè)元素。如果填寫[1]，則獲取的是時(shí)分秒部分。

7. 大小寫轉(zhuǎn)換

最后，補(bǔ)充一個(gè)大小寫轉(zhuǎn)換的方法。使用toLowerCase()和toUpperCase()方法非常簡(jiǎn)單，以轉(zhuǎn)換小寫為例進(jìn)行說(shuō)明。

通過(guò)數(shù)據(jù)綁定，可以將文本變量中的所有小寫英文字母轉(zhuǎn)換成大寫。