ES6, string template in Angular,react and ABAP

Last Update:2018-10-18 Source: Internet

Author: User

Tags chrome developer chrome developer tools

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

String template, which is supported in many programming languages and frameworks, is a useful feature. This article summarizes the characteristics of the string template used in Jerry's work.

ES6

Nanyi Teacher has a special website introduction ES6, also out of a book: "ECMASCRIPT6 Standard Primer."

http://es6.ruanyifeng.com/

Let's take a look at the string Template in ES6.

First look at the following code.

<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 is an array, passing an arrow function. For each array principle, construct a string representing a p-tab. The content of the tab is the array element itself.

Open the html page in the browser and get the following output.

Let's look at the solution for 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>

As you can see in the String Template solution, we only use a pair of "`" symbols to wrap the contents of the string template, and the original regular scheme uses two pairs of "", which is slightly more troublesome.

This example is relatively simple and may not reflect the advantages of String Template. However, in actual projects, if the length of the string template is too long or there are many variables contained in it, using a conventional solution requires a lot of "", which is very cumbersome and error-prone.

Application of String Template in Angular Framework
In fact, strictly speaking, the {{}} grammar of the Angular framework is not equivalent to the string template in ES6, but I personally think that their ideas are similar, so they are also discussed together.

Take a look at this simplest Angular example.

Open it in the browser, and after entering some content in the Input field, the content will be stored in the model named name by the ng-model directive. In the body of the HTML, the content stored in the model name is displayed on the browser by the syntax "{{name}}".

The example itself is simple. However, have you ever wondered how the Angular framework implements, at runtime, replace {{name}} with the actual content contained in the name model?

Let's debug the implementation of angular.js and learn about the design of the framework.

In fact, there is no deep point. Angular first uses the API indexOf that comes with the JavaScript string to find out whether the startSymbol is contained in the string, ie {{, endSymbol is}}.

Each time you type a character into the Input field, the Angular framework responds and processes it accordingly.

As in the above example, if I type the word Jerry, the following logs will be observed in the Chrome Developer Tools:

Of course, these logs are manually added when I research Angular.js. I put the Angular implementation file I added a lot of trace logs on my github:

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

String Template in React
The React framework also has a similar usage of string templates in Angular, with similar ideas. Line 14 of the code specifies the HTML source code template to be output at render time, consisting of a static <h1>Hello</h1> and a dynamic {this.props.name}. At the time of rendering, {this.props.name} will be replaced with Jerry. The last seen HTML will show Hello Jerry.

String Template in ABAP
ABAP is the programming language I use for my daily work, called Advanced Business Application Programming. The syntax is almost identical to ES6, except that ES6 uses the paired "`" as the start and end of the String Template, while ABAP uses "|". The internal declaration of variables in the String Template, ES6 uses ${}, {} for ABAP.

Look at a concrete example.

To get more of Jerry's original technical articles, please pay attention to the public number "Wang Zixi" or scan the QR code below:

String Template (string template) in ES6, Angular, React and ABAP

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More