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 相关文章推荐
extjs 学习笔记(一) 一些基础知识
Oct 13 Javascript
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 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
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
apache rewrite_module模块使用教程
2008/01/10 PHP
PHP 加密与解密的斗争
2009/04/17 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
jquery键盘事件使用介绍
2011/11/01 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
pytorch实现seq2seq时对loss进行mask的方式
2020/02/18 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
pandas DataFrame运算的实现
2020/06/14 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
大学活动策划书范文
2014/01/10 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
MySQL创建管理LIST分区
2022/04/13 MySQL
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python