JS中實現簡單Formatter函數範例程式碼

JS中實現簡單Formatter函數範例程式碼

 JS原生並沒有提供方便使用的Formatter函數，用字元拼接的方式看起來混亂難讀，而且使用起來很不方便。個人感覺C#裡提供的文法比較好用，如：

 

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

這種有順序的替換方式，比較清晰，而且在要替換同一內容時候可以省去傳遞重複參數的情況，下面是JS簡單實現版本(沒有嚴格測試):

01	(function(exports) {

02	exports.format = function(){

03	var args = Array.prototype.slice.call(arguments),

04	sourceStr = args.shift();

05

06	function execReplace(text,replacement,index){

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

08

}

09

10	return args.reduce(execReplace,sourceStr);

11

}

12	})(window.utils = window.utils || {});

13

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

關鍵的是這句：

1	args.reduce(execReplace,sourceStr);

這裡使用了Array的reduce函數,reduce和reduceRight是ES5新增加的函數，該函數的參數是reduce(callback,initialValue)，callback接收4個參數分別是：

previousValue:

在遍曆第一次進入該回呼函數時，如果指定了initivalValue將直接使用initivalValue，如果沒有指定將使用數組的第一個元素
第二次及以後的遍曆該值是前一次遍曆返回的結果
最後一次遍曆返回的結果將作為reduce函數的傳回值
currentValue: 遍曆到的當前item
index: 當前item在數組中的下標

array: 原始array

在execReplace中每一次執行時使用前一次替換後的結果作為原始替換字串，使用當前item的index作為要被替換的內容，依次遍曆，最終完成替換內容。

註：reduceRight和reduce函數基本一樣，只是它的遍曆順序是由右向左