zoukankan      html  css  js  c++  java
  • 在JS中简单实现Formatter函数

    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个参数分别是:

    1. previousValue:
      • 在遍历第一次进入该回调函数时,如果指定了initivalValue将直接使用initivalValue,如果没有指定将使用数组的第一个元素
      • 第二次及以后的遍历该值是前一次遍历返回的结果
      • 最后一次遍历返回的结果将作为reduce函数的返回值
    2. currentValue: 遍历到的当前item
    3. index: 当前item在数组中的下标
    4. array: 原始array

    在execReplace中每一次执行时使用前一次替换后的结果作为原始替换字符串,使用当前item的index作为要被替换的内容,依次遍历,最终完成替换内容。

    注:reduceRight和reduce函数基本一样,只是它的遍历顺序是由右向左

    关于兼容性:
    (评论中有提到应该注明兼容性问题,这里非常感谢 @段启锋 同学的建议)
    其他浏览器不必说,从IE9开始支持reduce,forEach,map,filter等ES5新函数的

  • 相关阅读:
    理解Web路由(浅谈前后端路由与前后端渲染)
    JavaEE开发之SpringMVC中的路由配置及参数传递详解
    Vue2.0 render: h => h(App)的解释
    vue data不可以使用箭头函数的问题解析
    9、响应式数据原理
    项目中的问题
    7-42 整型关键字的散列映射 (25分)
    7-43 字符串关键字的散列映射 (25分)
    7-45 航空公司VIP客户查询 (25分)
    7-44 基于词频的文件相似度 (30分)
  • 原文地址:https://www.cnblogs.com/yaoshan/p/3922282.html
Copyright © 2011-2022 走看看