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源代码模板，由静态的

Hello

和动态的{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（字符串模板）相关推荐

C++中求string类型字符串的长度的方法
在代码中经常会求字符串的有效长度,对char型字符串数组大家会用strlen来求它的有效长度,如何求string类型字符串的有效长度呢?这里有三种方法. (1)使用string的成员函数length( ...
Java中，String类字符串拼接用concat方法和直接用“+”连接符拼接的区别
在String类中,字符串拼接既可以使用concat方法,也可以直接用连接符进行连接,那么两者有什么相同点和不同点呢,下面小编带大家通过代码一起来看一下. concat方法的使用:public Str ...
abap中利用正则表达式除去字符串中的数字
REPLACE ALL OCCURRENCES OF REGEX '[0-9]' IN lv_bstkd WITH space.
C++/C++11中std::string用法汇总
C++/C++11中std::string是个模板类,它是一个标准库.使用string类型必须首先包含<string>头文件.作为标准库的一部分,string定义在命名空间std中. st ...
ie模版字符串_字符串模板、模板字符串、Vue中使用template等等。
1:模板字符遇新是直朋能到串传统的一如分算需上来处一定迹面数一跳这件我子作JS语言,输出模板新直能分支调二浏页器朋代说,事刚需求是这样写的: $('#result').append( 'There ...
smtplib + email 操作邮件及 string.Template模板替换 + openpyxl模块来实现个性化操作邮件相关
通过 smtplib模块 + emaill模块来操作邮件源代码如下: import smtplib #邮箱服务器 from email.mime.multipart import MIMEMult ...
vue模板字符串标签动态参数_Vue中的字符串模板的使用
1.HTML模板和字符串模板 HTML模板:直接在HTML页面挂载的模板.(即非字符串模板) 非字符串模板:在单文件里用指定的模板,换句话说,写在 html 中的就是非字符串模板. 字符串模板:在j ...
vue和react相同点_我在React和Vue中创建了相同的应用程序。这是区别。
vue和react相同点 by Sunil Sandhu 由Sunil Sandhu 我在React和Vue中创建了相同的应用程序. 这是区别. (I created the same app in ...
angular绑定数据_Angular中的数据绑定说明
angular绑定数据数据绑定 (Data Binding) 动机 (Motivation) Data often defines the look of an application. Inter ...

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

ES6

Angular框架中的String Template的应用

String Template in React

Hello

String Template in ABAP

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

最新文章

热门文章