標籤：4行 指令 頁面 mes 名稱 lob pre div src
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 ReactReact架構裡也有類似Angular裡的字串模板的用法，思路類似。代碼第14行指定了在渲染時要輸出的HTML原始碼模板，由靜態<h1>Hello</h1>和動態{this.props.name}組成。在渲染的時候，{this.props.name}會被替換成Jerry。最後看到的HTML上會顯示Hello Jerry。
String Template in ABAPABAP是我日常工作使用的程式設計語言，全稱為Advanced Business Application Programming。文法和ES6是幾乎完全一致的，只是ES6用成對的"`"來作為String Template開始和結束的標誌，而ABAP用“|”。String Template裡內部對變數的聲明，ES6用的是${}, ABAP用的{}。
看一個具體的例子吧。
要擷取更多Jerry的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:
ES6, Angular,React和ABAP中的String Template（字串模板）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
