ES6, Angular,React和ABAP中的String Template（字符串模板）
脚本宝典收集整理的这篇文章主要介绍了ES6, Angular,React和ABAP中的String Template（字符串模板），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
String Template（字符串模板）在很多编程语言和框架中都支持，是一个很有用的特性。本文将Jerry工作中使用到的String Template的特性做一个总结。
ES6
阮一峰老师有一个专门的网站介绍ES6入门，还出了一本书： 《ECMAScript6标准入门》。
我们来看看ES6里的String Template。
首先看下面这段代码。
<html>
<div id="JerryTest">
</div>
<script>
function getHTML(names){
var content = names.map((name) =>{ return "<p>Hello, " + name + "!</p>"});
return content.join("");
}
var names = ["Java", "JavaScript", "ABAP"];
var dom = document.getElementById("JerryTest");
dom.innerHTML = getHTML(names);
</script>
</html>names是个数组，传入一个箭头函数，针对每个数组原则，构造一个字符串，代表一个p标签页，标签页的内容就为数组元素本身。
在浏览器里打开该html页面，得到下列输出。
我们再来看String Template的解决方案。
<html>
<div id="JerryTest">
</div>
<script>
function getHTML(names){
var content = names.map((name) =>{ return `<p>Hello, ${name}!</p>`});
return content.join("");
}
var names = ["Java", "JavaScript", "ABAP"];
var dom = document.getElementById("JerryTest");
dom.innerHTML = getHTML(names);
</script>
</html>可以看到String Template的解决方案里，我们只用了一对"`"符号，将字符串模板的内容包起来，而原始的常规方案，使用了两对“”，稍显麻烦。
这个例子本身比较简单，可能体现不出String Template的优势。但在实际项目中，如果字符串模板长度过长或者里面包含的变量很多时，使用常规解决方案就需要很多“”，非常繁琐且容易出错。
Angular框架中的String Template的应用
其实严格意义上来说，Angular框架的{{}}语法并不能等价于ES6中的字符串模板，只是我个人觉得它们思路类似，所以也放在一起讨论。
看一下这个最简单的Angular例子。
在浏览器里打开它，在Input field里输入一些内容后，这些内容会存储在通过指令ng-model声明的名称为name的模型里。在HTML的正文，通过语法"{{name}}"将模型name存储的内容显示在浏览器上。
例子本身很简单。然而您有没有好奇过，Angular框架实现，在运行时是如何把{{name}}替换成name模型包含的实际内容的？
让我们调试一下Angular.js的实现，学习一下框架的设计吧。
其实也没有什么高深之处，Angular首先还是会用JavaScript字符串自带的API indexOf去查找字符串内是否包含了startSymbol即{{, endSymbol即}}。
每一次敲一个字符到Input field时，Angular框架都会响应并进行相应处理。
还是上面的例子，如果我输入单词Jerry，在Chrome开发者工具里会观察到下列的日志：
当然这些日志都是我研究Angular.js时手动添加进去的。我把我加了很多跟踪日志的Angular实现文件放在我的github上了：
https://github.com/i042416/Kn...
String Template in React
React框架里也有类似Angular里的字符串模板的用法，思路类似。下图代码第14行指定了在渲染时要输出的HTML源代码模板，由静态的<h1>Hello</h1>和动态的{this.PRops.name}组成。在渲染的时候，{this.props.name}会被替换成Jerry。最后看到的HTML上会显示Hello Jerry。
String Template in ABAP
ABAP是我日常工作使用的编程语言，全称为Advanced Business Application Programming。语法和ES6是几乎完全一致的，只是ES6用成对的"`"来作为String Template开始和结束的标志，而ABAP用“|”。String Template里内部对变量的声明，ES6用的是${}, ABAP用的{}。
看一个具体的例子吧。
要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:
脚本宝典总结
以上是脚本宝典为你收集整理的ES6, Angular,React和ABAP中的String Template（字符串模板）全部内容，希望文章能够帮你解决ES6, Angular,React和ABAP中的String Template（字符串模板）所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- 在Angular中使用类Redux工具—ngrx/store 2019-06-13
- AngularJs代码实例教程-Angular浏览器插件Batarang介绍及使用 2019-01-07
- AngularJs代码实例教程-详解Angular6.0使用路由步骤(共7步) 2019-01-07
- AngularJs代码实例教程-详解angular如何调用HTML字符串的方法 2019-01-07
- AngularJs代码实例教程-angular中子控制器向父控制器传值的实例 2019-01-07
- AngularJs代码实例教程-angularJS实现不同视图同步刷新详解 2019-01-07
- AngularJs代码实例教程-angularjs通过过滤器返回超链接的方法 2019-01-07
- AngularJs代码实例教程-详解angularjs跨页面传参遇到的一些问题 2019-01-07
- AngularJs代码实例教程-浅谈ng-zorro使用心得 2019-01-07
- AngularJs代码实例教程-Angular(5.2->6.1)升级小结 2019-01-07