JavaScript基于replace+正则实现ES6的字符串模版功能


Posted in Javascript onApril 25, 2017

本文实例讲述了JavaScript基于replace+正则实现ES6的字符串模版功能。分享给大家供大家参考,具体如下:

采用拼接字符串的形式,将 JSON 数据嵌入 HTML 中。开始时代码量较少,暂时还可以接受。但当页面结构复杂起来后,其弱点开始变得无法忍受起来:

书写不连贯。每写一个变量就要断一下,插入一个 + 和 “。十分容易出错。

无法重用。HTML 片段都是离散化的数据,难以对其中重复的部分进行提取。

无法很好地利用 标签。这是 HTML5 中新增的一个标签,标准极力推荐将 HTML 模板放入 标签中,使代码更简洁。

replace+正则实现

项目刚开始用的数据拼接

function formatString() {
    if (arguments.length === 0)
      return null;
    var str = arguments[0];
    for (var i = 1; i < arguments.length; i++) {
      var re = new RegExp('\\{' + (i - 1) + '\\}', 'gm');
      str = str.replace(re, arguments[i]);
    }
    return str;
},

第一个参数为需要渲染的数据模板,其他参数为数据:

formatString('{0},My name is {1}', 'everyMan', '吴孔云')

这种后期维护较麻烦,一旦更改顺序,都需要更改~~就跟函数需要接收一大串参数一样,我们尽量写成对象的形式,

var myObject = maker(f,l,m,c,s);//不建议写法
var myObject = maker({//建议写法
   first : f,
   last: l,
   state:s,
   city:c
});

在网上搜索看到一个例子,可以类似实现ES6的字符串模版形式,博客是一个高中生写的,戳链接 。

function render(template, context) {
  //被转义的的分隔符 { 和 } 不应该被渲染,分隔符与变量之间允许有空白字符
  var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g;
  return template.replace(tokenReg, function (word, slash1, token, slash2) {
    //如果有转义的\{或\}替换转义字符
    if (slash1 || slash2) {
      return word.replace('\\', '');
    }
    // 切割 token ,实现级联的变量也可以展开
    var variables = token.replace(/\s/g, '').split('.');
    var currentObject = context;
    var i, length, variable;
    for (i = 0, length = variables.length; i < length; ++i) {
      variable = variables[i];
      currentObject = currentObject[variable];
      // 如果当前索引的对象不存在,则直接返回空字符串。
      if (currentObject === undefined || currentObject === null) return '';
    }
    return currentObject;
  })
}
String.prototype.render = function (context) {
  return render(this, context);
};
"{greeting}! My name is { author.name }.".render({
  greeting: "Hi",
  author: {
    name: "hsfzxjy"
  }
});
// Hi! My name is hsfzxjy.

扩展:ES6字符串模版API

ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings)。除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 ” 外,它们看起来与普通字符串并无二致。

var a = 'kenny'
`my name is ${a}` //"my name is kenny"

可以用bable编译成ES5。

Javascript 相关文章推荐
javascript 有趣而诡异的数组
Apr 06 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
jquery插件格式实例分析
Jun 16 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
Swiper实现轮播图效果
Jul 03 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
Mac下安装vue
Apr 11 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 Javascript
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
JS字符串按逗号和回车分隔的方法
Apr 25 #Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 #Javascript
JavaScript中 DOM操作方法小结
Apr 25 #Javascript
ES6正则的扩展实例详解
Apr 25 #Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 #Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 #Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 #Javascript
You might like
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
js每次Title显示不同的名言
2008/09/25 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
python re模块的高级用法详解
2018/06/06 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
python实现列表的排序方法分享
2019/07/01 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
使用python实现对元素的长截图功能
2019/11/14 Python
Pycharm小白级简单使用教程
2020/01/08 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
机关财务管理制度
2014/01/17 职场文书
秋天的雨教学反思
2014/04/27 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
小学课外活动总结
2014/07/09 职场文书
平面设计专业求职信
2014/08/09 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
质量承诺书格式范文
2015/04/28 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫