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 相关文章推荐
给Function做的OOP扩展
May 07 Javascript
无阻塞加载脚本分析[全]
Jan 20 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 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中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
javascript OFFICE控件测试代码
2009/12/08 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
JS解析XML实例分析
2015/01/30 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
vue源码入口文件分析(推荐)
2018/01/30 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
python获取Linux发行版名称
2019/08/30 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
面试后感谢信
2014/02/01 职场文书
模具毕业生推荐信
2014/02/15 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
党员承诺书格式范文
2015/04/28 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle