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（字符串模板）的更多相关文章

  1. ES6入门四：对象字面量扩展与字符串模板字面量

    简洁属性与简洁方法 计算属性名与[[prototype]] super对象(暂时保留解析) 模板字面量(模板字符串) 一.简洁属性与简洁方法 ES6中为了不断优化代码,减低代码的耦合度在语法上下了很大 ...

  2. 看结果，测试？java中的String类 字符串拆分成字符串数组 判定邮箱地址 字符串比较 参数传递？

    看结果1? package com.swift; class ArrayString { public static void main(String[] args) { String str = & ...

  3. ES6中字符串模板的使用

    反撇号(键盘上Tab键上面那个)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符代替普通字符串的引号 ‘ 或 ” 外,它们 ...

  4. Python学习笔记 （2.2）Python中的字符编码问题及标准数据类型之String（字符串）

    Python3中的String类型 首先,Python中没有字符类型,只有字符串类型.单个字符按照长度为1的字符串处理,这对于曾是OIER的我来说有点不适应啊. 字符串的表示方法 最常用的就是用一对双 ...

  5. 在某个目录下的所有文件中查找包含某个字符串的Windows命令

    findstr可以完成这个工作.   上面的命令表示,当前目录以及当前目录的所有子目录下的所有文件中查找"string"这个字符串. *.*表示所有类型的文件. /s 表示当前目录 ...

  6. ES6与React中this完全解惑

    计划写很长的篇幅,预计12月初完成. 这篇文章涉及的知识较多,可能一次消化不了,可以渐渐来. 先说结论: 无论是ES6还是React的this,相对于ES5,只是增加了箭头函数this绑定了其封闭上下 ...

  7. Angular React 和 Vue的比较

    Angular(1&2),React,Vue对比 一 数据流 数据绑定 Angular 使用双向绑定即:界面的操作能实时反映到数据,数据的变更能实时展现到界面. 实现原理: $scope变量中 ...

  8. 【转】前端框架天下三分：Angular React 和 Vue的比较

    前端框架天下三分:Angular React 和 Vue的比较 原文链接:http://blog.csdn.net/haoshidai/article/details/52346865 前端这几年的技 ...

  9. 【repost】前端学习总结（二十三）——前端框架天下三分：Angular React 和 Vue的比较

    目录(?)[+]   前端这几年的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等: 2.开发框架,如Ang ...

随机推荐

  1. shader之texture

    纹理坐标作为属性传递到顶点着色器 texture是OPENGL对象,包含一张或多张相同格式的图片. 它有2中用途: the source of a texture access from a Shad ...

  2. AndroidStudio常用快捷键

    Alt+Insert:查找override函数 Alt+Enter:自动引包

  3. 利用外部协议让chrome启动外部应用程序

    http://bbs.kafan.cn/thread-1254526-1-1.html 原理:很简单,标题写的很明确了,不懂的google去. 步骤:举个例子,我要启动D:\Programe file ...

  4. [Xcode 实际操作]七、文件与数据-(12)数据持久化存储框架CoreData的使用：查找CoreData中的数据

    目录:[Swift]Xcode实际操作 本文将演示如何查找数据持久化对象. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //引入数据持 ...

  5. 通过node.js读取html页面及其页面中引入的css样式

    Node 是什么? Node 是一个基于Chrome V8 引擎的JavaScript 运行环境. Node 不是一种独立的语言.Node不是 JavaScript 框架, Node是一个除了浏览器之 ...

  6. 用Java创建JMeter变量 - 终极指南

    了解如何在Java中创建不同类型的JMeter变量,不同变量类型的详细信息以及如何避免错误. 在Apache JMeter™中编写负载或功能测试涉及使用不同类型的变量.变量有多种用途,例如,在以下情况 ...

  7. CodeForces - 287B-Pipeline（二分）

    Vova, the Ultimate Thule new shaman, wants to build a pipeline. As there are exactly n houses in Ult ...

  8. 什么是.NET for Apache Spark？

    什么是.NET for Apache Spark? 分享一个.NET平台开源免费跨平台的大数据分析框架.NET for Apache Spark for Apache Spark   今天早上六点半左 ...

  9. Selenium~自动化测试来了

    这段时候研究了一下Selenium,它是一个自动化测试工具,在asp.net平台可以通过nuget去安装,同时支持多种开发语言,之前支持java,而现在也支持C#了,所以我们通过nuget就可以安装了 ...

  10. Uncaught Error: Bootstrap's JavaScript requires jQuery

    在写bootstarp的时候,一直报 Uncaught Error: Bootstrap's JavaScript requires jQuery 查看了自己引入的文件路径是对的,也可以使用jquer ...