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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏农夫安全

浅析XSS的几种测试方法

0x00 背景 最近看到一个好玩的xss社区,准备通过几个经典的关卡来剖析一下XSS,本文仅提供经典案例。 试玩链接:http://tr.secevery...

35080
来自专栏华仔的技术笔记

GO语言学习笔记

505100
来自专栏Java帮帮-微信公众号-技术文章全总结

深入浅出爬虫之道: Python、Golang与GraphQuery的对比

本文将分别使用 Python ,Golang 以及 GraphQuery 来解析某网站的 素材详情页面 ,这个页面的特色是具有清晰的数据结构,但是DOM结构不够...

13210
来自专栏从零开始学自动化测试

Selenium+python自动化82-只截某个元素的图

前言 selenium截取全图小伙伴们都知道,曾经去面试的时候,面试官问:如何截图某个元素的图?不要全部的,只要某个元素。。。小编一下子傻眼了, 苦心人,天不负...

51340
来自专栏我的小碗汤

一个神秘现象引发对beego框架的思考

小强最近在项目中遇到了一个很奇怪的问题:在整改日志规范时,为了避免影响现有的代码结构以及改动尽可能小的前提下,在调用记日志的SDK处将某一个字段值首字母改为大写...

8240
来自专栏前端大白专栏

使用react心得

15950
来自专栏为数不多的Android技巧

Android Studio你不知道的快捷键(二)

在Android Studio你不知道的快捷键(一)里面,主要讲述了一些窗口操作的快捷键还有补全参数提示等,这一篇会分享一些代码代码编辑的快捷键。(默认Keym...

12120
来自专栏Spring相关

Springboot用官方建议访问Html页面并接传值

我们以前通常习惯用webapp来放置jsp页面,但是到了Springboot中,官方建议用Static文件夹来存放及静态的资源,

72340
来自专栏salesforce零基础学习

salesforce 零基础学习(四十四)实现checkbox列表简单过滤功能

现在做的项目代码是原来其他公司做的,要在原来基础上业务进行适当调整加上一些CR,其中有一个需要调整的需求如下: 原来使用apex:selectCheckboxe...

238100
来自专栏北京马哥教育

python实现简单爬虫功能

iOS开发如果之前没接触过除了c和c++(c++太难了,不花个十来年基本不可能精通)的语言,第二门语言最好的选择就是Python.原因就是 1.语法简单 2.库...

33970

扫码关注云+社区

领取腾讯云代金券