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的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:
總結
以上是生活随笔為你收集整理的ES6, Angular,React和ABAP中的String Template（字符串模板）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小米和小米有品什么关系(我的小米云服务)
- 下一篇： 微信程序开发系列教程（一）开发环境搭建