String Template（字元串模闆）在很多程式設計語言和架構中都支援，是一個很有用的特性。本文将Jerry工作中使用到的String Template的特性做一個總結。
ES6
阮一峰老師有一個專門的網站介紹ES6入門，還出了一本書： 《ECMAScript6标準入門》。
http://es6.ruanyifeng.com/
我們來看看ES6裡的String Template。
首先看下面這段代碼。
names是個數組，傳入一個箭頭函數，針對每個數組原則，構造一個字元串，代表一個p标簽頁，标簽頁的内容就為數組元素本身。
在浏覽器裡打開該html頁面，得到下列輸出。
我們再來看String Template的解決方案。
可以看到String Template的解決方案裡，我們隻用了一對"`"符号，将字元串模闆的内容包起來，而原始的正常方案，使用了兩對“”，稍顯麻煩。
這個例子本身比較簡單，可能展現不出String Template的優勢。但在實際項目中，如果字元串模闆長度過長或者裡面包含的變量很多時，使用正常解決方案就需要很多“”，非常繁瑣且容易出錯。
Angular架構中的String Template的應用
其實嚴格意義上來說，Angular架構的{undefined{}}文法并不能等價于ES6中的字元串模闆，隻是我個人覺得它們思路類似，是以也放在一起讨論。
看一下這個最簡單的Angular例子。
在浏覽器裡打開它，在Input field裡輸入一些内容後，這些内容會存儲在通過指令ng-model聲明的名稱為name的模型裡。在HTML的正文，通過文法"{undefined{name}}"将模型name存儲的内容顯示在浏覽器上。
例子本身很簡單。然而您有沒有好奇過，Angular架構實作，在運作時是如何把{undefined{name}}替換成name模型包含的實際内容的？
讓我們調試一下angular.js的實作，學習一下架構的設計吧。
其實也沒有什麼高深之處，Angular首先還是會用JavaScript字元串自帶的API indexOf去查找字元串内是否包含了startSymbol即{undefined{, endSymbol即}}。
每一次敲一個字元到Input field時，Angular架構都會響應并進行相應處理。
還是上面的例子，如果我輸入單詞Jerry，在Chrome開發者工具裡會觀察到下列的日志：
當然這些日志都是我研究Angular.js時手動添加進去的。我把我加了很多跟蹤日志的Angular實作檔案放在我的github上了：
https://github.com/i042416/KnowlegeRepository/blob/master/practice/angular/angular.jsString 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用的{}。
看一個具體的例子吧。