Label template string

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings

 

Insert Expression

 String embedded in the general expression, the following syntax must be used:

var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
// "Fifteen is 15 and
// not 20."

By now template string, we can use a more elegant way to express:

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

 

Nested template

In some cases, nested template is a most simple method can be configured in a more readable character string. In the template, just within the template

Placeholders  ${ } to use them within, you can easily use the internal anti-quotation marks. For example, if a condition is true, then return to this templated text.

es5:

var classes = 'header'
classes += (isLargeScreen() ?
   '' : item.isCollapsed ?
     ' icon-expander' : ' icon-collapser');

Text without using a template nested in the ES2015:

const classes = `header ${ isLargeScreen() ? '' :
    (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;

 In the nested template literal ES2015 in:

const classes = `header ${ isLargeScreen() ? '' :
 `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

 

Template string with labels

More advanced forms of template template string is a string with a label. You can use the label function parse template strings.

The first argument of the function label contains an array of string values. The rest of the parameters associated with the expression. Finally, your

Function returns the string processing of good (or it may be returned completely different things, the following example).

The name of the function can be used to label any name.

 1 var person = 'Mike';
 2 var age = 28;
 3 
 4 function myTag(strings, personExp, ageExp) {
 5 
 6   var str0 = strings[0]; // "that "
 7   var str1 = strings[1]; // " is a "
 8 
 9   // There is technically a string after
10   // the final expression (in our example),
11   // but it is empty (""), so disregard.
12   // var str2 = strings[2];
13 
14   var ageStr;
15   if (ageExp > 99){
16     ageStr = 'centenarian';
17   } else {
18     ageStr = 'youngster';
19   }
20 
21   return str0 + personExp + str1 + ageStr;
22 
23 }
24 
25 var output = myTag`that ${ person } is a ${ age }`;
26 
27 console.log(output);
28 // that Mike is a youngster

As the examples below show, the tag does not necessarily need the function returns a string.

 1 function template(strings, ...keys) {
 2   return (function(...values) {
 3     var dict = values[values.length - 1] || {};
 4     var result = [strings[0]];
 5     keys.forEach(function(key, i) {
 6       var value = Number.isInteger(key) ? values[key] : dict[key];
 7       result.push(value, strings[i + 1]);
 8     });
 9     return result.join('');
10   });
11 }
12 
13 var t1Closure = template`${0}${1}${0}!`;
14 t1Closure('Y', 'A');  // "YAY!" 
15 var t2Closure = template`${0} ${'foo'}!`;
16 t2Closure('Hello', {foo: 'World'});  // "Hello World!"

 

The original string

 Tag in the first parameter function, there is a special property raw , we can use it to

The original string access template string, without replacing special characters go through.

1 function tag(strings) {
2   console.log(strings.raw[0]);
3 }
4 
5 tag`string text line 1 \n string text line 2`;
6 // logs "string text line 1 \n string text line 2" ,
7 // including the two characters '\' and 'n'

In addition, the use of String.raw() methods to create the original string and use the default template functions and create a connection string is the same.

1 var str = String.raw`Hi\n${2+3}!`;
2 // "Hi\n5!"
3 
4 str.length;
5 // 6
6 
7 str.split('').join(',');
8 // "H,i,\,n,5,!"