ES6, Angular,React和ABAP中的String Template(字符串模板)
String Template(字符串模板)在很多编程语言和框架中都支持,是一个很有用的特性。本文将Jerry工作中使用到的String Template的特性做一个总结。
ES6
阮一峰老师有一个专门的网站介绍ES6入门,还出了一本书: 《ECMAScript6标准入门》。
我们来看看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(字符串模板)的更多相关文章
- ES6入门四:对象字面量扩展与字符串模板字面量
简洁属性与简洁方法 计算属性名与[[prototype]] super对象(暂时保留解析) 模板字面量(模板字符串) 一.简洁属性与简洁方法 ES6中为了不断优化代码,减低代码的耦合度在语法上下了很大 ...
- 看结果,测试?java中的String类 字符串拆分成字符串数组 判定邮箱地址 字符串比较 参数传递?
看结果1? package com.swift; class ArrayString { public static void main(String[] args) { String str = & ...
- ES6中字符串模板的使用
反撇号(键盘上Tab键上面那个)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符代替普通字符串的引号 ‘ 或 ” 外,它们 ...
- Python学习笔记 (2.2)Python中的字符编码问题及标准数据类型之String(字符串)
Python3中的String类型 首先,Python中没有字符类型,只有字符串类型.单个字符按照长度为1的字符串处理,这对于曾是OIER的我来说有点不适应啊. 字符串的表示方法 最常用的就是用一对双 ...
- 在某个目录下的所有文件中查找包含某个字符串的Windows命令
findstr可以完成这个工作. 上面的命令表示,当前目录以及当前目录的所有子目录下的所有文件中查找"string"这个字符串. *.*表示所有类型的文件. /s 表示当前目录 ...
- ES6与React中this完全解惑
计划写很长的篇幅,预计12月初完成. 这篇文章涉及的知识较多,可能一次消化不了,可以渐渐来. 先说结论: 无论是ES6还是React的this,相对于ES5,只是增加了箭头函数this绑定了其封闭上下 ...
- Angular React 和 Vue的比较
Angular(1&2),React,Vue对比 一 数据流 数据绑定 Angular 使用双向绑定即:界面的操作能实时反映到数据,数据的变更能实时展现到界面. 实现原理: $scope变量中 ...
- 【转】前端框架天下三分:Angular React 和 Vue的比较
前端框架天下三分:Angular React 和 Vue的比较 原文链接:http://blog.csdn.net/haoshidai/article/details/52346865 前端这几年的技 ...
- 【repost】前端学习总结(二十三)——前端框架天下三分:Angular React 和 Vue的比较
目录(?)[+] 前端这几年的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等: 2.开发框架,如Ang ...
随机推荐
- css border实现三角形
实现过程: 正常的border <div class="box"></div> .box { background: #ddd; width: 100px; ...
- 计算机视觉(CV)前沿国际国内期刊与会议
计算机视觉(CV)前沿国际国内期刊与会议1.国际会议 2.国际期刊 3.国内期刊 4.神经网络 5.CV 6.数字图象 7.教育资源,大学 8.常见问题 1. 国际会议现在,国际上计算机视觉方面的三大 ...
- PHP RSA算法 HMAC-SHA1加密算法
HMAC-SHA1加密算法 function getSignature($str, $key) { $signature = ""; if (function_exists('ha ...
- codevs3145 汉诺塔游戏
3145 汉诺塔游戏 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 白银 Silver 题目描述 Description 汉诺塔问题(又称为河内塔问题),是一个大家熟知 ...
- cogs1612. 大话西游
1612. 大话西游 http://www.cogs.pro/cogs/problem/problem.php?pid=1612 ★★ 输入文件:westward.in 输出文件:westwa ...
- [Xcode 实际操作]七、文件与数据-(1)获取程序沙箱结构中常用的几个目录
目录:[Swift]Xcode实际操作 本文将演示如何获取程序沙箱结构中,常见的几个目录. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit ...
- MySQL最佳客户端工具 -- SQLyog 13.1.1.0 安装与注册
一.前言 SQLyog是一个易于使用的.快速而简洁的图形化管理MYSQL数据库的工具,它能够在任何地点有效地管理你的数据库!SQLyog是业界著名的 Webyog 公司出品的一款简洁高效.功能强大的图 ...
- django后台管理系统(admin)的简单使用
目录 django后台管理系统的使用 检查配置文件 检查根urls.py文件 启动项目,浏览器输入ip端口/admin 如: 127.0.0.1/8000/admin 回车 注册后台管理系统超级管理 ...
- 剑指Offer的学习笔记(C#篇)-- 跳台阶
题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 一 . 解题思路. 由题目可知,青蛙一次可以跳一阶或者两阶.假设台阶为 ...
- JS实现动态瀑布流及放大切换图片效果(js案例)
整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...