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+"), "");
}

來看看實際的使用方法：

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

以上！