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.ajax传递中文参数的解决方法
May 28 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
微信小程序如何使用globalData的方法
Jun 06 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 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/02 国漫
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
基于PHP读取csv文件内容的详解
2013/06/18 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
详解JS数值Number类型
2018/02/07 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python 内置函数complex详解
2016/10/23 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
transform python环境快速配置方法
2018/09/27 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
Python如何绘制日历图和热力图
2020/08/07 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
工地门卫岗位职责
2013/12/30 职场文书
支部鉴定材料
2014/06/02 职场文书
公司年底活动方案
2014/08/17 职场文书
财会专业大学生求职信
2014/09/26 职场文书
三方协议书
2015/01/27 职场文书
电影复兴之路观后感
2015/06/02 职场文书
美容院管理规章制度
2015/08/05 职场文书
《观潮》教学反思
2016/02/17 职场文书
Elasticsearch 数据类型及管理
2022/04/19 Python