ES6,Angular,React和ABAP中的StringTemplate(字串模板)

JerryWangSAP發表於2018-08-25

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的原創技術文章,請關注公眾號”汪子熙”或者掃描下面二維碼:


相關文章