ES6, Angular,React和ABAP中的String Template（字符串模板）

时间 2019-11-19

标签 es6 angular react abap string template 字符串模板栏目 JavaScript 繁體版

原文原文链接

String Template（字符串模板）在不少编程语言和框架中都支持，是一个颇有用的特性。本文将Jerry工做中使用到的String Template的特性作一个总结。html

ES6

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

http://es6.ruanyifeng.com/es6

咱们来看看ES6里的String Template。github

首先看下面这段代码。编程

<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的解决方案里，咱们只用了一对"`"符号，将字符串模板的内容包起来，而原始的常规方案，使用了两对“”，稍显麻烦。dom

这个例子自己比较简单，可能体现不出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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

1. 【ES6基础】模板字符串（Template String）
2. es6 string template 字符串模板
3. ABAP，Java，JavaScript里的字符串模板String Template
4. ES6中模板字符串
5. ES6模板字符串
6. es6 模板字符串
7. ES6：模板字符串
8. es6之模板字符串
9. es6中的模板字符串
10. es6模板字符串
更多相关文章...
• C# 字符串（String） - C#教程
• Scala 字符串 - Scala教程
• 委托模式
• C# 中 foreach 遍历的用法