JS中实现简单Formatter函数示例代码


Posted in Javascript onAugust 19, 2014

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函数基本一样,只是它的遍历顺序是由右向左

Javascript 相关文章推荐
javascript innerText和innerHtml应用
Jan 28 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
js中document.write的那点事
Dec 12 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
pnpm对npm及yarn降维打击详解
Aug 05 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 #Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 #Javascript
js选择并转移导航菜单示例代码
Aug 19 #Javascript
js遍历子节点子元素附属性及方法
Aug 19 #Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 #Javascript
用循环或if语句从json中取数据示例
Aug 18 #Javascript
通过jquery 获取URL参数并进行转码
Aug 18 #Javascript
You might like
php中定时计划任务的实现原理
2013/01/08 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
php递归json类实例
2014/12/02 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
Python实现Linux下守护进程的编写方法
2014/08/22 Python
Python装饰器基础详解
2016/03/09 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
12岁生日感言
2014/01/21 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
2015高考寄语集锦
2015/02/27 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
养成教育主题班会
2015/08/13 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
节约用水广告语60条
2019/11/14 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript
Python制作春联的示例代码
2022/01/22 Python