使用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本身也保持了可以和一些函數方法聯合使用的接口,而且有專門的函數組件,在一些小細節的處理上還是很方便的。知識果然還是越多越全面纔好呀!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章