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 正则表达式相关应介绍
Nov 27 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
JavaScript动态加载重复绑定问题
Apr 01 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 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操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
vue-router单页面路由
2017/06/17 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
Python文件操作类操作实例详解
2014/07/11 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
商务英语专业自荐信
2013/10/14 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
酒店节能减排方案
2014/05/26 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python
VUE递归树形实现多级列表
2022/07/15 Vue.js