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

時間 2019-11-19

標籤 es6 angular react abap string template 字符串模板欄目 JavaScript 简体版

原文原文鏈接

String Template（字符串模板）在不少編程語言和框架中都支持，是一個頗有用的特性。本文將Jerry工做中使用到的String Template的特性作一個總結。html

ES6

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

http://es6.ruanyifeng.com/es6

咱們來看看ES6裏的String Template。github

首先看下面這段代碼。編程

<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的解決方案裏，咱們只用了一對"`"符號，將字符串模板的內容包起來，而原始的常規方案，使用了兩對「」，稍顯麻煩。dom

這個例子自己比較簡單，可能體現不出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的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: