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 Select操作大集合
May 26 Javascript
JavaScript 保存数组到Cookie的代码
Apr 14 Javascript
javascript 闭包疑问
Dec 30 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 Javascript
理解JS事件循环
Jan 07 Javascript
JS原型与原型链的深入理解
Feb 15 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 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
全国中波电台频率表
2020/03/11 无线电
PHP中的正规表达式(二)
2006/10/09 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
自己的js工具 Event封装
2009/08/21 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
vue ssr 指南详读
2018/06/29 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
详解Python_shutil模块
2019/03/15 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
Python 字符串池化的前提
2020/07/03 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
大学生专科学习生活的自我评价
2013/12/07 职场文书
运动会解说词200字
2014/02/06 职场文书
怎么写自荐书范文
2014/02/12 职场文书
伊索寓言教学反思
2014/05/01 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
总经理任命书范本
2014/06/05 职场文书
中职生求职信
2014/07/01 职场文书
金融管理专业求职信
2014/07/10 职场文书
2014年学习部工作总结
2014/11/12 职场文书
农村党支部承诺书
2015/04/30 职场文书