快捷導(dǎo)航

JS中實(shí)現(xiàn)簡單Formatter函數(shù)示例代碼

更新時(shí)間：2014年08月19日 17:22:52 投稿：whsnow

JS沒有提供方便使用的Formatter函數(shù)，用字符拼接的方式看起來混亂難讀，下面是JS簡單實(shí)現(xiàn)版本(沒有嚴(yán)格測試)

JS原生并沒有提供方便使用的Formatter函數(shù)，用字符拼接的方式看起來混亂難讀，而且使用起來很不方便。個(gè)人感覺C#里提供的語法比較好用，如：

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

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

(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"));

關(guān)鍵的是這句：

args.reduce(execReplace,sourceStr);

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

previousValue:

在遍歷第一次進(jìn)入該回調(diào)函數(shù)時(shí)，如果指定了initivalValue將直接使用initivalValue，如果沒有指定將使用數(shù)組的第一個(gè)元素
第二次及以后的遍歷該值是前一次遍歷返回的結(jié)果
最后一次遍歷返回的結(jié)果將作為reduce函數(shù)的返回值
currentValue: 遍歷到的當(dāng)前item
index: 當(dāng)前item在數(shù)組中的下標(biāo)

array: 原始array

在execReplace中每一次執(zhí)行時(shí)使用前一次替換后的結(jié)果作為原始替換字符串，使用當(dāng)前item的index作為要被替換的內(nèi)容，依次遍歷，最終完成替換內(nèi)容。

注：reduceRight和reduce函數(shù)基本一樣，只是它的遍歷順序是由右向左

您可能感興趣的文章: