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

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

相关文章
|
6天前
|
Java 索引
String字符串常用函数以及示例 JAVA基础
String字符串常用函数以及示例 JAVA基础
string(字符串)
在 Lua 中,字符串可以用双引号或单引号定义,如 `string1 = &quot;this is string1&quot;` 和 `string2 = &#39;this is string2&#39;`。多行字符串可由两个方括号包围,例如 `html` 变量所示,它包含了一个 HTML 片段。Lua 会尝试将数字字符串转换为数值进行算术运算,但混合字符串和数字可能导致错误,如 `&quot;error&quot; + 1`。
|
5天前
|
存储 Java
Java基础复习(DayThree):字符串基础与StringBuffer、StringBuilder源码研究
Java基础复习(DayThree):字符串基础与StringBuffer、StringBuilder源码研究
Java基础复习(DayThree):字符串基础与StringBuffer、StringBuilder源码研究
|
8天前
|
缓存 安全 Java
【Java基础】String、StringBuffer和StringBuilder三种字符串对比
【Java基础】String、StringBuffer和StringBuilder三种字符串对比
9 0
|
8天前
|
存储 编译器 Linux
标准库中的string类(中)+仅仅反转字母+字符串中的第一个唯一字符+字符串相加——“C++”“Leetcode每日一题”
标准库中的string类(中)+仅仅反转字母+字符串中的第一个唯一字符+字符串相加——“C++”“Leetcode每日一题”
|
8天前
|
JavaScript
js 字符串String转对象Object
该代码示例展示了如何将一个以逗号分隔的字符串(`&#39;1.2,2,3,4,5&#39;`)转换为对象数组。通过使用`split(&#39;,&#39;)`分割字符串并`map(parseFloat)`处理每个元素,将字符串转换成浮点数数组,最终得到一个对象数组,其类型为`object`。
|
8天前
|
Python
Python中的字符串(String)
【4月更文挑战第6天】Python字符串是不可变的文本数据类型,可使用单引号或双引号创建。支持连接(+)、复制(*)、长度(len())、查找(find()、index()、in)、替换(replace())、分割(split())、大小写转换(lower()、upper())和去除空白(strip()等)操作。字符串可格式化,通过%操作符、`str.format()`或f-string(Python 3.6+)。字符串以Unicode编码,作为对象拥有属性和方法。熟悉这些操作对处理文本数据至关重要。
40 6
Python中的字符串(String)
|
8天前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
140 0
|
8天前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
35 0
|
8天前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
53 0