在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个参数分别是:
- previousValue:
- 在遍历第一次进入该回调函数时,如果指定了initivalValue将直接使用initivalValue,如果没有指定将使用数组的第一个元素
- 第二次及以后的遍历该值是前一次遍历返回的结果
- 最后一次遍历返回的结果将作为reduce函数的返回值
- currentValue: 遍历到的当前item
- index: 当前item在数组中的下标
- array: 原始array
在execReplace中每一次执行时使用前一次替换后的结果作为原始替换字符串,使用当前item的index作为要被替换的内容,依次遍历,最终完成替换内容。
注:reduceRight和reduce函数基本一样,只是它的遍历顺序是由右向左
关于兼容性:
(评论中有提到应该注明兼容性问题,这里非常感谢 @段启锋 同学的建议)
其他浏览器不必说,从IE9开始支持reduce,forEach,map,filter等ES5新函数的
在JS中简单实现Formatter函数的更多相关文章
- JS中的自执行函数
本来规划的是2013年,狠狠的将JS学习下,谁知计划赶不上变化,计划泡汤了.13年的我对JS来说可以说是属于跟风,对它的理解和认识也仅仅是皮毛而已,也是因为要完成<ArcGIS API for ...
- JS中的高阶函数
JS中的高阶函数 高阶函数是指以函数作为参数的函数,并且可以将函数作为结果返回的函数. 1. 高阶函数 接受一个或多个函数作为输入 输出一个函数 至少满足以上一个条件的函数 在js的内置对象中同样存在 ...
- main.js中封装全局登录函数
1. 在 main.js 中封装全局登录函数 通过 vue 对象的原型扩展,可以扩展一个函数,这样这个函数就可以在每一个界面通过类似指向对象的方式,去访问这个函数. 如下是 main.js 扩展的函数 ...
- js中的三种函数写法
js中的三种函数写法 <script type="text/javascript"> //普通的声明方式 function myFun(m,n){ alert(m+n) ...
- JS中构造函数和普通函数有什么区别
JS中构造函数有普通函数有什么区别? 1.一般规则 构造函数都应该以 一个大写字母开头,eg: function Person(){...} 而非构造函数则应该以一个小写字母开头,eg: functi ...
- asp.net类似于js中的setTimeOut()的函数作用?
asp.net类似于js中的setTimeOut()的函数作用? 插入这行即可,定时2秒,再运行下一步: System.Threading.Thread.Sleep(); 加个随机数 Random r ...
- 【转载】JS中bind方法与函数柯里化
原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...
- [转] JS中简单的继承与多态
这里讲了一个最最最简单的JS中基于原型链的继承和多态. 先看一下以下这段代码的实现(A是“父类”,B是“子类”): var A = function(){ this.value = 'a'; this ...
- JS中的几种函数
函数可以说是js中最具特色的地方,在这里我将分享一下有关函数的相关知识: 包装函数: (function foo(){...})作为函数表达式意味着foo只能在...所代表的位置中被访问 ...
随机推荐
- 关于AOP无法切入同类调用方法的问题
一.前言 Spring AOP在使用过程中需要注意一些问题,也就是平时我们说的陷阱,这些陷阱的出现是由于Spring AOP的实现方式造成的.每一样技术都或多或少有它的局限性,很难称得上完美,只要掌握 ...
- java工具库
Guava: commons:---工具库(尤其里面的排序库) joda-time:
- django rest_framework 框架的使用02
rest_framework 访问频率的限制(节流) 对于用户访问频率的显示,rest_framework 也有自己的类进行约束 先来一个自己的基于它的类的节流类的限制 class VisitCont ...
- Raspberry Pi 安装FTP(Pure-FTP)
Raspbian版本: 安装: 因为使用的是默认的pi用户,所以下面的命令都带着sudo. 安装Pure-FTP sudo apt-get install pure-ftpd 2. 创建用户组ftpg ...
- 基于sersync海量文件实时同步
项目需求:最近涉及到数百万张图片从本地存储迁移到云存储,为了使完成图片迁移,并保证图片无缺失,业务不中断,决定采用实时同步,同步完后再做流量切换.在实时同步方案中进行了几种尝试. 方案1:rsync+ ...
- (翻译)React Container Components
原文:Container Components Container Components 在 React 模式上对我的代码有最深远影响的一个模式叫 container component 模式. 在 ...
- web.xml中配置spring.xml的三种方式
我们知道spring在web.xml中可以有三种方式来配置其xml路径:org.springframework.web.servlet.DispatcherServletorg.springframe ...
- 几组不错的X264自定义编码<转>
转帖地址:http://tieba.baidu.com/p/4201033507 一般直播时使用A设定即可.你尝试设置并找出你最满意的设定 A为最需最低CPU资源,E为最高. A8x8dct=1 aq ...
- pac (PAC(Proxy Auto Config) 是一个 Script;经由编写这个 Script,我们可以让系统判断在怎么样的情形下,要利用哪一台 Proxy 来进行联机。)
PAC自动代理文件格式,教你如何写PAC文件 PAC文件格式 PAC文件是纯文本格式的,实际上就是JavaScript文件.Chrome/Chromium的扩展Switchy!的"Auto ...
- .net core 下的一个docker hello world
接触 docker 有段时间了,发现docker这个东西,真是越用越爽. 那就从零开始跑一个 docker simple . 方法一: 步骤一: dotnet new mvc --name myweb ...