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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
限制只能输入数字的实现代码
May 16 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
深入浅出理解JavaScript高级定时器原理与用法
Aug 02 Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
JS实现滑动导航效果
Jan 14 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
js实现九宫格布局效果
May 28 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 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
PHP 面向对象实现代码
2009/11/11 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
javascript时间函数大全
2014/06/30 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
详解Python中的strftime()方法的使用
2015/05/22 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
python批量获取html内body内容的实例
2019/01/02 Python
python使用thrift教程的方法示例
2019/03/21 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
python中PyQuery库用法分享
2021/01/15 Python
校园文化建设方案
2014/02/03 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
springboot中的pom文件 project报错问题
2022/01/18 Java/Android