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 chosen动态设置值实例介绍
Aug 08 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
js仿手机页面文件下拉刷新效果
Oct 14 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 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下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
python简单实现刷新智联简历
2016/03/30 Python
Python实现基本线性数据结构
2016/08/22 Python
python与php实现分割文件代码
2017/03/06 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
python添加菜单图文讲解
2019/06/04 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
Python流程控制语句的深入讲解
2020/06/15 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
Python 列表反转显示的四种方法
2020/11/16 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
巴黎一票通:The Paris Pass
2018/02/10 全球购物
宿舍卫生检讨书
2014/01/16 职场文书
构建高效课堂实施方案
2014/03/13 职场文书
村委会贫困证明范文
2014/09/21 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
新学期感想
2015/08/10 职场文书
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang