在JS中簡單實現Formatter函數

JS原生並無提供方便使用的Formatter函數,用字符拼接的方式看起來混亂難讀,並且使用起來很不方便。我的感受C#裏提供的語法比較好用,如:數組

String.Format(「Welcome to learn '{0}','{0}' is awesome,you will {1} it!","Javascript","love");

這種有順序的替換方式,比較清晰,並且在要替換同一內容時候能夠省去傳遞重複參數的狀況,下面是JS簡單實現版本(沒有嚴格測試):瀏覽器

(function(exports) {
    exports.format = function(){
        var args = Array.prototype.slice.call(arguments),
            sourceStr = args.shift();

        function execReplace(text,replacement,index){
            return text.replace(new RegExp("\\{"+index+"\\}",'g'),replacement);
        }

        return args.reduce(execReplace,sourceStr);
    }
})(window.utils = window.utils || {});

console.log(utils.format("Welcome to learn '{0}','{0}' is awesome,you will {1} it!","Javascript","love"));

關鍵的是這句:函數

args.reduce(execReplace,sourceStr);

這裏使用了Array的reduce函數,reduce和reduceRight是ES5新增長的函數,該函數的參數是reduce(callback,initialValue),callback接收4個參數分別是:測試

  1. previousValue:
    • 在遍歷第一次進入該回調函數時,若是指定了initivalValue將直接使用initivalValue,若是沒有指定將使用數組的第一個元素
    • 第二次及之後的遍歷該值是前一次遍歷返回的結果
    • 最後一次遍歷返回的結果將做爲reduce函數的返回值
  2. currentValue: 遍歷到的當前item
  3. index: 當前item在數組中的下標
  4. array: 原始array

在execReplace中每一次執行時使用前一次替換後的結果做爲原始替換字符串,使用當前item的index做爲要被替換的內容,依次遍歷,最終完成替換內容。prototype

注:reduceRight和reduce函數基本同樣,只是它的遍歷順序是由右向左code

關於兼容性:
(評論中有提到應該註明兼容性問題,這裏很是感謝 @段啓鋒 同窗的建議)
其餘瀏覽器沒必要說,從IE9開始支持reduce,forEach,map,filter等ES5新函數的orm

相關文章
相關標籤/搜索