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 相关文章推荐
jQuery 核心函数以及jQuery对象
Mar 23 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
JS async 函数的含义和用法实例总结
Apr 08 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 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/12/12 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
php和html的区别点详细总结
2019/09/24 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
Python模块学习 filecmp 文件比较
2012/08/27 Python
python根据出生日期返回年龄的方法
2015/03/26 Python
Python匹配中文的正则表达式
2016/05/11 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
浅谈Python反射 & 单例模式
2019/03/21 Python
Python中关于浮点数的冷知识
2019/09/22 Python
Python编写打字训练小程序
2019/09/26 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
机械工程师求职自我评价
2013/09/23 职场文书
求职自荐信怎么写
2014/03/06 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
政治学求职信
2014/06/03 职场文书
国贸专业求职信
2014/06/28 职场文书
设计师求职信
2014/07/01 职场文书
新店开张活动方案
2014/08/24 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
经济纠纷起诉状
2015/05/20 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android