在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

相关文章
相关标签/搜索