使用ivx實現字符串格式化的經驗總結

在案例是用中常常是用到文本組件展現一些信息，而有時這些信息有須要一些格式化的處理，好比展現手機號的時候咱們可能但願如demo中這樣只展現開頭和尾號，而將中間四位隱藏起來，今天就說一下怎麼對字符串進行這類格式化的處理。

1.數據綁定
首先demo中是創建了一個一維數組存放了幾個手機號，而後以此一位數組爲數據來源進行循環建立，for容器下的文本組件進行了數據綁定，而且在當前數據1後面加入了一些函數方法。這裏使用的都是JavaScript的函數方法和語法。（要使用JS方法須要用數據綁定的模式）

2.正則表達式
正則表達式是對字符串操做的一種邏輯公式，就是用事先定義好的一些特定字符、及這些特定字符的組合，組成一個「規則字符串」，這個「規則字符串」用來表達對字符串的一種過濾邏輯。正則表達式自己功能是十分強大的，可是要想特別熟練使用也須要不少練習。有一句話是說，當你要用正則表達式解決一個問題的時候，那你如今就擁有兩個問題了。這裏只簡單介紹一下demo中的代碼含義，對此感興趣朋友能夠本身去詳細學習一下正則表達式。
當前數據1是一個字符串對象，這裏是用了replace()方法，能夠理解爲括號中「，」後面雙引號中的內容來替代兩個「/」之間的內容，g表示執行全局匹配，即查找全部匹配而非在找到第一個匹配後中止。「/」之間的內容能夠分爲三部分，^(\d{3})，\d{4}，(\d{4})$。「^」匹配輸入字符串開始的位置，「$」匹配輸入字符串結尾的位置，\d表示查找數字，{3}表示查找的數字位數。因此這裏就是把手機號分紅了開頭三位，中間四位和結尾四位三個部分。逗號後面雙引號裏面的內容，$1表明的是(\d{3})，$2表明的是(\d{4})，這裏是使用了正則表達式中的捕捉組，捕獲組就是把正則表達式中子表達式匹配的內容，保存到內存中以數字編號或顯式命名的組裏方便後面引用，只有加了括號括起來的部分才能被捕捉到（具體的捕捉組編號命名規則及引用能夠上網查閱資料）。這樣最後就完成了保留前三位和後四位這兩個部分，並把中間換成，拼接出了最終結果。

3.substr()方法
下面再說一種比較簡單的方法，就是使用substr()，就是從原字符串中截取一段子字符串。方法裏只有兩個數字參數，前面的表明起始位置，後面的是子字符串的長度。詳細描述能夠參考下圖。

例如 demo中的手機號「13245876647」，從左到右位置序號是0—12，咱們要實現demo中的效果能夠以下寫，最終效果是同樣的。第一部分是截取了手機號的前三位，第二部分是「」字符串，第三部分就是手機號的後四位。這裏要注意的是若是是數據綁定的變量是不須要加雙引號的，若是是本身輸入的內容是須要加雙引號的，並且必須是英文的雙引號，最後用加號把各部分鏈接起來就能夠了。

4.slice()方法
同時還有一種方法也能夠選擇，就是slice()方法，與substr()方法對比能夠發現區別在於substr()方法的參數指定的是起始位置和長度，而slice()方法的參數指定的直接是起始和終止位置。

因此還能夠寫成下圖模式（注意截取的字符串包含起始位置，可是不包含終止位置因此填(0,3)）

5.substring()方法
與slice()方法類似的還有一種substring()方法。與slice()方法不一樣的是雖然他的參數也是起始和終止座標，可是他是不接受負數做爲參數的，並且若是不當心將終止座標填的比起始座標還要小，那麼方法在執行前會將兩個參數調換，若是起始座標和終止座標相等，那麼就會返回空的字符串。

使用substring()方法達成demo中的效果如圖。注意同slice()方法同樣截取的字符串包含起始位置，可是不包含終止位置因此填(0,3)

6.split()方法
再分享一種比較經常使用到的方法吧，就是split()方法。好比數據庫中的提交時間是「2020-03-16 15:37:36」，咱們可能前臺展現的時候只但願展現年月日，而省去時分秒。

這時能夠進行以下數據綁定。.split(" ")[0]就是將原字符串按雙引號內的字符串進行分割，這裏就是一個空格的空字符串，分割成了兩個元素，[0]就是提取分割出來的數組元素的第一個元素，若是填寫split(" ")[1]則獲取的是時分秒。

7.大小寫轉換toLowerCase()和toUpperCase()
最後補充一個大小寫轉換的方法吧，使用也很簡單,就以轉換小寫舉一個例子啦。這樣進行數據綁定就能夠把文本變量中的全部小寫英文字母都轉換成大寫。

8.總結
對字符串的格式化處理方法是多種多樣的，你們也能夠本身探索新的辦法。ivx自己也保持了能夠和一些函數方法聯合使用的接口，並且有專門的函數組件，在一些小細節的處理上仍是很方便的。知識果真仍是越多越全面纔好呀！