写点什么

ES6, Angular, React 和 ABAP 中的 String Template(字符串模板)

作者:Jerry Wang
  • 2021 年 11 月 27 日
  • 本文字数:1521 字

    阅读完需:约 5 分钟

ES6, Angular, React 和 ABAP 中的 String Template(字符串模板)

String Template(字符串模板)在很多编程语言和框架中都支持,是一个很有用的特性。本文将 Jerry 工作中使用到的 String Template 的特性做一个总结。

ES6

阮一峰老师有一个专门的网站介绍 ES6 入门,还出了一本书: 《ECMAScript6 标准入门》。


http://es6.ruanyifeng.com/



我们来看看 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/KnowlegeRepository/blob/master/practice/angular/angular.js

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 的原创技术文章,请关注公众号"汪子熙"。

发布于: 2021 年 11 月 27 日阅读数: 8
用户头像

Jerry Wang

关注

个人微信公众号:汪子熙 2017.12.03 加入

SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使。

评论

发布
暂无评论
ES6, Angular, React 和 ABAP 中的 String Template(字符串模板)