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主提供!!!

    回覆刪除

提醒

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