2011年9月30日 星期五

JavaScript 擴充String的屬性:startsWith, endsWith, contains


在前端使用JavaScript ( jQuery ) 時,有時候在某些操作上不是那麼方便,

畢竟後端C#程式寫久了,而且也很習慣Visual Studio的智能顯示(IntelliSense),

雖然說在VS2008後一直到目前的VS2010對於JavaScript( jQuery ) 的支援越來越好,也可以使用智能顯示,

但還是有些基本的方法還是要手動去寫程式擴充,

所以這邊就整理了三個有關在JavaScript對於String的屬性的擴充:

startsWith

endsWith

contains


程式內容:

 
//判斷字串開頭是否為指定的字
//回傳: bool
String.prototype.startsWith = function(prefix)
{
    return (this.substr(0, prefix.length) === prefix);
}
 
//判斷字串結尾是否為指定的字
//回傳: bool
String.prototype.endsWith = function(suffix)
{
    return (this.substr(this.length - suffix.length) === suffix);
}
 
//判斷字串是否包含指定的字
//回傳: bool
String.prototype.contains = function(txt)
{
    return (this.indexOf(txt) >= 0);
}

把這三個字串的擴充增加到你正在使用的Common.js檔案中或是其他檔案,然後頁面上在引用檔案之後就可以使用了。

例如,我把這這三個擴充給另存到「String.Extends.js」裡,然後在一個ascx檔案中去做引用,這個ascx檔案的使用則是在MasterPage中,

如此一來只要有使用這個MasterPage的頁面就可以使用這三個字串屬性的擴充。

image

image

 

在編輯的頁面上,如果要編輯JavaScript程式時,必須要做個「偽」引用處理,這是為了要在設計階段可以在coding顯示IntelliSense,

加入JS檔案引用後,請記得要重新整理JScript IntelliSense,直接按下快速鍵:

Ctrl + Shift + J

按下後,請注意Visual Studio的左下角,會出現「正在更新 JScript IntelliSense …」,更新完之後就可以進行編輯了,

如下圖所示,對字串「test」進行操作時,就會出現IntelliSense,而且也出現了我們所擴充的屬性。

image

 

我們使用Firefox + FireBug  來做測試:

要做測試的程式:

var result_1A = 'some_text_for_test'.startsWith('some');  //應回傳true
var result_1B = 'some_text_for_test'.startsWith('error'); //應回傳false
 
var result_2A = 'some_text_for_test'.endsWith('test');    //應回傳true
var result_2B = 'some_text_for_test'.endsWith('error');   //應回傳false
 
var result_3A = 'some_text_for_test'.contains('for');     //應回傳true
var result_3B = 'some_text_for_test'.contains('error');   //應回傳false

執行結果:

image

 

jsFiddle 線上測試

 

以上

沒有留言:

張貼留言

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。