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作为要被替换的内容,依次遍历,最终完成替换内容。

注:reduceRight和reduce函数基本一样,只是它的遍历顺序是由右向左

关于兼容性:

(评论中有提到应该注明兼容性问题,这里非常感谢 @段启锋 同学的建议)

其他浏览器不必说,从IE9开始支持reduce,forEach,map,filter等ES5新函数的

在JS中简单实现Formatter函数的更多相关文章

  1. JS中的自执行函数

    本来规划的是2013年,狠狠的将JS学习下,谁知计划赶不上变化,计划泡汤了.13年的我对JS来说可以说是属于跟风,对它的理解和认识也仅仅是皮毛而已,也是因为要完成<ArcGIS API for ...

  2. JS中的高阶函数

    JS中的高阶函数 高阶函数是指以函数作为参数的函数,并且可以将函数作为结果返回的函数. 1. 高阶函数 接受一个或多个函数作为输入 输出一个函数 至少满足以上一个条件的函数 在js的内置对象中同样存在 ...

  3. main.js中封装全局登录函数

    1. 在 main.js 中封装全局登录函数 通过 vue 对象的原型扩展,可以扩展一个函数,这样这个函数就可以在每一个界面通过类似指向对象的方式,去访问这个函数. 如下是 main.js 扩展的函数 ...

  4. js中的三种函数写法

    js中的三种函数写法 <script type="text/javascript"> //普通的声明方式 function myFun(m,n){ alert(m+n) ...

  5. JS中构造函数和普通函数有什么区别

    JS中构造函数有普通函数有什么区别? 1.一般规则 构造函数都应该以 一个大写字母开头,eg: function Person(){...} 而非构造函数则应该以一个小写字母开头,eg: functi ...

  6. asp.net类似于js中的setTimeOut()的函数作用?

    asp.net类似于js中的setTimeOut()的函数作用? 插入这行即可,定时2秒,再运行下一步: System.Threading.Thread.Sleep(); 加个随机数 Random r ...

  7. 【转载】JS中bind方法与函数柯里化

    原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...

  8. [转] JS中简单的继承与多态

    这里讲了一个最最最简单的JS中基于原型链的继承和多态. 先看一下以下这段代码的实现(A是“父类”,B是“子类”): var A = function(){ this.value = 'a'; this ...

  9. JS中的几种函数

    函数可以说是js中最具特色的地方,在这里我将分享一下有关函数的相关知识: 包装函数:        (function foo(){...})作为函数表达式意味着foo只能在...所代表的位置中被访问 ...

随机推荐

  1. Bootstrap-CL:进度条

    ylbtech-Bootstrap-CL:进度条 1.返回顶部 1. Bootstrap 进度条 本章将讲解 Bootstrap 进度条.在本教程中,您将看到如何使用 Bootstrap 创建加载.重 ...

  2. 学习笔记之C# 教程 | 菜鸟教程

    C# 教程 | 菜鸟教程 http://www.runoob.com/csharp/csharp-tutorial.html 菜鸟教程在线编辑器 http://www.runoob.com/try/r ...

  3. Centos6.5安装phpldapadmin

    phpLDAPadmin是一个基于Web的LDAP管理工具用于管理LDAP服务器的各个方面.你可以利用它浏览LDAP Tree,创建/删除/修改和复制节点(entry) ,执行搜索,导入/导出LDIF ...

  4. Float IP设置

    浮动IP: 在做双机的时候,设定的一个IP,通过访问这个IP,具体到后台哪台机器,由系统指定. 浮动IP是随资源一起走的. 就是由软件根据具体情况把该IP设置在某一台机器上,对外提供服务 为了避免因为 ...

  5. 九jQuery源码解析之.each()

    jQuery中存在两个each方法都是用于遍历的, 一个是对jQuery对象集合使用.each(),用于遍历这个集合; .each(function(index,element)) 还有一个是扩展jQ ...

  6. js 按字段分组

    var data = [{"id":"32b80b76-a81e-4545-8065-1e7c57180801","userId":&quo ...

  7. solr统计只返回10或者100个数据的解决办法

    因为我所在的公司为政府做的项目[风险管理系统],其中涉及大量的统计展示,多数以整个市的区划,行业部门等方式返回,在昨天,我发现听过填报单位的方式返回时,始终只有100个数据.通过对比发现,在前辈的代码 ...

  8. spring data jpa、 hibernate、 jpa 三者之间的关系

    http://www.cnblogs.com/xiaoheike/p/5150553.html JPA规范与ORM框架之间的关系是怎样的呢? JPA规范本质上就是一种ORM规范,注意不是ORM框架-- ...

  9. 跟我学算法-xgboost(集成算法)基本原理推导

    1.构造损失函数的目标函数 2.对目标函数进行泰勒展开 3.把样本遍历转换成叶子节点遍历,合并正则化惩罚项 4.求wj进行求导,使得当目标函数等于0时的wj的值 5.将求解得到的wj反导入方程中,解得 ...

  10. 跟我学算法- tensorflow模型的保存与读取 tf.train.Saver()

    save =  tf.train.Saver() 通过save. save() 实现数据的加载 通过save.restore() 实现数据的导出 第一步: 数据的载入 import tensorflo ...