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引起的内存泄漏问题
Oct 08 Javascript
javascript与asp.net(c#)互相调用方法
Dec 13 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
深入理解javascript变量声明
Nov 20 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
JS变量及其作用域
Mar 29 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
JS前端模块化原理与实现方法详解
Mar 17 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
用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
桌面中心(四)数据显示
2006/10/09 PHP
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
php的hash算法介绍
2014/02/13 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
html5清空画布方法(三种)
2017/10/16 HTML / CSS
个人自我鉴定怎么写
2013/10/28 职场文书
机械电子工程专业推荐信范文
2013/11/20 职场文书
创先争优活动方案
2014/02/12 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
最美家庭活动方案
2014/08/31 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
从事会计工作年限证明
2015/06/23 职场文书
Python中字符串对象语法分享
2022/02/24 Python