ES6, Angular,React和ABAP中的String Template（字串模板）

i042416發表於2018-08-07
AngularReact字串

String Template（字串模板）在很多程式語言和框架中都支援，是一個很有用的特性。本文將Jerry工作中使用到的String Template的特性做一個總結。

ES6

阮一峰老師有一個專門的網站介紹ES6入門，還出了一本書： 《ECMAScript6標準入門》。

http://es6.ruanyifeng.com/

ES6, Angular,React和ABAP中的String Template（字串模板）

我們來看看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頁面，得到下列輸出。

ES6, Angular,React和ABAP中的String Template（字串模板）

我們再來看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的優勢。但在實際專案中，如果字串模板長度過長或者裡面包含的變數很多時，使用常規解決方案就需要很多“”，非常繁瑣且容易出錯。

ES6, Angular,React和ABAP中的String Template（字串模板）

Angular框架中的String Template的應用

ES6, Angular,React和ABAP中的String Template（字串模板）

其實嚴格意義上來說，Angular框架的{{}}語法並不能等價於ES6中的字串模板，只是我個人覺得它們思路類似，所以也放在一起討論。

看一下這個最簡單的Angular例子。

ES6, Angular,React和ABAP中的String Template（字串模板）

在瀏覽器裡開啟它，在Input field裡輸入一些內容後，這些內容會儲存在通過指令ng-model宣告的名稱為name的模型裡。在HTML的正文，通過語法"{{name}}"將模型name儲存的內容顯示在瀏覽器上。

ES6, Angular,React和ABAP中的String Template（字串模板）

例子本身很簡單。然而您有沒有好奇過，Angular框架實現，在執行時是如何把{{name}}替換成name模型包含的實際內容的？

讓我們除錯一下angular.js的實現，學習一下框架的設計吧。

其實也沒有什麼高深之處，Angular首先還是會用JavaScript字串自帶的API indexOf去查詢字串內是否包含了startSymbol即{{, endSymbol即}}。

ES6, Angular,React和ABAP中的String Template（字串模板）

ES6, Angular,React和ABAP中的String Template（字串模板）

每一次敲一個字元到Input field時，Angular框架都會響應並進行相應處理。

還是上面的例子，如果我輸入單詞Jerry，在Chrome開發者工具裡會觀察到下列的日誌：

ES6, Angular,React和ABAP中的String Template（字串模板）

當然這些日誌都是我研究Angular.js時手動新增進去的。我把我加了很多跟蹤日誌的Angular實現檔案放在我的github上了：

https://github.com/i042416/KnowlegeRepository/blob/master/practice/angular/angular.js

String Template in React

ES6, Angular,React和ABAP中的String Template（字串模板）

React框架裡也有類似Angular裡的字串模板的用法，思路類似。下圖程式碼第14行指定了在渲染時要輸出的HTML原始碼模板，由靜態的<h1>Hello</h1>和動態的{this.props.name}組成。在渲染的時候，{this.props.name}會被替換成Jerry。最後看到的HTML上會顯示Hello Jerry。

ES6, Angular,React和ABAP中的String Template（字串模板）

String Template in ABAP

ABAP是我日常工作使用的程式語言，全稱為Advanced Business Application Programming。語法和ES6是幾乎完全一致的，只是ES6用成對的"`"來作為String Template開始和結束的標誌，而ABAP用“|”。String Template裡內部對變數的宣告，ES6用的是${}, ABAP用的{}。

ES6, Angular,React和ABAP中的String Template（字串模板）

看一個具體的例子吧。

ES6, Angular,React和ABAP中的String Template（字串模板）

要獲取更多Jerry的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:

ES6, Angular,React和ABAP中的String Template（字串模板）

ES6, Angular,React和ABAP中的String Template（字串模板）


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2199310/，如需轉載，請註明出處，否則將追究法律責任。

相關文章