萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 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函數基本一樣,只是它的遍歷順序是由右向左

copyright © 萬盛學電腦網 all rights reserved