[Javascript]Javascript計算中英文長度
在Unicode流行前，老舊的系統有許多都是將資料型態開程char、varchar等等非unicode的schema，而這樣的資料型態在現今的系統上就出現了幾個為人所詬病的問題：
1.亂碼的問題
2.不同的編碼有不同的長度(數值、英文可能是1，中文是2...)
而亂碼的問題今天不談，今天主要著重在不同編碼有不同的長度的問題，我們先看看以下的Table schema，我新增了一個簡單的資料表，叫做Length，其中只有一個欄位A，型態是char(10)，
我先執行以下的SQL指令，資料可以被正常的insert進資料庫中，
但如果我再多一個數字，執行時就會出現二進位資料被截斷的錯誤，
若我把insert的條件改成六個中文字，我們會發現相同的錯誤，
但若我們改成五個字就沒有問題了，這是因為對char的資料型態來說，繁體中文字的長度是2，應文與數字是1
若今天我將Table的schema改成nchar(10)，
再次insert六個中文字，發現資料可以正確的被insert進資料庫中，這是因為unicode欄位對每個字的長度都是認定為1，不管我們輸入的是中文還是英文數字，最多都只能輸入10個字。
以上是大概帶一下，回到正題，到底非unicode帶給我們什麼樣的困擾？
我想大家都有這樣的經驗，我們看一下下面這個網頁的設計，他非常的單純，只有一個TextBox跟一個Button而已，
我們看一下這個TextBox的屬性，我們特別注意到MaxLength這個屬性是8：
所以當我們操作此畫面時，Text1最多讓我們輸入8個字，如下圖：
乍看之下沒有問題，非常的好，但當我再測一下中文，卻發現中文也可以輸入八個字…
大家看到問題了嗎？搭配char的資料型態，如果使用者輸入的是英文、數值就沒有問題，但如果使用者輸入的是中文，insert資料時勢必會出現二進位資料被截斷的錯誤，TextBox本身沒有那麼聰明幫我們判斷我們的Table schema是否為unicode，對它來說它只負責呈現使用者輸入的資料，fine…
所以這樣的問題最後就落到程式段來解決了，猶記得當初開發人員們想了幾個解決方案：
1.由後端程式處理，如果DB丟回二進位被截斷的錯誤代碼，則直接alert訊息告知使用者哪個欄位輸入過長，應該只能有多長
2.由前端控制，幫每個欄位註冊keydown事件，只要達到該長度就不允許再輸入
3.由前端控制，幫每個欄位註冊onblur事件，離開時檢查長度是否過長，如果過長就focus回原欄位
以上三個方案，最後選擇了方案3.，離開時檢查目前欄位值的長度，但javascript如何去檢查欄位值的長度，使用者輸入的資料有中文也有英文，也有全型字與半型字，如何判斷長度才妥當？最後透過以下的funciton來計算長度：
function countLength(stringToCount) 2
{ 
3
//計算有幾個全型字、中文字... 4
var c = stringToCount.match(/[^ -~]/g); 5
return stringToCount.length + (c ? c.length : 0); 6
}測試結果如下：
全都是數字，
全都是中文，
全都是全型字，
中英交雜，
原則上都沒有問題，regular expression真的還蠻不錯用的，應該要好好練習一下。
 |
游舒帆 (gipi) 探索原力Co-founder，曾任TutorABC協理與鼎新電腦總監，並曾獲選兩屆微軟最有價值專家 ( MVP )，離開職場後創辦探索原力，致力於協助青少年培養面對未來的能力。認為教育與組織育才其實息息相關，都是在為未來儲備能量，2018年起成立為期一年的專題課程《職涯躍升的關鍵24堂課》，為培養台灣未來的領袖而努力。 |
