Let's talk about how to use the ES6 template string and the es6 template string.

Let's talk about how to use the ES6 template string and the es6 template string.

Preface

ES6 was finally settled in. Although the major browsers do not yet have comprehensive support, this does not prevent us from wanting to seek attention. In the backend, you can use Node. js (0.12 +) or io. js. In the frontend, you can also use Babel or Traceur to pre-convert the syntax to es5.

This series (I don't know if I can become a series, and I am always a little lazy) will be learned without regular selections. You are welcome to actively correct the error and leave a message to discuss it.

Template strings)

Usage

// The normal string 'in JavaScript '\ n' is a line-feed. '// multiline string' In JavaScript this isnot legal. '// The variable var name = "Bob", time = "today";' Hello $ {name}, how are you $ {time }? '// Hello Bob, how are you today?

ES6 introduces a new string literal syntax-template string. In writing, the template string is a string literal that can be embedded with representations in string text. Simply put, it is a string that adds the variable function.

Let's take a look at our previous use of strings:

/*** Before ES6 string stitching */var name = 'cloves docs'; var desc = 'cloves are universal health websites for the masses '; var html = function (name, desc) {var tpl = 'Company name: '+ name +' \ n' + 'Introduction:' + desc; return tpl ;}

Now:

Var html = 'Company name: $ {name} Description: $ {desc }';

Very concise.

This section describes the MDN template string definition:

The template string uses reverse quotation marks () to replace double quotation marks and single quotation marks in common strings. A template string can contain placeholders for a specific syntax ($ {expression. The expressions in the placeholder and the surrounding text are passed to a default function, which is used to connect all the parts.

The placeholder $ {} can be any js expression (function or operation), or even another template string. The calculated result is output as a string. If the $, {and other strings are required in the template, escape them.

Let's take a look at the example.

var x = 1;var y = 2;`${ x } + ${ y } = ${ x + y}` // "1 + 2 = 3"

Different from common strings, template strings can also be written in multiple lines. All spaces, new lines, and indentation in the template strings are output in the generated strings as they are.

There are still many limitations in simple template strings. For example:

1. Special strings cannot be automatically escaped. (This can easily cause injection attacks)
2. Cannot work well with international libraries (that is, numbers, dates, and texts in specific languages are not formatted)
3. There is no built-in loop syntax. (even conditional statements are not supported. You can only use template-based methods)

Tagged template)

This introduces the label template concept. A tag template introduces a tag before the backquotes ). This tag is a function that is used to return values after the Custom template string. Take the example of a special string.

/*** HTML Tag escape * @ param {Array. <DOMString >}templatedata string type tokens * @ param {...}.. calculation result of the vals expression placeholder tokens **/function SaferHTML (templateData) {var s = templateData [0]; for (var I = 1; I <arguments. length; I ++) {var arg = String (arguments [I]); // Escape special characters in the substitution. s + = arg. replace (// g ,"&"). replace (/</g, "<"). replace (/>/g, ">"); // Don't escape special characters in the template. s + = templateData [I];} return s;} // call var html = SaferHTML '<p> This is an introduction to string templates </p> ';

The tag function receives multiple parameters.

1. The first parameter is an array containing the string literal (that is, the values without variable replacement)
2. The following parameters are the replaced variable values.

Example 1

Var name = 'Doctor clove '; var desc = 'Doctor clove is a universal healthcare website for the public'; tag 'Company name: $ {name} Description: $ {desc }'

The tag parameters are ['Company name: ', 'introduction:'], 'cloves docs', and 'cloves docs' are universal health websites for the masses '.

With this method, the right to control is greatly increased. As mentioned above, the international database and even loop statements.

Browser compatibility

1. Server, io. js support
2. Browser, FF34 +, chrome 41 +
3. Mobile IOS 8, Android 4.4
4. IE Tech Preview

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.