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

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

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


ES6

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


http://es6.ruanyifeng.com/



image.png

我们来看看ES6里的String Template。


首先看下面这段代码。

image.png

names是个数组,传入一个箭头函数,针对每个数组原则,构造一个字符串,代表一个p标签页,标签页的内容就为数组元素本身。


在浏览器里打开该html页面,得到下列输出。


image.png


我们再来看String Template的解决方案。

image.png

可以看到String Template的解决方案里,我们只用了一对"`"符号,将字符串模板的内容包起来,而原始的常规方案,使用了两对“”,稍显麻烦。


这个例子本身比较简单,可能体现不出String Template的优势。但在实际项目中,如果字符串模板长度过长或者里面包含的变量很多时,使用常规解决方案就需要很多“”,非常繁琐且容易出错。


image.png


Angular框架中的String Template的应用

image.png


其实严格意义上来说,Angular框架的{undefined{}}语法并不能等价于ES6中的字符串模板,只是我个人觉得它们思路类似,所以也放在一起讨论。


看一下这个最简单的Angular例子。


image.png


在浏览器里打开它,在Input field里输入一些内容后,这些内容会存储在通过指令ng-model声明的名称为name的模型里。在HTML的正文,通过语法"{undefined{name}}"将模型name存储的内容显示在浏览器上。


image.png


例子本身很简单。然而您有没有好奇过,Angular框架实现,在运行时是如何把{undefined{name}}替换成name模型包含的实际内容的?


让我们调试一下angular.js的实现,学习一下框架的设计吧。


其实也没有什么高深之处,Angular首先还是会用JavaScript字符串自带的API indexOf去查找字符串内是否包含了startSymbol即{undefined{, endSymbol即}}。



image.png



每一次敲一个字符到Input field时,Angular框架都会响应并进行相应处理。


还是上面的例子,如果我输入单词Jerry,在Chrome开发者工具里会观察到下列的日志:


image.png


当然这些日志都是我研究Angular.js时手动添加进去的。我把我加了很多跟踪日志的Angular实现文件放在我的github上了:


https://github.com/i042416/KnowlegeRepository/blob/master/practice/angular/angular.js


String Template in React

image.png


React框架里也有类似Angular里的字符串模板的用法,思路类似。下图代码第14行指定了在渲染时要输出的HTML源代码模板,由静态的


Hello

和动态的{this.props.name}组成。在渲染的时候,{this.props.name}会被替换成Jerry。最后看到的HTML上会显示Hello Jerry。


image.png

String Template in ABAP

ABAP是我日常工作使用的编程语言,全称为Advanced Business Application Programming。语法和ES6是几乎完全一致的,只是ES6用成对的"`"来作为String Template开始和结束的标志,而ABAP用“|”。String Template里内部对变量的声明,ES6用的是${}, ABAP用的{}。

image.png



看一个具体的例子吧。

image.png

相关文章
|
14天前
|
JavaScript 前端开发 API
vue与angular以及react的区别
vue与angular以及react的区别
|
5月前
|
C语言 C++ 容器
C++入门第六篇---STL模板---string【上】string模板的介绍(下)
C++入门第六篇---STL模板---string【上】string模板的介绍(下)
58 0
|
14天前
|
前端开发 JavaScript
JavaScript 前端框架相关: React、Vue或Angular中组件化的概念是什么?
JavaScript 前端框架相关: React、Vue或Angular中组件化的概念是什么?
81 3
|
14天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
14天前
|
前端开发 JavaScript
浅谈React split_分割字符串
浅谈React split_分割字符串
28 0
|
14天前
|
人工智能 前端开发 JavaScript
React、Vue、Angular的发展之旅
React、Vue、Angular的发展
|
14天前
|
SQL JavaScript
js开发:请解释什么是ES6的模板字符串(template string),并给出一个示例。
ES6的模板字符串以反引号包围,支持变量和表达式插入以及多行书写。例如,插入变量值`Hello, ${name}!`,计算表达式`${num1 + num2}`,以及创建多行字符串。模板字符串保留原始空格和缩进,简化了字符串拼接,提高了代码可读性。
20 6
|
14天前
|
前端开发 JavaScript API
|
14天前
|
开发框架 移动开发 JavaScript
探索前端开发框架:React、Angular 和 Vue 的对决(四)
探索前端开发框架:React、Angular 和 Vue 的对决(四)
|
14天前
|
开发框架 JavaScript 前端开发
探索前端开发框架:React、Angular 和 Vue 的对决(三)
探索前端开发框架:React、Angular 和 Vue 的对决(三)

热门文章

最新文章