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获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
js调试工具Console命令详解
Oct 21 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
详解JavaScript中的执行上下文及调用堆栈
Apr 29 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和ACCESS写聊天室(三)
2006/10/09 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
VBScript版代码高亮
2006/06/26 Javascript
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
jQuery 使用手册(六)
2009/09/23 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
Python类定义和类继承详解
2015/05/08 Python
python2与python3共存问题的解决方法
2018/09/18 Python
Django 大文件下载实现过程解析
2019/08/01 Python
python多进程重复加载的解决方式
2019/12/13 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
Shell如何接收变量输入
2016/08/06 面试题
物业管理大学生个人的自我评价
2013/10/10 职场文书
个人找工作求职简历的自我评价
2013/10/20 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
MongoDB支持的索引类型
2022/04/11 MongoDB