ES6, Angular,React和ABAP中的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源代碼模板，由靜態的<h1>Hello</h1>和動態的{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（字符串模板）