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

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

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

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

2. 正則表達(dá)式

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

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

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

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

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

3. substr()方法

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

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

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

4. slice()方法

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

因此，也可以按照下圖所示的模式來寫：

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

5. substring()方法

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

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

6. split()方法

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

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

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

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

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

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