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中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
Javascript函数的参数
Jul 16 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 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 简单数组排序实现代码
2009/08/05 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
JS 显示当前日期与时间的代码
2010/03/24 Javascript
jquery中对表单的基本操作代码
2010/07/29 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
jQuery设计思想
2017/03/07 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
浅谈Python 中整型对象的存储问题
2016/05/16 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
管理学专业个人求职信范文
2013/09/21 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
五一劳动节慰问信
2015/02/14 职场文书
2015年司法所工作总结
2015/04/27 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
女性励志书籍推荐
2019/08/19 职场文书
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技