JS中实现简单Formatter函数示例代码

 更新时间:2014年08月19日 17:22:52   投稿:whsnow  
JS没有提供方便使用的Formatter函数,用字符拼接的方式看起来混乱难读,下面是JS简单实现版本(没有严格测试)

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函数基本一样,只是它的遍历顺序是由右向左

相关文章

  • bootstrapvalidator之API学习教程

    bootstrapvalidator之API学习教程

    这篇文章为大家分享了bootstrapvalidator之API学习教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • js实现文字垂直滚动和鼠标悬停效果

    js实现文字垂直滚动和鼠标悬停效果

    这篇文章主要介绍了js实现文字垂直滚动和鼠标悬停效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 详解JavaScript模块化开发

    详解JavaScript模块化开发

    一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。模块开发需要遵循一定的规范,否则就都乱套了
    2016-12-12
  • DOM事件探秘篇

    DOM事件探秘篇

    本文主要介绍了DOM事件的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • javascript中Number对象的toString()方法分析

    javascript中Number对象的toString()方法分析

    这篇文章主要介绍了javascript中Number对象的toString()方法,较为详细的分析了toString()方法的用法及注意事项,非常具有实用价值,需要的朋友可以参考下
    2014-12-12
  • antd upload控件的data参数使用

    antd upload控件的data参数使用

    这篇文章主要介绍了antd upload控件的data参数使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • js如何判断不同系统的浏览器类型

    js如何判断不同系统的浏览器类型

    正如标题所言使用js如何判断不同系统的浏览器类型,下面有个不错的示例,感兴趣的朋友可以参考下
    2013-10-10
  • js实现简易聊天对话框

    js实现简易聊天对话框

    这篇文章主要为大家详细介绍了js实现简易聊天对话框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 微信小程序实现一键登录

    微信小程序实现一键登录

    这篇文章主要为大家详细介绍了微信小程序实现一键登录,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JS实现Excel导出功能以及导出乱码问题解决详解

    JS实现Excel导出功能以及导出乱码问题解决详解

    这篇文章主要为大家详细介绍了JavaScript如何调用后台接口实现Excel导出功能以及导出乱码问题的解决办法,需要的小伙伴可以参考一下
    2023-07-07

最新评论