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脚本代码跑起来。
Jan 09 Javascript
js宝典学习笔记(上)
Jan 10 Javascript
IE与firefox之jquery用法区别
Oct 03 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
javascript入门之数组[新手必看]
Nov 21 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
解决中英文字符串长度问题函数
2007/01/16 PHP
php 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
Python装饰器的函数式编程详解
2015/02/27 Python
深入Python解释器理解Python中的字节码
2015/04/01 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
python 操作excel表格的方法
2020/12/05 Python
北京振戎融通Java面试题
2015/09/03 面试题
大学生怎样进行自我评价
2013/12/07 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
计划生育工作汇报
2014/10/28 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
歌咏比赛主持词
2015/06/29 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android