網頁

2011年9月10日 星期六

JavaScript – String.format


在C#中對於字串的串接處理或是字串處理時可以使用String.Format這個方法,

處理格式化的字串上會比較清楚,而且減少錯誤,

更重要的是少用 + 的串接方式,可以減少多餘物件的建立,

 

題外話:

竟然有人跟我說用String.Concat, String.Format方式處理字串連接會比直接用 + 來得慢…

而且還寫個測試給我看,但是他忽略了,多次迴圈處理字串不應當用固定的短字串做測試,

應該用隨機產生長短不一的字串來測試才看得出差異,改天來做個測試!

 

回到正題,

在JavaScript程式碼中,因為並沒有Striing.format的方法可以用,所以看到很多人都會用 + 來處裡字串的連接,

如果說短短的幾個字串連接也還無所謂,因為不會出現太大的錯誤,

但要是有一長串的字串要做連接處理的時候,就會發現到常常出現錯誤,

因為字串中太常出現 + 而且連接時要處理單引號、雙引號的,常常會有遺漏的地方。

所以就在網路上找了一下相關的function,並且截長補短做了修改,

使用上還是跟C#裡面用String.format一樣,但也另外對jQuery的string做了擴充,

讓這個function更方便且容易使用。

//可在Javascript中使用如同C#中的string.format
//使用方式 : var fullName = String.format('Hello. My name is {0} {1}.', 'FirstName', 'LastName');
String.format = function ()
{
    var s = arguments[0];
    if (s == null) return "";
    for (var i = 0; i < arguments.length - 1; i++)
    {
        var reg = getStringFormatPlaceHolderRegEx(i);
        s = s.replace(reg, (arguments[i + 1] == null ? "" : arguments[i + 1]));
    }
    return cleanStringFormatResult(s);
}
//可在Javascript中使用如同C#中的string.format (對jQuery String的擴充方法)
//使用方式 : var fullName = 'Hello. My name is {0} {1}.'.format('FirstName', 'LastName');
String.prototype.format = function ()
{
    var txt = this.toString();
    for (var i = 0; i < arguments.length; i++)
    {
        var exp = getStringFormatPlaceHolderRegEx(i);
        txt = txt.replace(exp, (arguments[i] == null ? "" : arguments[i]));
    }
    return cleanStringFormatResult(txt);
}
//讓輸入的字串可以包含{}
function getStringFormatPlaceHolderRegEx(placeHolderIndex)
{
    return new RegExp('({)?\\{' + placeHolderIndex + '\\}(?!})', 'gm')
}
//當format格式有多餘的position時,就不會將多餘的position輸出
//ex:
// var fullName = 'Hello. My name is {0} {1} {2}.'.format('firstName', 'lastName');
// 輸出的 fullName 為 'firstName lastName', 而不會是 'firstName lastName {2}'
function cleanStringFormatResult(txt)
{
    if (txt == null) return "";
    return txt.replace(getStringFormatPlaceHolderRegEx("\\d+"), "");
}

來看看實際的使用方法:

image

圖片中的test1就是用String.format的方法,而test2就是對string的擴充方法。

以上!

6 則留言:

  1. 謝謝你的分享,你提供函式挺有用處的。

    回覆刪除
  2. 太棒了..謝謝分享.

    回覆刪除
  3. 謝謝分享,找到下面討論串寫的code比較精鍊,可參考。
    javascript - Equivalent of String.format in jQuery - Stack Overflow
    http://stackoverflow.com/questions/1038746/equivalent-of-string-format-in-jquery

    回覆刪除
  4. 喔乾 這個函式超實用阿 感謝PO主提供!!!

    回覆刪除